Q:

How to position sub-menu directly below parent UL (unorder list)?

I am trying to make a navigation bar with fixed positioning and sub-menu using list. I cannot get the sub-menu to be position directly below it's parent UL. It went to far left. What do I need to add in the following code? Sorry if this is too beginner...
<?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; 
}

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

There is white space in the left of the submenu, I changed "display: inline-block;" to "float: left" in "ul.nav > li" and didn't seems to work. I also realise the submenu didn't show in IE10? Must be something wrong with my css...

A:

Why not try with this HTML/CSS structure?
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 */

Fiddle: http://jsfiddle.net/vMuxA/ (Vertical Menu) http://jsfiddle.net/vMuxA/1/ (Horizontal Menu)

