如何將子菜單放置在父UL（無序列表）的正下方？

Question

我正在嘗試使用列表創建具有固定位置和子菜單的導航欄。 我無法使子菜單位於其父UL的正下方。 它走到最左邊。 我需要在以下代碼中添加什么？ 抱歉，如果這太初學者...

<?php 
//Navigation Bar
echo '<div id="nav_main">';
echo '<ul>';
echo '<li><a href="' . $defaultURL . '">LOGO</a></li>';
echo '<li><a href="logout.php">Category</a></li>';
    if($login=='1'){
        echo '<li><a href="#">Home</a></li>';
        echo '<li><a href="#">Settings</a>'
        .'<ul>'
        .'<li><a href="logout.php">Log Out</a></li>'
        .'</ul>'
        .'</li>';
    }else{
        echo '<li><a id="register" href="signup.php">Join Today</a></li>';
        echo '<li><a href="login.php">Sign in</a></li>';            
    }
echo '</ul>';
echo '</div>';
//Navigation Bar
?>

CSS：

#nav_main ul {
    position:fixed;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    padding: 12px;
    background-color: #88B541;
    box-shadow: 2px 2px 1px #888888;
    -moz-box-shadow: 2px 2px 1px #888888;
    -webkit-box-shadow: 2px 2px 1px #888888;
}   

#nav_main li {
    list-style-type: none;  
    display: inline;
    font-size: 15px;
    font-weight: bold;
    padding: 20px;
}

#nav_main a {
    color: #FFFFFF;
    text-decoration: none;
}

#nav_main a:hover {
    padding: 12px 8px;
    background: #52A423;
}

#nav_main ul ul {
    display: none;
    width: auto;
}

#nav_main ul li:hover > ul {
    margin: 45px;
    display: block;
    padding-left: 50px;
    padding-right: 50px;
}

#nav_main ul ul li {
    float: none; 
}

上次修訂的CSS：

ul.nav {
    position:fixed; margin: 0;  top: 0; left: 0; width: 100%;
    background-color: #88B541; box-shadow: 2px 2px 1px #888888;
    -moz-box-shadow: 2px 2px 1px #888888; -webkit-box-shadow: 2px 2px 1px #888888;
}

ul.nav li a {
    display: block; text-decoration: none; color: #FFFFFF; font-weight: bold; padding: 12px; font-size: 15px;
}

ul.nav > li {
    float: left; position: relative;
}

ul.nav li a:hover {
    background: #52A423;
}

ul.nav > li ul {
    display: none; position: absolute; left: -1px; width: 150px; background-color: #88B541; box-shadow: 2px 2px 1px #888888;
    -moz-box-shadow: 2px 2px 1px #888888; -webkit-box-shadow: 2px 2px 1px #888888;
}

ul.nav > li:hover ul { display: block; }
ul.nav > li ul li { display: block; }

子菜單左側有空白，我將其更改為“ display：inline-block;”。 到“ ul.nav> li”中的“ float：left”，似乎沒有用。 我也意識到子菜單沒有在IE10中顯示？ 我的CSS一定有問題...

Answer 1

為什么不嘗試使用這種HTML / CSS結構？

HTML

<ul class="nav">
    <li>
        <a href="#">Menu 1</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 2</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 3</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
</ul>

CSS

* {font-family: "Segoe UI", Tahoma;}
ul.nav {border-bottom: 1px solid #999;}
ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
ul.nav > li:hover ul {display: block;}
ul.nav > li ul li {display: block;} /* Vertical Menu */
ul.nav > li ul li {display: inline-block;} /* Horizontal Menu */

小提琴：
http://jsfiddle.net/vMuxA/ （垂直菜單）
http://jsfiddle.net/vMuxA/1/ （水平菜單）