title: How to position sub-menu directly below parent UL (unorder list)?
body: <p>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...</p>
  
  <pre><code>&lt;?php 
  //Navigation Bar
  echo '&lt;div id="nav_main"&gt;';
  echo '&lt;ul&gt;';
  echo '&lt;li&gt;&lt;a href="' . $defaultURL . '"&gt;LOGO&lt;/a&gt;&lt;/li&gt;';
  echo '&lt;li&gt;&lt;a href="logout.php"&gt;Category&lt;/a&gt;&lt;/li&gt;';
      if($login=='1'){
          echo '&lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;';
          echo '&lt;li&gt;&lt;a href="#"&gt;Settings&lt;/a&gt;'
          .'&lt;ul&gt;'
          .'&lt;li&gt;&lt;a href="logout.php"&gt;Log Out&lt;/a&gt;&lt;/li&gt;'
          .'&lt;/ul&gt;'
          .'&lt;/li&gt;';
      }else{
          echo '&lt;li&gt;&lt;a id="register" href="signup.php"&gt;Join Today&lt;/a&gt;&lt;/li&gt;';
          echo '&lt;li&gt;&lt;a href="login.php"&gt;Sign in&lt;/a&gt;&lt;/li&gt;';            
      }
  echo '&lt;/ul&gt;';
  echo '&lt;/div&gt;';
  //Navigation Bar
  ?&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#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 &gt; ul {
      margin: 45px;
      display: block;
      padding-left: 50px;
      padding-right: 50px;
  }
  
  #nav_main ul ul li {
      float: none; 
  }
  </code></pre>
  
  <p>Last revised CSS:</p>
  
  <pre><code>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 &gt; li {
      float: left; position: relative;
  }
  
  ul.nav li a:hover {
      background: #52A423;
  }
  
  ul.nav &gt; 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 &gt; li:hover ul { display: block; }
  ul.nav &gt; li ul li { display: block; }
  </code></pre>
  
  <p>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...</p>