Html 如何将子菜单直接定位在父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：

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

---

子菜单的左侧有空白，我在“ul.nav>li”中将“display:inline block”改为“float:left”，但似乎不起作用。我还意识到IE10中没有显示子菜单？我的css肯定有问题…

为什么不试试这个HTML/css结构

HTML

---

小提琴：
（垂直菜单）
（水平菜单）您好，我已经实现了这个功能，除了子菜单左侧有空白外，一切都很好。无论如何，要使其完全阻塞？尝试给出

float:left而不是
显示：内联块位于
ul.nav>li
：）先生，我试过了，但结果还是一样。我已将我最新的css粘贴在我的原始帖子上：）@user1934737无sirs请。现在你会拉小提琴了吗？
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; }

<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>

* {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 */