Menubar with submenus using css - html

Question

I am trying to implement a menubar with submenus using CSS.
Demo http://jsfiddle.net/kgu/skg3ctu5/
HTML
<div class="menu">
<ul id="navmenu">
<li> Item1 </li>
<li> Item2 </li>
<li>
Item3
<ul class="sub1">
<li> Item3.1 </li>
<li>
Item3.2
<ul class="sub2">
<li> Item3.2.1 </li>
<li> Item3.2.2 </li>
<li> Item3.2.3 </li>
</ul>
</li>
<li> Item3.3 </li>
</ul>
</li>
<li> Item4 </li>
</ul>
</div>
CSS
* {
margin:0px;
padding:0px;
}
body {
padding:50px;
font-family:verdana;
background-color:#000000;
}
#navmenu li {
list-style-type:none;
}
#navmenu li {
outline:1px solid red;
width:125px;
text-align:center;
position:relative;
float:left;
}
.sub1 {
position:absolute;
top:27px;
left:0px;
}
.sub2 {
position:absolute;
left:126px;
top:0px;
}
#navmenu a {
display:block;
height:25px;
background-color:#ffffff;
text-decoration:none;
}
I want my (submenu 1) .sub1 to appear horizontally below the nav menu. When hovering over the item 3 the submenu item 3.1 should appear below item 1, item 3.2 should appear below item 2, and item 3.3 should appear below item 3.
Could anyone help? thanks!

Answer 1

Here is a complete CSS solution. Change part of your css to this:
*{
margin:0px;
padding:0px;
}
body{
padding:50px;
font-family:verdana;
background-color:#000000;
}
#navmenu li{
list-style-type:none;
}
#navmenu li{
outline:1px solid red;
width:125px;
text-align:center;
position:relative;
float:left;
}
.sub1{
position:absolute;
top:27px;
left:0px;
display:none;
}
.sub1:hover, .sub1:focus {
display:block;
}
.sub2:hover, .sub2:focus {
display:block;
}
.sub2{
position:absolute;
left:126px;
top:0px;
display:none;
}
#navmenu a{
display:block;
height:25px;
background-color:#ffffff;
text-decoration:none;
}
#navmenu a:hover + .sub1{
display:block;
}
#navmenu a:hover + .sub2{
display:block;
}
I gave your sub menu classes display:none. Then if you hover or focus them they will display, this work with the bottom 2 new selectors styles I made which check if an a tag is next to .sub1 or sub2 on hover display block them. All these components together allow for the drop down to work. You can animate with css animations on hover and focus if you want. Note the new selector I used " + " this allows you to select siblings (elements next to each other).
Adding more you can also try using this instead of the css above just add it to the bottom of your css
ul#navmenu li:hover > ul {
display:block;
}