Databases
StackOverflow2013
Postsdbo
POworking on rollover menu (css) - my menu works well until I want to differentiate the current page
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POworking on rollover menu (css) - my menu works well until I want to differentiate the current page
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload