CODEWITHSUNDEEP
htmlcss
Acard21
Acard21

Reputation: 21

Dropdown Menu Different Levels

I want to create a Dropdown menu where I have 3 level, I have done the typical one work, When I hover on the main items I can see the second level items. Now the problem is that I can also see the third level items, Im looking to make the third level items only be seen when I hover the second level items to make it nicer. I took code from http://www.alistapart.com/articles/horizdropdowns/ and modified it.

Here is my file.html

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css_menu.css" />
  </head>
  <body>
   <div id="menu">
    <ul class="formato"> 
        <li class="n-dos"><a class="menu" href="#">Home</a></li> 
        <li class="n-dos"><a class="menu" href="#">About</a> 
          <ul class="test"> 
            <li class="n-tres"><a class="menu" href="#">History</a></li> 
                <ul class="variacion">
                    <li><a class="menu" href="#">Ejemplo_1</a></li>
                    <li><a class="menu" href="#">Ejemplo_2</a></li>
                </ul>   
            <li class="n-dos"><a class="menu" href="#">Team</a></li> 
            <li class="n-dos"><a class="menu" href="#">Offices</a></li> 
          </ul> 
        </li> 
        <li class="n-dos"><a class="menu" href="#">Services</a> 
          <ul class="test"> 
            <li class="n-dos"><a class="menu" href="#">Web Design</a></li> 
            <li class="n-dos"><a class="menu" href="#">Internet Marketing</a></li> 
            <li class="n-dos"><a class="menu" href="#">Hosting</a></li> 
            <li class="n-dos"><a class="menu" href="#">Domain Names</a></li> 
            <li class="n-dos"><a class="menu" href="#">Broadband</a></li> 
          </ul> 
        </li>
        <li  class="n-dos"><a class="menu" href="#">Contact Us</a> </li> 
      </ul>
    </div>
</body>
</html>

and my CSS:

.formato
{
    margin:0;
    padding:0;
    list-style-type:none;
}
.n-dos
{
    display:inline;
    background-color:black;
}
.n-tres
{
    display:inline;
    background-color:black;
}
.test
{
    position: absolute;
    left: 120px;
    top: 35px;
    display: none;
}
.variacion
{
    position: absolute;
    top: 30px;
    left: 120px;
    display: none;
    margin:0;
    padding:0;
    list-style-type:none;
}
.menu
{   
    float:left;
    text-decoration:none;
    color:white;
    background-color:#000000;
    padding:0.3em 0.6em;
    text-align:center;
    width: 150px;
    font-family: 'Trebuchet MS';
}
li.n-dos:hover ul.test 
{ 
    display:inline;
}
li.n-tres:hover ul.variacion 
{ 
    display:block;
}

Upvotes: 1

Views: 278

Answers (2)

Acard21
Acard21

Reputation: 21

Finally found the error, I feel dumb, it was a closing li tag in the wrong place. In the HTML file in the line:

<li class="n-tres"><a class="menu" href="#">History</a></li>

shouldn't be there since that list element had a sublist inside, thats why it didn't showed the sublist elements cause because of the wrong </li> it was like there were no elements inside the list

Upvotes: 0

Robusto
Robusto

Reputation: 31913

I'm pretty sure you don't want to set element level selectors for these things. With selectors like

li ul 
{
    position: absolute;
    left: 120px;
    top: 35px;
    display: none;
}

and 

ul li a 
{   
    float:left;
    text-decoration:none;
    color:white;
    background-color:#000000;
    padding:0.3em 0.6em;
    text-align:center;
    width: 150px;
    font-family: 'Trebuchet MS';
}

your style rules are way too specific. This is the kind of thing you should definitely handle with class selectors. BTW, if you don't make your anchor tags display:block, you're not going to get rules like width and padding and text-align etc. to behave.

Upvotes: 1

Related Questions