html - 需要有关下拉 CSS 菜单的帮助(困惑的缩进)

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，如前所述， float 是主要问题，加上位置设置上的一些困惑:

/* 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;
}