我有一个基于CSS的导航元素,它会删除子类别,然后在下面水平运行它们。像这样:
当用户将鼠标悬停在主要项目上时,它会显示银色背景,当用户将鼠标悬停在子项目上时,它会变为琥珀色。它也会在活动页面上以这种方式显示。
该列表以典型方式构建:
<div id="cv-nav">
<ul>
<a href="#"><li>Item 1</li></a>
<a href="#"><li>Item2
<ul>
<li><a href="#">Item 2a</a></li>
<li><a href="#">Item 2b</a></li>
</ul>
</li></a>
<a href="#"><li>Item 3</li></a>
<ahref="#"><li>Item 4
<ul>
<li><a href="#">Item 4a</a></li>
<li><a href="#">Item 4b</a></li>
</ul>
</li></a>
<a href="#"><li>Item 5</li></a>
</ul>
</div>
CSS使一切正常运行:
#cv-nav {
background-image: url("nav-background");
background-position: left top;
background-repeat: no-repeat;
height: 50px;
position: absolute;
top: 165px;
width: 1024px;
}
#cv-nav ul {
height: 50px;
position: relative;
width: 1024px;
}
#cv-nav ul li {
float: left;
height: 50px;
margin: 0 1px;
padding: 0;
text-align: center;
}
#cv-nav ul a li, #cv-nav ul li a {
color: #D0D2D2;
text-transform: uppercase;
font-family: "Helvetica Neue Black Italic",Helvetica,sans-serif;
font-size: 12px;
letter-spacing: 1px;
line-height: 50px;
}
#cv-nav ul li:hover ul li a {
color: #D0D2D2;
font-family: "Helvetica Neue Black Italic",Helvetica,sans-serif;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
line-height: 30px;
}
#cv-nav ul li:hover, #cv-nav ul a li:hover, #cv-nav ul li.active {
background-image: url("silver-button");
background-position: left top;
background-repeat: repeat-x;
}
#cv-nav ul li ul li:hover {
background: none;
}
#cv-nav ul li:hover a, #cv-nav ul a li:hover, #cv-nav ul li:hover p, #cv-nav ul li.active a, #cv-nav ul a li.active, #cv-nav ul li.active p {
color: #4f4f51;
font-family: "Helvetica Neue Black Italic",Helvetica,sans-serif;
text-transform: uppercase;
}
#cv-nav ul li ul li a:hover, #cv-nav ul li ul.active li a:hover, #cv-nav ul li ul.active li.active, #cv-nav ul li ul.active li.active a {
color: #FAB631;
font-family: "Helvetica Neue Black Italic",Helvetica,sans-serif;
text-transform: uppercase;
background:none;
}
#cv-nav ul li ul {
display: none;
clear: both;
}
#cv-nav ul li:hover ul, #cv-nav ul li.hover ul, #cv-nav ul li ul.active {
display: inline;
height: 30px;
left: 0;
margin: 0;
padding: 0 0 0 40px;
position: absolute;
top: 50px;
width: 984px;
background-image: url("subnav-background");
background-position: left top;
background-repeat: repeat-x;
}
#cv-nav ul li ul li{
position:relative;
float:left;
}
#cv-nav ul li ul li, #cv-nav ul li ul li a, #cv-nav ul li ul.active li, #cv-nav ul li ul.active li a {
color: #D0D2D2;
float: left;
font-family: "Helvetica Neue Black Italic",Helvetica,sans-serif;
font-size: 12px;
height: 30px;
letter-spacing: 0.1em;
margin: 0;
padding: 0px 10px 0 0;
text-transform: uppercase;
line-height: 30px;
}
然而,在IE中,浏览器将嵌套的<ul>
视为另一个<li>
,并将其浮动在前一项的旁边:
您可以看到subnav元素的放置和样式是(有点)正确,但是嵌套<ul>
不应该是它自己的按钮。我尝试在clear:both;
元素中添加#cv-nav ul li ul
属性,但无济于事。
这一点很简单,我忽略了。任何帮助表示赞赏。
这是一个小提琴:http://jsfiddle.net/tylonius/AD7VL/
TY
答案 0 :(得分:0)
我发现了这个问题:
客户希望整个<li>
元素可以点击,而不仅仅是标签。对于其中没有嵌套列表的元素,它工作正常。然而,对于那些做过的人来说,将它们全部放在单个<a>
元素中会使IE混淆。
移动<a>
以围绕标签解决了问题。