title: How to code a drop down menu in css?
body: <p>I have coded a horizontal navigation as shown below.</p>
  
  <p><img src="https://i.stack.imgur.com/U1trW.jpg" alt="enter image description here"></p>
  
  <p>But I am having a hard time trying to code a drop down menu for it.</p>
  
  <p>If someone can help me with coding a plain simple drop down menu below <strong>Rentals</strong> (highlight in the navigation bar in sea blue), I can improve on that.</p>
  
  <h2>Thanks</h2>
  
  <p><strong><em>Here is my current html file:</em></strong></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"             
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
   &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
   &lt;link href="css/layout.css" rel="stylesheet" type="text/css" /&gt;
    &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;ul class="glossymenu"&gt;
      &lt;li class="separator"&gt;&lt;a href="#"&gt;&lt;b&gt;Reservations&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
                         /* Added for the drop down */
                     &lt;ul class="child"&gt;
                             &lt;li&gt;&lt;a href="#"&gt;&lt;b&gt;New Reservation&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
                             &lt;li&gt;&lt;a href="#"&gt;&lt;b&gt;Search Reservation&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
                             &lt;li&gt;&lt;a href="#"&gt;&lt;b&gt;Search Customer&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
                             &lt;li&gt;&lt;a href="#"&gt;&lt;b&gt;Search Vehicle&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
                         &lt;/ul&gt;
              &lt;li class="separator"&gt;&lt;a href="#"&gt;&lt;b&gt;Rentals&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="separator"&gt;&lt;a href="#"&gt;&lt;b&gt;Tariffs&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;   
  
              &lt;li class="separator"&gt;&lt;a href="#"&gt;&lt;b&gt;Fleet&lt;/b&gt;&lt;/a&gt;&lt;/li&gt; 
      &lt;li class="separator"&gt;&lt;a href="#"&gt;&lt;b&gt;Tools&lt;/b&gt;&lt;/a&gt;&lt;/li&gt; 
      &lt;li class="separator"&gt;&lt;a href="#"&gt;&lt;b&gt;Reports&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="separator"&gt;&lt;a href="#"&gt;&lt;b&gt;System Management&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;        
      &lt;/ul&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <h2>    </h2>
  
  <p><strong><em>Here is my css code:</em></strong></p>
  
  <pre><code>.glossymenu{
  
      padding: 0 0 0 0px;
      margin: 0 auto 0 auto;
      background: url(../images/menur_bg.gif) repeat-x; 
      height: 36px;
      list-style: none;
      border:solid 1px #CCC;
  }
  
  .glossymenu li{
  
      float:left;
  }
  
  .glossymenu li a{
  
      float: left;
      display: block;
      color:#000;
      text-decoration: none;
      font-family: sans-serif;
      font-size: 13px;
      font-weight: bold; 
      height: 36px;
      line-height: 36px;
      text-align: center;
      cursor: pointer;
      padding-top: 0;
      padding-right: 0;
      padding-bottom: 0;
      padding-left: 20px;
  
  }
  
  .glossymenu li a b{
  
      float: left;
      display:block;
      padding: 0 28px 0 8px; 
  }
  
  .glossymenu li a:hover{
  
      color: #fff;
      background: url(../images/menur_hover_left.gif) no-repeat; 
      background-position: left bottom;;
  }
  
  .glossymenu li a:hover b{
  
      color: #fff; 
      background-image: url(../images/menur_hover_right.gif);
      background-repeat: no-repeat;
      background-position: right bottom;
  }
  
  .glossymenu li.separator {
  
      background:url(../images/separator.gif) no-repeat;
      background-position:right;
      padding: 0 5px 0 3.5px;
  }
  
     /* Added for the drop down */  
  .glossymenu .child {
  
      position:absolute;
      visibility:hidden;
      top:100px;
  }
  
  .glossymenu ul li:hover  {
  
      visibility:visible;
      z-index:9999; 
  }
  </code></pre>