tags:

views:

54

answers:

2
+1  Q: 

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;
}
+1  A: 

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.

Robusto  2010-06-28 23:57:03
Thaks for advince I changed those to classes but the problem I asked for remains, how can I set that the third level becomes visible "only" when Im over the second level of the nested list?
Acard21  2010-06-29 00:41:08
I'd need to see it in action. Not clear to me what you are talking about.
Robusto  2010-06-29 01:19:19
nicashop.freeiz.com/menu.html as you can see when I hover on "About" it not only shows me the next level which is 'History'-'Team'-'Offices' but also shows me the next level 'Ejemplo_1'-'Ejemplo_2' I dont want that to happen I want 'Ejemplo_1'-'Ejemplo_2'to be shown when I hover on 'History'.
Acard21  2010-06-29 01:40:15
Don't use n_dos for all the li elements. That's your problem. Give them a different class name and make the hover of the n_dos state turn those on. You only want them to turn on when you're over the 2nd menu, so you're forgetting that the way your CSS is written it will display all descendants on hover of the main menu item.
Robusto  2010-06-29 02:04:33
I have tried but when I do that the next level is not shown, as you can see I used n_tres on the li that goes with "History" which is supossed to make third level of the menu visible, also I added a new line on the CSS li.n_tres:hover ul.variacion {display:block;} all should be set but it doesnt do anything... so I guess there is either a problem with the syntax or with my logic.
Acard21  2010-06-29 07:16:08
A: 
Acard21  2010-07-02 23:26:58

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?