25
Tôi có một trình đơn CSS lồng nhau mà tôi không thể lấy menu phụ để xuất hiện.Di chuột một phần tử và thay đổi một phần tử khác (không sử dụng Javascript)
Tôi lấy mã từ A list apart. Ví dụ trên trang web đó hoạt động hoàn toàn tốt, nhưng vì tôi có 2 menu điều hướng CSS trên trang của mình, tôi phải đặt các phần tử HTML của mình trong các lớp CSS khác nhau.
Đây là mã của tôi:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
ul#lvl1 {
margin:0;
padding:0;
list-style:none;
width:150px; /* Width of Menu Items */
border-bottom:1px solid #ccc;
}
li.lvl1 {position:relative}
ul.lvl2 {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
li.lvl1 > a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html.lvl1 > ul > li {float:left;height:1%}
* html.lvl1 > ul > li > a {height:1%}
/* End */
li.lvl2 > a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li.lvl2 > a { padding: 2px 5px; } /* Sub Menu Styles */
a.lvl1:hover ul.lvl2 {display: block} /* The magic */
</style>
</head>
<body>
<ul id="lvl1">
<li class="lvl1">
<a class="lvl1" href="#">item1</a>
<ul class="lvl2">
<li class="lvl2">
<a class="lvl2" href="#">subitem1</a>
</li>
</ul>
</li>
<li class="lvl1">
<a class="lvl1" href="#">item2</a>
<ul class="lvl2">
<li class="lvl2">
<a class="lvl2" href="#">subitem2</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
Bây giờ khi tôi di chuột qua "a" vào mức độ 1, "ul" trên mức 2 sẽ không đi lên. Ai đó có thể vui lòng làm sáng tỏ không? Tôi có thể thiếu một cái gì đó hiển nhiên. Cảm ơn!
Duyệt hỗ trợ cho selectors như thế khác nhau. Nếu bạn cần hỗ trợ ie6 thì đừng làm điều này. –
đáng tiếc là người vẫn cần hỗ trợ ie6! – Jawad