Home/ Questions/Q 907153
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T16:30:25+00:00

I want to create a Dropdown menu where I have 3 level, I have

  • 0

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;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0