Databases
StackOverflow2013
Postsdbo
POCSS menu link background doesn't stay when hovering the drop menu
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS menu link background doesn't stay when hovering the drop menu
    text
    copied!<p>Whenever I hover on the menu item, it turns on the hover background + opens up drop down menu. but whenever I hover the dropdown, the background goes off?</p> <p><a href="http://gyazo.com/20c9ea451a8c2802d80229d5b2bd7af3.png" rel="nofollow">examples</a> and how should it look like <a href="http://gyazo.com/e25aa288d19264ca019caf16ac8d97c7.png" rel="nofollow">this</a></p> <p>see <a href="http://www.justxp.plutohost.net/survive/index.html" rel="nofollow">Live preview</a></p> <p>Also as you see the box shadow goes over it.</p> <p>Codes: My menu html:</p> <pre><code> &lt;div class="secondheader"&gt; &lt;div class="container"&gt; &lt;div class="span12"&gt; &lt;ul class="nav6"&gt; &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li class="dropdown1"&gt;&lt;a href="#"&gt;Categories&lt;/a&gt; &lt;ul&gt; &lt;li class="substyle"&gt;&lt;a href="#"&gt;Buy&lt;/a&gt;&lt;/li&gt; &lt;li class="substyle"&gt;&lt;a href="#"&gt;Sell&lt;/a&gt;&lt;/li&gt; &lt;li class="substyle"&gt;&lt;a href="#"&gt;Forums&lt;/a&gt;&lt;/li&gt; &lt;li class="substyle"&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;li class="substyle"&gt;&lt;a href="#"&gt;item 1&lt;/a&gt;&lt;/li&gt; &lt;li class="substyle"&gt;&lt;a href="#"&gt;Forums&lt;/a&gt;&lt;/li&gt; &lt;li class="substyle"&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;li class="substyle"&gt;&lt;a href="#"&gt;item 1&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Buy&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Sell&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Forums&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;item 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Forums&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;item 1&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>My css of menus:</p> <pre><code>.nav6 { list-style: none; font-family: 'Dosis', sans-serif; float: left font-size: 20px; margin-top: 13px; margin-left: -35px; } .nav6&gt;li&gt;ul{ display:none; position:absolute; background:white; overflow:hidden; width: 150px; background: #fbf2d3; margin-top: 20px; margin-left: -3px; -webkit-box-shadow: 0px 1px 5px 0px #dadada; box-shadow: 0px 1px 5px 0px #dadada; } .nav6&gt;li:hover&gt;ul { display:block; } .nav6 &gt;li { display: inline; margin: 0px; font-size: 18px; font-family: 'Dosis', sans-serif; float: left; margin-top: 10px; } .substyle { padding: 10px; } .substyle:hover { background: #f54922; padding: 10px; -webkit-border-radius: 6px; border-radius: 6px; color: #fff; } .subsyle a:hover { color: #fff; } .nav6&gt;li&gt;a { padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; } .nav6 a{color: #7D7253;} .nav6 a:hover { color: #fff; text-decoration: none; } .nav6 &gt; li &gt; a:hover { background-image: url("../img/hoverbg.png"); } </code></pre> <p>Question: What does > selectors do exactly? could you please explain me that with an easy example? thank you very much!</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