Nhờ chỉnh giúp thuộc tính Float:Left

Mega Menu

gửi 1 tệp file có phải hay k? nhìn tn loạn hết cả lên

Mình không biết cách đính kèm tập tin lên thế nào... các bạn giúp mình với

Sửa ntn nói cụ thể, mai đi làm m gửi file cho!

Phượng Nguyễn Phi , mình trình bày lại Code cho dễ nhìn hơn nghe:

HTML:

Code:

<div class="menu">
   <ul>
  
           <li>
               <a href="#">Menu 1</a>
                   <div class="danh-sach">
                  
                       <div class="colum">
                           <ul>
                                        <h3>Heading 1</h3>
                                        <li><a href="#">Item 1</a></li>
                                        <li><a href="#">Item 2</a></li>
                                        <li><a href="#">Item 3</a></li>
                                        <li><a href="#">Item 4</a></li>
                                        <li><a href="#">Item 5</a></li>
                                        <li><a href="#">Item 6</a></li>
                                        <li><a href="#">Item 7</a></li>   
                           </ul>
                       </div>
                      
                       <div class="colum">
                           <ul>
                                        <h3>Heading 2</h3>
                                        <li><a href="#">Item 1</a></li>
                                        <li><a href="#">Item 2</a></li>
                                        <li><a href="#">Item 3</a></li>
                                        <h3>Heading 3</h3>
                                        <li><a href="#">Item 1</a></li>
                                        <li><a href="#">Item 2</a></li> 
                           </ul>
                       </div>
                      
                       <div class="colum">
                           <ul>
                                        <h3>Heading 4</h3>
                                        <li><a href="#">Item 1</a></li>
                                        <li><a href="#">Item 2</a></li>
                                        <li><a href="#">Item 3</a></li>
                                        <li><a href="#">Item 4</a></li>
                           </ul>
                       </div>
                      
                       <div class="colum">
                           <ul>
                                        <h3>Highlighted Heading I</h3>
                                        <li><a href="#">Item 1</a></li>
                                        <li><a href="#">Item 2</a></li>
                                        <h3>Highlighted Heading II</h3>
                                        <li><a href="#">Item 6</a></li>
                                        <li><a href="#">Item 7</a></li>
                           </ul>
                       </div>
                      
                   </div>
           </li>
          
           <li><a href="#">Menu 2</a></li>
           <li><a href="#">Menu 3</a></li>
           <li><a href="#">Menu 4</a></li>
           <li><a href="#">Menu 5</a></li>

    </ul> 
</div>

CSS:

Code:

@charset "utf-8";
/* CSS Document */
.menu{
    margin-left:300px}
  
.menu ul li{
    width:120px; height:50px; line-height:50px;
    float:left;
    list-style-type:none;
    text-align:center;
    background:#000; border-left:#FFF solid thin
    }
.menu ul li a{
    text-decoration:none;
    color:#FFF; font-weight:bold
    }
.colum{
    float:left}

Bạn cho Code của mình chạy thì sẽ thấy các Heading đang nằm trên nhau mà không phải nằm cùng hàng như hình mình gửi lên, bạn cho chạy Code là sẽ thấy ngay điều đó mà

Của bạn đây
<style>
body {
padding: 0;
margin: 0;
}
ul, li {
list-style-type: none;
}
.menu {
width: 1000px;
height: auto;
margin: 0 auto;
}
.menu ul li {
width: 120px;
height: 50px;
line-height: 50px;
float: left;
text-align: center;
background: #000;
border-left: #FFF solid thin
}
.menu ul li a {
text-decoration: none;
color: #FFF;
font-weight: bold
}
.danh-sach {
width: 600px;
height: 500px;
}
.colum {
width: 30%;
height: auto;
float: left;
}
</style>

Cảm ơn bạn Phượng Nguyễn Phi nhiều ngen, để mình test thử xem sao

Một lần nữa cảm ơn bạn Phượng Nguyễn Phi nha, sau khi được bạn giúp đỡ mình đã hoàn thành bài rồi ...