下拉菜單問題
[英]Dropdown menu issue
問題描述
伙計們，我一輩子我無法弄清楚為什么“選項2”的下拉列表無法正確顯示，列表元素似乎都彼此重疊，並且僅在懸停時顯示最后一個選項，任何想法？
body {
margin: 0;
}
header {
position: relative;
width: 80%;
height: 80px;
padding: 0;
margin: 0 auto;
background: #ff6;
max-width: 1200px;
}
/* nav and submenu */
nav {
position: absolute;
top: 0;
right: 0;
width: auto;
height: 80px;
padding: 0;
margin: 0;
}
nav ul {
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
zoom: 1;
*display: inline;
_height: 80px;
list-style-type: none;
}
nav li a {
display: block;
height: 80px;
}
nav li a:hover {
background: #448f69;
}
/* submenu navigation
---------------------------------------- */
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#menu li {
width: auto;
}
ul#menu li a, ul#menu li ul.sub-menu li a {
width: auto;
text-decoration: none;
color: #000;
padding: 0 15px;
display: block;
font-size: 16px;
}
ul#menu li {
position: relative;
}
ul#menu li ul.sub-menu {
display:none;
postion: absolute;
top: 80px;
left: 0;
width: auto;
}
ul#menu li:hover ul.sub-menu {
display:block;
}
ul#menu li:hover ul.sub-menu li {
position: absolute;
display:block;
width: 100%;
background-color: #red;
}
ul#menu li:hover ul.sub-menu li a:hover {
display:block;
width: auto;
color: #000;
background-color: green;
}
<body>
<header>
<nav>
<ul id="menu">
<li><a href="">Option One</a></li>
<li><a href="">Option Two</a>
<ul class="sub-menu">
<li><a href="">Section A</a></li>
<li><a href="">Section B</a></li>
<li><a href="">Section C</a></li>
</ul><!-- /.sub-menu -->
</li>
<li><a href="">Option Three</a></li>
<li><a href="">Option Four</a></li>
</ul><!-- /#menu -->
</nav>
2 個解決方案
解決方案1
3 已采納 2014-08-22 14:31:23
從根本上講，這是因為您將sbnmenu的所有li都完全固定在了一起，因此它們彼此位於同一位置。
這里使用的定位很奇怪，因此我對其進行了稍微的更新。
CSS
body {
margin: 0;
}
header {
position: relative;
width: 80%;
height: 80px;
padding: 0;
margin: 0 auto;
background: #ff6;
max-width: 1200px;
}
}
nav ul {
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
zoom: 1;
*display: inline;
_height: 80px;
list-style-type: none;
position: relative;
vertical-align: top;
}
nav li a {
display: block;
height: 80px;
}
nav li a:hover {
background: #448f69;
}
/* submenu navigation
---------------------------------------- */
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu li,
ul#menu ul.sub-menu li {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#menu li {
width: auto;
}
ul#menu li a, ul#menu li ul.sub-menu li a {
width: auto;
text-decoration: none;
color: #000;
padding: 0 15px;
display: block;
font-size: 16px;
}
ul#menu li {
position: relative;
}
ul#menu li ul.sub-menu {
display:none;
postion: absolute;
top:100%;
left: 0;
width: auto;
}
ul#menu li:hover ul.sub-menu {
display:block;
}
ul#menu li:hover ul.sub-menu li {
//position: absolute;
display:block;
width: 100%;
background-color: #red;
}
ul#menu li:hover ul.sub-menu li a:hover {
display:block;
width: auto;
color: #000;
background-color: green;
}
解決方案2
2 2014-08-22 14:33:48
進行以下更改：
ul#menu li:hover ul.sub-menu li {
position: relative;/*Change position from absolute to relative*/
display:block;
width: 100%;
background-color: #red;
}
ul#menu li:hover ul.sub-menu li {
position: relative;
display:block;
width: 100%;
/*top: 80px;Remove this*/
background-color: #red;
}
Magento下拉菜單問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.