title: Adding a border-bottom: 1px solid #FFF to Index (top menu only) on hover in CSS Horizontal Drop Down Menu
body: <p>I can't seem to figure as to how to add a border-bottom: 1px solid #FFF to all the top menu (index) items when hovered?</p>
  
  <pre><code>#menu{
      padding:0;
      margin:0;
      position: fixed;
      top: 30px;
      left: 0px;
      font-size: 8pt;
  }
  #menu ul{
      padding:0;
      margin:0;
  }
  #menu li{
      position: relative;
      float: left;
      list-style: none;
      margin: 0;
      padding:0;
  } 
  
  #menu li a{
      width:120px;
      height: 20px;
      display: block;
      text-decoration:none;
      line-height: 20px;
      background-color: #A9BBD3;
      color: #FFF;
  } 
  
  #menu li a:hover{
      background-color: #446087;
  } 
  #menu ul ul{
      position: absolute;
      top: 20px;
      visibility: hidden;
  }
  #menu ul ul li a {
      width: 115px;
      padding-left: 5px;
  }
  #menu ul li:hover ul{
      visibility:visible;
  }
  #menu &gt; ul &gt; li &gt; a {
      text-align:center;
  }
  &lt;div id="menu"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#nogo"&gt;File&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#nogo"&gt;Save&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#nogo"&gt;Link 1-2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#nogo"&gt;Link 1-3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#nogo"&gt;Edit&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#nogo"&gt;Add&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#nogo"&gt;Delete&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#nogo"&gt;Reports&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#nogo"&gt;Link 3-1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#nogo"&gt;Link 3-2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#nogo"&gt;Link 3-3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul&gt;
  &lt;/div&gt;
  </code></pre>