html - Pure CSS dropdown menu -


i'm trying fashion 100% css , html dropdown menu what's seen on http://phpbb.com. when hover on navigation links, new div appears below 1 hovered onto.

what i'm trying make .submenu appear below <li> it's nested using #nav li a:hover submenu {. knowledge css selector should select .submenu div when a element hovered over? doesn't work.

#nav {    list-style-type: none;    margin: -5px 0px 0px 5px;  }  #nav li {    display: inline;  }  #nav li {    display: block;    padding: 3px;    float: left;    margin: 0px 10px 0px 10px;    text-decoration: none;    color: #fff;    font-weight: bold;    position: relative;  }  #nav li a:hover {    text-shadow: 1px 1px #333;  }  #nav li a:hover submenu {    display: block;    color: red;  }  .submenu {    position: absolute;    display: none;  }
<ul id="nav">    <li><a href="/">home</a>    </li>    <li>      <a href="/">skins</a>      <div class="submenu">        hello :)      </div>    </li>    <li><a href="/">guides</a>    </li>    <li><a href="/">about</a>    </li>  </ul>

your second last selector looking "submenu" element, should correct ".submenu"

like this:

/*#nav li a:hover submenu {*/ #nav li a:hover .submenu {   display: block;   color: red; } 

edit:

to hover work, need adjust css hover applied list item, instead of anchor tag:

#nav li:hover .submenu {   display: block;   color: red; } 

Comments

Popular posts from this blog

objective c - Change font of selected text in UITextView -

php - Accessing POST data in Facebook cavas app -

c# - Getting control value when switching a view as part of a multiview -