Vị trí CSS tuyệt đối và chiều rộng của vùng chứa mẹ theo phần trăm

Question

Tôi đang cố tạo một menu thả xuống HTML/CSS có chiều rộng linh hoạt. Do số position:absolute cho cấp thứ hai của điều hướng, tôi không nhận được chiều rộng của cấp đầu tiên. Đang xóa vị trí: tuyệt đối sẽ di chuyển tất cả các phần tử sau trên di chuột ...

Làm cách nào để giải quyết vấn đề này?

Đây là mã:

ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.level_1 > li { 
 
    float: left; 
 
    width: 45%; 
 
    background-color: #2FA4CF; 
 
    margin-right: 6px; 
 
} 
 

 
.level_1 > li:hover ul { 
 
    display: block; 
 
} 
 

 
.level_2 { 
 
    display: none; 
 
    position: absolute; 
 
    width: 45%; 
 
} 
 

 
.level_2 li { 
 
    background-color: #535B68; 
 
}

<ul class="level_1"> 
 
    <li> 
 
    <a href="#">Level one (1)</a> 
 
    <ul class="level_2"> 
 
     <li><a href="#">Level two (1)</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Level one (2)</a></li> 
 
</ul> 
 

 
<p>Paragraph</p>

Xem kết quả ở đây: http://jsfiddle.net/5uf2Y/ Hover "Cấp một (1)" và bạn sẽ thấy, rằng mức độ thứ hai là không giống nhau kích thước như cấp độ đầu tiên ...

Answer 1

Bạn đã quên hai phần tử để hiển thị 100%.

Correction here

yếu tố 1st quên đó là: Chức vụ tương đối trên level_1> li

.level_1 > li { 
    float: left; 
    width: 45%; 
    background-color: #2FA4CF; 
    margin-right: 6px; 
    **position:relative;** 
} 

yếu tố thứ 2 điều chỉnh đó là: thay đổi kích thước của li 2

.level_2 { 
    display: none; 
    position: absolute; 
    width: 100%; 
} 

Với "width:100%" trên .level_2 nó sẽ tự động bật với chiều rộng của mẹ

Answer 2

Thêm position:relative để level_1 > li

.level_1 > li { 
    float: left; 
    width: 45%; 
    background-color: #2FA4CF; 
    margin-right: 6px; 
    position:relative; 
} 

Answer 3

Cố gắng thiết lập các body { width:100%;} tài sản, nó sẽ khắc phục vấn đề này, như hình dưới đây (được thêm vào CSS ban đầu của bạn):

body{ width:100%;} 
ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
.level_1 > li { 
    float: left; 
    width: 45%; 
    background-color: #2FA4CF; 
    margin-right: 6px; 
} 
.level_1 > li:hover ul { 
    display: block; 
} 
.level_2 { 
    display: none; 
    position: absolute; 
    width: 45%; 
} 

.level_2 li { 
    background-color: #535B68; 
} 

Answer 4

Xin chào, bạn có một lề của 6px trên hàng đầu tiên của bạn li đó là lý do tại sao nó lớn hơn một chút. Tôi sẽ sử dụng một lề trái hơn là đúng. Điều đó sẽ khắc phục khoảng cách.