jquery - CSS jQuery Dropline Menu - 如何使第一行 33px？

Question

我正在尝试修改 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;
}

谢谢!

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 ，所以不用担心。