我是 CSS 的新手,我想在我的垂直菜单中弹出一个子菜单,但它没有这样做......请看下面我的 CSS 和 HTML:
.glossymenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 130px;
border: 1px solid #9A9A9A;
border-bottom-width: 0;
position: relative;
top: 15px;
}
.glossymenu li a{
background: white url(../images/glossyback.gif) repeat-x bottom left;
font: bold 11px/1.5em Verdana;
font-size: 120%;
color: white;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;
}
// IE only. Actual menu width minus left padding of A element (10px)
* html .glossymenu li a{
width: 130px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url(../images/glossyback2.gif);
}
ul.sub-level {
display: none;
}
li:hover .sub-level {
background: #999;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 100px;
}
ul.sub-level li {
border: none;
float: left;
width: 150px;
}
和我的 HTML:
<div id="side">
<ul class="glossymenu">
<li><a href="#">MENU</a></li>
<ul class="sub-level">
<li><a href="#"><span>Appetizer</span></a></li>
<li><a href="#"><span>Beverages</span></a></li>
<li><a href="#"><span>Desserts</span></a></li>
</ul>
<li><a href="#">LOCATIONS</a></li>
<li><a href="#">HOURS</a></li>
</ul>
</div>
最佳答案
子菜单元素应位于 li
元素之一内。
检查 this出。
HTML
<div id="side">
<ul class="glossymenu">
<li><a href="#">MENU</a>
<ul class="sub-level">
<li><a href="#"><span>Appetizer</span></a></li>
<li><a href="#"><span>Beverages</span></a></li>
<li><a href="#"><span>Desserts</span></a></li>
</ul>
</li>
<li><a href="#">LOCATIONS</a></li>
<li><a href="#">HOURS</a></li>
</ul>
</div>
CSS
.glossymenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 130px;
border: 1px solid #9A9A9A;
border-bottom-width: 0;
position:relative;
top:15px;
}
.glossymenu li a{
background: white url(../images/glossyback.gif) repeat-x bottom left;
font: bold 11px/1.5em Verdana;
font-size:120%;
color: white;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;
}
* html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 130px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url(../images/glossyback2.gif);
}
ul.sub-level {
display: none;
}
.glossymenu li:hover > .sub-level {
background: #999;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 100px;
}
ul.sub-level li {
border: none;
float:left;
width:150px;
}
关于html - 垂直菜单 - 子菜单不弹出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7383621/