title: how to make a sub navigation in html
body: <p>here is index.html code: </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
      &lt;link rel="icon" type="image/png" href="SENCOR_Logo.ico"&gt;
  &lt;title&gt;SENCOR&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="bg-div"&gt;
      &lt;img class="logo-img" src="SENCOR_Logo.jpg" width="130" height="45"&gt;
      &lt;nav&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Monitoring&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Process&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Post and Create Email/Excel&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Reports&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Re-Create Email&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Merge and Post&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Create Excel Report&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Tools&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Users&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Folder Path&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Change Folder Path&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Sales&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>here are the style.css code:</p>
  
  <pre><code>body{
      margin: 0;
      padding: 0;
      font-size: 15px;
      font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif;
  }
  nav {
      background-color: #333;
      border: 1px solid #333;
      color: #fff;
      display: block;
      margin: 0;
      overflow: hidden;
  }
  nav ul{
      margin: 0;
      padding: 0;
      list-style: none;
  }
  nav ul li {
      margin: 0;
      display: inline-block;
      list-style-type: none;
      transition: all 0.2s;
  }
  
  nav &gt; ul &gt; li &gt; a {
      color: #aaa;
      display: block;
      line-height: 2em;
      padding: 0.5em 2em;
      text-decoration: none;
  
  }
  
  nav li &gt; ul{
      display : none;
      margin-top:1px;
      background-color: #bbb;
  
  }
  
  nav li &gt; ul li{
      display: block;
  }
  
  nav  li &gt; ul li a {
      color: #111;
      display: block;
      line-height: 2em;
      padding: 0.5em 2em;
      text-decoration: none;
  }
  
  nav li:hover {
      background-color: #666;
  }
  nav li:hover &gt; ul{
      position:absolute;
      display : block;
  }
  
  -----------
  .logo-img{
  
      position: fixed;
      margin: 10px 15px 15px 10px;
      left: 0;
      display:inline;
  }
  
  .bg-div{
      background:#333;
      height: 50px;
  }
  
  .bg-div nav {
      position: fixed;
      display:inline;
      right: 0;
  }
  </code></pre>
  
  <p>so i wanted to have a sub menu for may navigation bar that if the mouse pointed in the nav menu the sub menu will drop down. but my code didnt work. what seem to be the problem?</p>