How do I properly use display:block on this menu?

Question

Code:

 <div class="menu">
 <ul class="top_thing">
      <li class="one_one">Services</li>
           <ul class="the_one">
                 <li class="second">Language 1</li>
         <li class="second">Language 2</li>
         <li class="second">Language 3</li>
         <li class="second">Language 4</li>
             <li class="second">Language 5</li>
    </ul>
  <li class="one_one">About Us</li>
      <li class="one_one">Contact</li>
 </ul>
 </div>

For CSS: I am using display:none on .the_one. Now once the services tab is hovered I want to then display .the_one. How can I do this? I tried doing:

 li.the_one:hover {
 display:block;
 }

But that doesn't work either.

Answer 1

Your HTML is not valid. <ul> must have only <li> as children (and that includes other <ul> . Once you fix that, add these rules:

.the_one {
    display: none;
}

.one_one:hover .the_one {
    display: block;
}

http://jsfiddle.net/xvEvj/

Answer 2

You need to target the the inner list in your css to make it appear.

Change your css as below:

li.the_one:hover ul.the_one
{
display:block
}

the "li.the_one:hover" states that this will occur when the li with the class "the_one" is hovered over, then it applies a display:block to the ul with the class "the_one" inside the list item with the class "the_one".

Hope this helps.

Cheers.

Answer 3

Your HTML is not valid.

<div class="menu">
<ul class="top_thing">
    <li class="one_one">Services
        <ul class="the_one">
            <li class="second">Language 1</li>
            <li class="second">Language 2</li>
            <li class="second">Language 3</li>
            <li class="second">Language 4</li>
            <li class="second">Language 5</li>
        </ul>
    </li>
    <li class="one_one">About Us</li>
    <li class="one_one">Contact</li>
</ul>

The second unordered list should rest within a list item of the first unordered list.