Databases
StackOverflow2013
Postsdbo
POcss dropdown submenu mouse highlights text only not full submenu bar
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POcss dropdown submenu mouse highlights text only not full submenu bar
    text
    copied!<p>I'm running into a problem with a CSS submenu I created where the mouse will not highlight the entire submenu bar, but will only highlight an amount relative to the text length.</p> <p>HTML:</p> <pre><code>&lt;body&gt; &lt;div id="page"&gt; &lt;div id="header"&gt; &lt;div&gt; &lt;ul class="main-nav"&gt; &lt;li&gt; &lt;a href="menu.html"&gt;Menu One&lt;/a&gt; &lt;/li&gt; &lt;li class="nav-primary-middle"&gt; &lt;a href="shops.html" &gt;Shops Listing&lt;/a&gt; &lt;ul class="subnav"&gt; &lt;li&gt;&lt;a href="#"&gt;Ice Cream Shop&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Auto Mechanic&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Dentist&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Long Shop Name&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Ace&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>CSS:</p> <pre><code>div#page { width:100%; } div#page div#header { background:url("../images/bg-header.png") no-repeat scroll center bottom transparent; width:100%; height:140px; margin:0 0 90px 0; } div#page div#header div { width:960px; height:140px; margin:0 auto; position:relative; } div#page div#header div a.logo { position:absolute; left:370px; top:7px; display:block; z-index:999; } div#page div#header div ul.navigation { list-style-type:none; margin:0; padding:0; position:absolute; top:65px; } div#page div#header div ul.navigation li { float:left; } div#page div#header div ul.navigation li.middle { margin:0 170px 0 0; } div#page div#header div ul.navigation li.nav-primary-middle { margin:0 170px 0 0; } div#page div#header div ul.navigation li a { font-family:'didact_gothicregular'; font-size:16px; color:#b0b6c4; text-decoration:none; padding:0 40px; } div#page div#header div ul.navigation li a:hover { font-family:'didact_gothicregular'; font-size:16px; color:#5b6a9f; } div#page div#header div ul.navigation li a.active { font-family:'didact_gothicregular'; font-size:16px; color:#5b6a9f; } main-nav { position: relative; width: 100%; height: 67px; background: #f2f2f2; } div#page div#header .subnav { display: none; position: absolute; top: 15px; left: 150px; width: 205px; list-style-type: none; background: #fff; margin: 0; border:solid 2px #eeeeee; border-radius: 10px; z-index:0; padding:0; } div#page div#header .subnav li { display: block; border-bottom: solid 1px #eeeeee; width: 100%; margin:0; } div#page div#header .subnav li a { color: #333; height:48px; padding:0px 0; font-size:13px; } div#page div#header .subnav li a:hover { background:#e3e3e3; width: 215px; border-radius: 3px;last } div#page div#header .subnav2 { display: none; position: absolute; top: 19px; left: 735px; width: 205px; list-style-type: none; background: #fff; margin: 0; border:solid 2px #eeeeee; border-radius: 10px; z-index:0; padding:0; } div#page div#header .subnav2 li { display: block; border-bottom: solid 1px #eeeeee; width: 100%; margin:0; } div#page div#header .subnav2 li a { color: #333; height:48px; padding:0px 0; font-size:13px; } div#page div#header .subnav2 li a:hover { background:#e3e3e3; width: 215px; border-radius: 3px;last } div#page div#header li:hover .subnav { display: block; } div#page div#header li:hover .subnav2 { display: block; } div#page div#header div ul.main-nav { list-style-type:none; margin:0; padding:0; position:absolute; top:65px; } div#page div#header div ul.main-nav li { float:left; } div#page div#header div ul.main-nav li.middle { margin:0 170px 0 0; } div#page div#header div ul.main-nav li.nav-primary-middle { margin:0 170px 0 0; } div#page div#header div ul.main-nav li a { font-family:'didact_gothicregular'; font-size:16px; color:#5b6a9f; text-decoration:none; padding:0 40px; } div#page div#header div ul.main-nav li a:hover { font-family:'didact_gothicregular'; font-size:16px; color:#3f4c7b; } div#page div#header div ul.main-nav li a.active { font-family:'didact_gothicregular'; font-size:16px; color:#3f4c7b; } </code></pre> <p>See the image below as an example of "Dentist" not having a full grey highlight for the entire width of the submenu when you mouse over it:</p> <p>(Edit, oh, I don't have enough rep to post an image. Please see the JSFIDDLE link, select "Shops Listing" and you can see the submenu not highlighting the entire bar.)</p> <p>![dropdown menu highlight in gray][1]</p> <p><strong>Please see this *<em><a href="http://jsfiddle.net/Mk38K/3/" rel="nofollow">this jsfiddle link</a></strong>.</em>* </p> <p>Any help is appreciated, thanks.</p>
 

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