displaying sub-menu's on hover problems - html

Question

I have 2 separate menu's. I want to display the links within menu #2 when hovering over certain buttons on Menu #1. I want to try and do this with CSS if possible. Some of the css I am using is below.
HTML:
<nav>
<ul>
<li>HOME</li>
<li>NEWS</li>
<li>FORUMS</li>
<li>GAMES</li>
<li>XECOM</li>
</ul>
</nav>
<div id="sub-menu-items">
<ul>
<li>Test 1</li>
<li>Test 2</li>
</ul>
</div>
CSS:
#sub-menu-items ul li {
list-style-type: none;
z-index: 99999;
margin-right: 15px;
padding-bottom: 8px;
padding-top: 8px;
display: none;
text-shadow: 2px 3px 3px #080808;
}
nav ul li:first-child:hover #sub-menu-items ul li {
display: inline;
}
how is this not working?

Answer 1

The sub-menu-items need to be a child of the li you are hovering. Thats what this selector means:
nav ul li:first-child:hover #sub-menu-items ul li
CSS drop down menus are done like this:
HTML
<ul>
<li>Parent Item
<ul>
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
<li>Parent Item
<ul>
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
</ul>
CSS
ul ul {
display: none;
}
ul > li:hover ul {
display: block;
}

Answer 2

You will need to nest the sub-menus within parent 'li'
Your code will be something like this:
<nav>
<ul class="parent-menu">
<li>HOME</li>
<li>NEWS
<ul class="sub-menu">
<li>Test 1</li>
<li>Test 2</li>
</ul>
</li>
<li>FORUMS</li>
<li>GAMES</li>
<li>XECOM</li>
</ul>
</nav>
Then you can style sub-menu ul & li (preferably position:absolute) and css can be:
.parent-menu li:hover .sub-menu { display:block}

Answer 3

The ':hover' state of an element can only affect its child elements. To make use of :hover to affect external elements you can make use of javascript.
The CSS in this line
nav ul li:first-child:hover #sub-menu-items ul li {display: inline;}
is looking for "#sub-menu-items ul li" inside the first "li" of "nav".
Depending on your layout you can achieve the desired effect only if you move the second menu inside the first menu.