Question

我只希望第一行（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;
}

谢谢！

Answer 1

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也是如此，所以不要担心它。

Answer 2

如果您不担心旧的浏览器支持，可以使用伪元素选择器:first-child。

li:first-child {
    line-height: 33px;
}

Answer 3

#dropline li.top {height: 33px;}这只会定位您的顶级li代码，因为它们都有top类。此外，它只会使用类li定位top项，这意味着如果需要（类），您可以在其他地方使用它。

Answer 4

为什么不在它们上面添加一些类？

不要使用CSS子，因为它不适用于IE7 / IE8等旧版浏览器。

CSS jQuery Dropline菜单 - 如何使第一行33px？

4 个答案: