title: working on rollover menu (css) - my menu works well until I want to differentiate the current page
body: <p>So, I'm trying to create a horizontal rollover menu .</p>
  
  <p>Things were fine until I start working on my "current page" to show where the visitor is on the navigation bar.
  I wanted to do so with a class named "active".
  I want the sub menu to be visible at all time.</p>
  
  <p>It seems like the <code>&lt;li&gt;</code> (from my navigation ) which are earlier in the html code than the one with the class "active", doesn't react as they are supposed to when mouse hovered; The sub menu doesn't show anymore...</p>
  
  <p>I'm not sure if I'm clear or if I'm making any sense, It is still a new technology to me and explaining what's going on is quite hard.</p>
  
  <p>Please let me know if you can help me or if you want me to explain differently.</p>
  
  <p>Thanks a lot</p>
  
  <p>Mick</p>
  
  <hr>
  
  <h2>UPDATES</h2>
  
  <p>Here are some screenshots of were I am now thanks to Wire42 (I add some lower Z index to the sub menu item as well as a white background).
  So now the previous element react properly to the mouse hover but the active element (in the example "take action") doesn't show the sub menu.</p>
  
  <p><a href="http://www.flickr.com/photos/59878563@N06/7631464894/" rel="nofollow">image 1:</a> the active item doesn't show the sub menu (it should show sub menu even when not mouse hovered)</p>
  
  <p><a href="http://www.flickr.com/photos/59878563@N06/7631465756/" rel="nofollow">image 2:</a> problem solved for the mouse hovered items</p>
  
  <p>Am I missing something?</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#menu_wrapper {
      padding:0;
      margin:0;
      position:relative;
      left:108px;
      top:2px;
  }
  
  #menu {
      width:812px;
      height:28px;
      background-color: #B4B4B4;
      padding:0 0 0 60px;
  }
  
  #menu li {
      display: inline;
      list-style-type: none;  
  }
  
  #menu li a {
      font-size: 13px;
      text-transform: uppercase;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      text-decoration: none;
      float: left;
      color: #000000;
      padding: 6px 13px;
      border-right: 1px solid #999;
  
  }
  
  /* get rid of last border in menus*/
  #menu li:last-child a, #menu li.active li:last-child a, #menu li:hover li:last-child a{
  border:none;
  }
  
  #menu li:hover &gt; a {
      background-color: #e9748b;
  }
  
  #menu li.active &gt; a {   
      background-color: #e9748b;
  }
  
  /*-------------------SUB  MENU---------------*/
  
  
  #menu li ul {
      display:none;
      padding:0 0 0 60px;
  }
  
  #menu li:hover &gt; ul {
      display:block;
      position:absolute;
      padding: 0 0 0 90px;
      left:0; top:28px;
      background:url(Images/background_sub_menu.png) repeat-x;
      width:782px;
      min-height:23px;        
  }
  
  #menu li.active &gt; ul{
      display:block;
      position:absolute;
      padding: 0 0 0 90px;
      left:0; top:28px;
      background:url(Images/background_sub_menu.png) repeat-x;
      width:782px;
      min-height:23px;
      z-index: -1;            
  }
  
  #menu li li {
      list-style:none;
  }
  
  #menu li li a, #menu li.active li a{
      color:#000000;
      background:none;
      text-decoration:none;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;
      font-weight: normal;
      text-transform: none;
      border-right: 1px solid #999;
      padding:5px 10px;
      margin:0;
  }
  
  #menu li.active li a{
      z-index:-1;
  }
  
  #menu li li a:hover  {
      background:none;
      font-weight: bolder;
      color: #000000;
      background-color: #CC6633;
  }
  
  #menu li li.active a {
      text-decoration:underline;
      background:none;
      font-weight: bolder;
      color: #000000;
      z-index:-1;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul id="menu"&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;
                        &lt;ul&gt; 
                        &lt;li&gt;&lt;a href="#"&gt; &lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                  &lt;/li&gt;
  
                      &lt;li&gt;&lt;a href="#"&gt;About the Foundation&lt;/a&gt;
                       &lt;ul&gt; 
                       &lt;li&gt;&lt;a href="#"&gt;What we do&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;Who we are&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;Goals for 2012&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;Annual reports&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;Help 4 Guys .com&lt;/a&gt;&lt;/li&gt;
                       &lt;/ul&gt;
                  &lt;/li&gt;
  
                      &lt;li&gt;&lt;a href="#"&gt;Programs&lt;/a&gt;
                       &lt;ul&gt; 
                       &lt;li&gt;&lt;a href="#"&gt;Male Abuse Awarness Week&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;Help 4 Guys .com&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;Events&lt;/a&gt;&lt;/li&gt;
                       &lt;/ul&gt;
                  &lt;/li&gt;
  
                      &lt;li class="active"&gt;&lt;a href="#"&gt;Take Action&lt;/a&gt;
                       &lt;ul&gt; 
                       &lt;li&gt;&lt;a href="1"&gt;Volunteer for PLF&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="2"&gt;Help our Foundation&lt;/a&gt;&lt;/li&gt;
                       &lt;li class="active"&gt;&lt;a href="3"&gt;Donate&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="4"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
                       &lt;/ul&gt;
                  &lt;/li&gt;
  
                      &lt;li&gt;&lt;a href="#"&gt;Find Support&lt;/a&gt;
                       &lt;ul&gt; 
                       &lt;li&gt;&lt;a href="#"&gt;Child Abuse FAQ&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;Find Support Near You&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;Support for the Families&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;Privacy&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#"&gt;Our Network&lt;/a&gt;&lt;/li&gt;
                       &lt;/ul&gt;
                  &lt;/li&gt;
  
                      &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;
                       &lt;ul&gt; 
                       &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
                       &lt;/ul&gt;
                  &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>