我正在尝试修改Stu Nicholls' awesome menu。
我只希望第一行(HOME,SERVICES,PRODUCTS,PRIVACY)为33px,以下行为22px ......但无法使其工作。
这是我的HTML代码:
<div id="menu">
<ul id="dropline">
<li class="top"><a href="#url">HOME</a></li>
<li class="top"><a class="down" href="#url">SERVICES</a>
<ul class="sub">
<li><a href="#url">Printing</a></li>
<li><a href="#url">Photo Framing</a></li>
<li><a href="#url">Retouching</a></li>
<li><a href="#url">Archiving</a></li>
</ul>
</li>
<li class="top current"><a class="down" href="#url">PRODUCTS</a>
<ul class="sub">
<li class="current"><a class="down" href="#url">Lenses</a>
<ul class="sub">
<li><a href="#url">Telephoto</a></li>
<li class="current"><a class="down" href="#url">Zoom</a>
<ul class="sub">
<li><a href="#url">35mm to 125mm</a></li>
<li class="current"><a href="#url">50mm to 250mm</a></li>
<li><a href="#url">125mm to 500mm</a></li>
</ul>
</li>
<li><a href="#url">Mirror</a></li>
</ul>
</li>
<li><a href="#url">Flash Guns</a></li>
</ul>
</li>
<li class="top"><a href="#url" id="privacy">PRIVACY</a></li>
</ul> <!-- end ul dropline -->
</div> <!-- end menu -->
以下是CSS代码:
#menu {
position:relative;
height:33px;
background: url("../images/nav-bg.gif") repeat-x;
}
#dropline {
position:relative;
font-size:12px;
height:33px;
}
#dropline, #dropline ul {
padding:0;
margin:0;
list-style:none;
width:1010px;
}
#dropline table {
border-collapse:collapse;
margin:-1px -10px;
0 0;
padding:0;
width:0;
height:0;
font-size:12px;
}
#dropline li {
float:left;
height:33px;
}
#dropline li a {
float:left;
display:block;
height:33px;
line-height:33px;
padding:0 20px 0 10px;
font-family:tahoma, verdana, arial;
font-size:13px;
letter-spacing: 1px;
color:#a49572;
text-decoration:none;
font-weight:normal;
}
#dropline li ul li a {
color:#a49572;
letter-spacing: 0;
font-size:11px;
text-transform:none;
}
#dropline li a.down {
background:url(down.gif) no-repeat right center;
}
#dropline li ul li a.down {
font-weight:bold;
}
#dropline li ul {
position:absolute;
top:33px;
left:-9999px;
z-index:10;
background:url(fade.png);
}
#dropline li ul.floatRight li {
float:right;
}
#dropline .sub {
background: #c76023 url("../images/nav-sec-lines-bg.gif") repeat-x;
}
谢谢!
答案 0 :(得分:0)
33px,我认为你的意思是身高。
#dropline li {
height: 22px;
}
#dropline li a {
line-height: 22px;
}
#dropline > li {
height: 33px;
}
#dropline > li a {
line-height: 33px;
}
根据需要将这些规则集成到CSS中,您可能必须删除一些将覆盖这些规则的规则。这在IE6中不起作用,但即使Microsoft wants it dead也是如此,所以不要担心它。
答案 1 :(得分:0)
如果您不担心旧的浏览器支持,可以使用伪元素选择器:first-child
。
li:first-child {
line-height: 33px;
}
答案 2 :(得分:0)
#dropline li.top {height: 33px;}
这只会定位您的顶级li
代码,因为它们都有top
类。此外,它只会使用类li
定位top
项,这意味着如果需要(类),您可以在其他地方使用它。
答案 3 :(得分:0)
为什么不在它们上面添加一些类?
不要使用CSS子,因为它不适用于IE7 / IE8等旧版浏览器。