CSS tràn ẩn và tuyệt đối vị trí

Question

xem xét sau đây đánh dấu menu đơn giản (tự động tạo ra, và tôi không có nhiều quyền kiểm soát nó):

.menu { 
 
    width: 500px; 
 
    height: 20px; 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    /* overflow: hidden ... problem */ 
 
} 
 
li { 
 
    float: left; 
 
    position: relative; 
 
    margin-right: 30px; 
 
} 
 
ul li .submenu { 
 
    position: absolute; 
 
    left: 0; 
 
    display: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    width: 100px; 
 
} 
 
ul li:hover .submenu { 
 
    display: block; 
 
}

<ul class="menu"> 
 
    <li>Lorem ipsum</li> 
 
    <li>Submenu 
 
    <ul class="submenu"> 
 
     <li>Sub item 1</li> 
 
     <li>Sub item 2</li> 
 
    </ul> 
 
    </li> 
 
    <li>consectetur</li> 
 
    <li>adipiscing elit</li> 
 
    <li>Aliquam elit nisi</li> 
 
    <li>pharetra quis</li> 
 
    <li>nulla eget</li> 
 
</ul>

Trong đoạn mã trên, thực đơn có chiều rộng cố định, nhưng nó có nhiều mục hơn có thể vừa với chiều rộng đó, vì vậy phần còn lại của các mục sẽ đi trên dòng thứ hai. Tôi muốn chỉ hiển thị các mục có thể vừa với dòng đầu tiên và muốn ẩn phần còn lại của chúng.

Vì mục đích đó, tôi muốn chỉ định chiều cao cho menu. Tôi đang sử dụng CSS này cho menu:

.menu { 
    width: 500px; 
    height: 20px; 
    overflow: hidden; /* problem */ 
} 

Vấn đề là Các css trên ẩn .submenu mục quá. Vui lòng xem demo để hiểu vấn đề.

Demo:http://jsfiddle.net/Lgyg2a4r/

Answer 1

Đối với phần đầu tiên của sự cố, bạn có thể sử dụng white-space: nowrap trên menu và display: inline-block trên các con ngay lập tức. Điều này buộc tất cả các mục menu trên một dòng và chúng mở rộng qua cạnh phải của cửa sổ.

Tuy nhiên, điều này sẽ buộc thanh cuộn ngang. Tùy thuộc vào tình huống của bạn, bạn có thể thêm overflow-x: hidden vào phần tử chứa menu. Phần tử đó phải có nội dung khác sao cho nó cao hơn menu con cao nhất.

#wrapper { 
 
    overflow-x: hidden; 
 
    min-height: 400px; 
 
} 
 
.menu { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    white-space: nowrap; 
 
    background-color: palevioletred; 
 
} 
 
.menu > li { 
 
    display: inline-block; 
 
    margin-right: 30px; 
 
    position: relative; 
 
} 
 
.submenu { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    display: none; 
 
    background-color: paleturquoise; 
 
} 
 
.menu li:hover .submenu { 
 
    display: block; 
 
}

<div id="wrapper"> 
 
    <ul class="menu"> 
 
    <li>Lorem ipsum</li> 
 
    <li>Submenu 
 
     <ul class="submenu"> 
 
     <li>Sub item 1</li> 
 
     <li>Sub item 2</li> 
 
     </ul> 
 
    </li> 
 
    <li>consectetur</li> 
 
    <li>adipiscing elit</li> 
 
    <li>Aliquam elit nisi</li> 
 
    <li>pharetra quis</li> 
 
    <li>nulla eget</li> 
 
    </ul> 
 
</div>

Answer 2

Nếu bạn có thể để thêm một lớp học để các mục mà bạn muốn ẩn trên di chuột (dòng thứ hai), hãy thử một cái gì đó như thế này:

...... 
<li class="sec">Aliquam elit nisi</li> 
<li class="sec">pharetra quis</li> 
<li class="sec">nulla eget</li> 
...... 

CSS

ul li:hover ~ li.sc { 
    display: none; 
} 

Answer 3

Theo cách bạn có thể làm điều đó mà không cần JQuery. Xóa position:relative từ li. Và xóa left, top từ submenu và sử dụng tiêu cực margin sẽ thực hiện thủ thuật.

.menu { 
 
    width: 500px; 
 
    height: 20px; 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    overflow: hidden /* problem */ 
 
} 
 

 
li { 
 
    float: left;  
 
    margin-right: 30px; 
 
} 
 

 
ul li .submenu { 
 
    position: absolute; 
 
    display: none; 
 
    list-style: none; 
 
    width: 100px; 
 
    margin-left: -40px; 
 
} 
 

 
ul li:hover .submenu { 
 
    display: block; 
 
}

<ul class="menu"> 
 
    <li>Lorem ipsum</li> 
 
    <li >Submenu 
 
     <ul class="submenu"> 
 
      <li>Sub item 1</li> 
 
      <li>Sub item 2</li> 
 
     </ul> 
 
    </li> 
 
    <li>consectetur</li> 
 
    <li>adipiscing elit</li> 
 
    <li>Aliquam elit nisi</li> 
 
    <li>pharetra quis</li> 
 
    <li>nulla eget</li> 
 
</ul>

Kiểm tra Fiddle Here.

Lưu ý: không đáng tin cậy nhưng tốt để giải quyết vấn đề.

Answer 4

bạn có thể đạt được điều này với sự giúp đỡ của jQuery $(this).position();

$('li').hover(function(){ 
     var li = $(this).position(); 
     $(this).children('ul').css({ 
      left: li.left, 
      top : li.top+20 
     }).fadeToggle(); 
}); 

và loại bỏ các position relative từ li

Working File