title: multi-level (drop down) menu css js
body: <p>I want to have multi-level (drop down) menu, <strong>such that I can change the menu just one file, and do not have to go to every single page to change the menu. I will need three level menu</strong>.</p>
  
  <p>I have modified someone code but not working as I like</p>
  
  <p>CSS code (OurSite.css)</p>
  
  <pre><code>ul#third-level-menu
  {
    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
  }
  
  ul#third-level-menu &gt; li
  {
    height: 30px;
    background: #999999;
  }
  
  ul#third-level-menu &gt; li:hover { background: #CCCCCC; }
  
  ul#second-level-menu
  {
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
  }
  
  ul#second-level-menu &gt; li
  {
    position: relative;
    height: 30px;
    background: #999999;
  }
  ul#second-level-menu &gt; li:hover { background: #CCCCCC; }
  
  ul#top-level-menu
  {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  ul#top-level-menu &gt; li
  {
    position: relative;
    float: left;
    height: 30px;
    width: 150px;
    background: #999999;
  }
  ul#top-level-menu &gt; li:hover { background: #CCCCCC; }
  
  ul#top-level-menu li:hover &gt; ul
  {
  /* On hover, display the next level's menu */
  display: inline;
  }
  
  
  /* Menu Link Styles */
  
  ul#top-level-menu a /* Apply to all links inside the multi-level menu */
  {
    font: bold 14px Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    text-decoration: none;
    padding: 0 0 0 10px;
  
  /* Make the link cover the entire list item-container */
    display: block;
    line-height: 30px;
  }
  
  ul#top-level-menu a:hover { color: #000000; }
  </code></pre>
  
  <p>I also have 
  js code (Menu-Script.js)</p>
  
  <pre><code>document.getElementById("nav01").innerHTML =
  "&lt;ul id='top-level-menu'&gt;" +
  "&lt;li&gt;&lt;a href='index.html'&gt;Home&lt;/a&gt;&lt;/li&gt;" +
  
  "&lt;ul id='second-level-menu'&gt;" +
  "&lt;li&gt;&lt;a href='index12.html'&gt;Home12&lt;/a&gt;&lt;/li&gt;" +
  
  
   "&lt;ul id='third-level-menu'&gt;" +
   "&lt;li&gt;&lt;a href='index123.html'&gt;Home123&lt;/a&gt;&lt;/li&gt;" +
   "&lt;li&gt;&lt;a href='index124.html'&gt;Home124&lt;/a&gt;&lt;/li&gt;" +
   "&lt;/ul&gt;" +
  
   "&lt;li&gt;&lt;a href='index13.html'&gt;Home13&lt;/a&gt;&lt;/li&gt;" +
  
   "&lt;/ul&gt;"  +
  
  "&lt;li&gt;&lt;a href='customers.html'&gt;Data&lt;/a&gt;&lt;/li&gt;" +
  "&lt;li&gt;&lt;a href='about.html'&gt;About&lt;/a&gt;&lt;/li&gt;" +
  "&lt;/ul&gt;"; 
  </code></pre>
  
  <p>For HTML Code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
   &lt;head&gt;
    &lt;title&gt;Demo&lt;/title&gt;
    &lt;link href="OurSite.css" rel="stylesheet"&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;nav id="nav01"&gt;&lt;/nav&gt;
    &lt;div id="main"&gt;
      &lt;h1&gt;Welcome to Our Site&lt;/h1&gt;
      &lt;h2&gt;Web Site Main Ingredients:&lt;/h2&gt;
  
      &lt;p&gt;Pages (HTML)&lt;/p&gt;
      &lt;p&gt;Style (CSS)&lt;/p&gt;
      &lt;p&gt;Code (JavaScript)&lt;/p&gt;
    &lt;/div&gt;
    &lt;script src="Menu-Script.js"&gt;&lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Or if you have a better code pleaes let me know, many thanks</p>