Question

我正在尝试制作css下拉菜单：http://jsfiddle.net/zaesegaff/fjC3U/

    <ul id="nav2" class="sf-menu">
<li class='current_page_item'><a href='index.php'>HOME</a></li>
    <li><a href='?content=matkul'>SUB MENU 1</a>
        <ul>
            <li><a href='?content=matkul&id=1'>Menu 1</a></li>
            <li><a href='?content=matkul&id=2'>Menu 2</a></li>
            <li><a href='?content=matkul&id=3'>Menu 3</a></li>
            <li><a href='?content=matkul&id=4'>Menu 4</a></li>
            <li><a href='?content=matkul&id=5'>Menu 5</a></li>
        </ul>
    </li>
    <li><a href='?logout'>LOGOUT</a></li></ul>

的CSS：

/* NAVIGATION ------------------------------------------------------------*/
body {
    background-color:#000;
}
#nav-holder{
    width: 700px;
    position: absolute;
    top:68px;
    right: 10px;
    font-size: 20px;
}

#nav2{
    display: block;
    float: right;
    font-family:"bebas Neue";
}

#nav2 li{
    display: block;
    float: left;
    padding-left: 20px;
}

#nav2 li:first-child{
    padding-left: 0px;
}

#nav2 li a{
    color: #f0efeb;
    text-decoration: none;
    padding-bottom: 5px;
}

#nav2>li>a:hover,
#nav2>li.current_page_item>a{
    color: #d24c0a;
    background: url(../img/sprites.png) no-repeat center -51px;
}       

/* sub nav */
#nav2 li ul{
    padding:0px;
    background: #1b1b1b;
    display:none;
}
#nav2 li:hover ul{
    display: block;
    position:absolute;
    padding:3px;
    background: #1b1b1b;
    z-index:2000;
    margin: 5px 0px 0px 0px;
    color: #fff;
    border-bottom: 1px solid #939392;
    color: #d24c0a;
}

#nav li ul li{
    padding: 0px;
    margin: 0px;
    border-bottom: 1px solid #939392;
}

#nav2 li ul li:last-child{
    border-bottom: none;
}

#nav2 li ul li{
    padding: 5px;
    margin: 0px;
    font-size: 18px;
    color: #939392;
}

/* text nya */
#nav2 li ul li:hover{ 
    background: #4e4e50;
    background-size:contain;
}

#nav2 li ul li:hover a{ color: #fff; }

但我的问题是： 1.如何使它成为这样：

子菜单
- 菜单1
- 菜单2
- 菜单3
- 菜单4
- 菜单5

在我的代码中，它很乱，并且它在第一个子菜单上有不同的边距（或填充？）

任何人都可以帮助我？

Answer 1

http://jsfiddle.net/fjC3U/3/

我清理了一下你的css，正如之前所说的漂浮是主要问题，加上一些关于位置设置的混淆：

/* NAVIGATION ------------------------------------------------------------*/
body {
    background-color:#000;
}
#nav2{
    display: block;
    float: right;
    font-family:"bebas Neue";
}

#nav2 li{
    display: block;
    float: left;
    padding-left: 20px;
    position:relative;
}

#nav2 li a{
    color: #f0efeb;
    text-decoration: none;
    padding-bottom: 5px;
}

#nav2>li>a:hover,
#nav2>li.current_page_item>a{
    color: #d24c0a;
    background: url(../img/sprites.png) no-repeat center -51px;
}       

/* sub nav */
#nav2 li ul{
    padding:0px;
    background: #1b1b1b;
    display:none;
}
#nav2 li:hover ul{
    display: block;
    position:absolute;
    left:25px;
    background: #1b1b1b;
    z-index:2000;
    margin: 5px 0px 0px 0px;
    color: #fff;
    border-bottom: 1px solid #939392;
    color: #d24c0a;
}

#nav2 li ul:hover
{
    display: block;
}

#nav2 li ul li{
    display: block;
    float:none;
    border-bottom: 1px solid #939392;
    padding: 5px;
    margin: 0px;
    font-size: 18px;
    color: #939392;
}

#nav2 li ul li:hover
{
   background-color:red;
}

#nav2 li ul li:last-child{
    border-bottom: none;
}

Answer 2

要让它们向下流动，您必须在第二个列表中添加clear:both，因为您继承了float:left。

http://jsfiddle.net/fjC3U/1/

Answer 3

添加此

#nav2 li ul
{
    width:100px;
}

Answer 4

要将子菜单项一个在另一个下方对齐，您必须进行一些css更改。

#nav2 li ul li{
  float:none; //to remove the float: left assigned to #nav2 li
}

更改

#nav2 li:first-child{
  padding-left: 0px;
}

以便padding-left:0仅应用于主菜单的第一个li项目

#nav2 > ul li:first-child{
    padding-left: 0px;
}

检查jsfiddle

要对子菜单列表项进行进一步更改，请将样式添加到此#nav2 li ul li。例如，为子菜单li项添加边框底部

#nav2 li ul li{
   border-bottom: 1px solid #939392;
}

下拉css菜单需要帮助（凌乱的缩进）

4 个答案: