css drop down menu, submenu

what if i remove the id...

<ul id = "nav" >

so it looks like this...

<ul>

... then what would be the css?

then replace #nav with ul

ul > li > ul > li > ul{
  display: none;
  position: absolute; 
  //top: 1em;
  //left: 0;
  }

Select allOpen in new window

then All uls on your page of this hierarchy will be affected.

hello kozai,

when i remove the id,
this works fine...

ul > li > ul > li > ul{
  display: none;
  position: absolute;
  //top: 1em;
  //left: 0;
  }

but i also need to hide conce, smallmouth, whalesucker
so i use...

li ul, ul > li > ul > li > ul{
  display: none;
  position: absolute;
  //top: 1em;
  //left: 0;
  }

but that doesnt work. what's wrong?

a comma separates selectors.

So, with this line: li ul, ul > li > ul > li > ul

You are targeting two selectors:

1. li ul => all ul's inside any li's
AND
2. ul > li > ul > li > ul => the ul inside an li which is inside a ul which is inside an li which is inside a ul

Also, you want to make sure that your menu has a consistent hierarchy so the css can work properly. Your html is inconsistent. What are you trying to achieve? Could you post your menu items using the following indentation:

main item1
    sub item1.1
    sub item1.2
        sub sub item1.2.1
main item2
   sub item2.1

......

Then we'll be able to clean up the html and css to play nice together.

Sunfishes  
      Sunfish
      Fruits
                  Orange
                  Apple
                  Banana
                  Mango
                  Pear
         Ozark bass
         White crappie
Grunts
         Smallmouth grunt
         Burrito
         Pigfish
Remoras
         Whalesucker
         Marlinsucker
         Ceylonese remora
         Spearfish remora
         Slender suckerfish

ok, your first answer did fine, my menu worked.
i combined kozai's answer with xmediaman's answer.

here's the complete code.

<ul id = "nav" >
  <li>Sunfishes
    <ul>
            <div>
                  Conce Conce Conce Conce Conce Conce Conce <br>
                  Conce Conce Conce Conce Conce Conce Conce <br>
                  Conce Conce Conce Conce Conce Conce Conce <br>
                  Conce Conce Conce Conce Conce Conce Conce <br>
                  Conce Conce Conce Conce Conce Conce Conce <br>
                  Conce Conce Conce Conce Conce Conce Conce <br>
                  Conce Conce Conce Conce Conce Conce Conce <br>
            </div>
      <li><a href="">Sunfish</a></li>
     
        <li>
            Fruits
            <ul>
                  <li><a>Orange</a></li>
                  <li>Apple</li>
                  <li>Banana</li>
                  <li>Mango</li>
                  <li>Pear</li>
            </ul>
        </li>
        
      <li><a href="">Ozark bass</a></li>
      <li><a href="">White crappie</a></li>
            </ul>
      </li>

  <li>Grunts
    <ul>
      <li><a href="">Smallmouth grunt
        </a></li>
      <li><a href="">Burrito</a></li>
      <li><a href="">Pigfish</a></li>
    </ul>
  </li>

  <li>Remoras
    <ul>
      <li><a href="">Whalesucker</a></li>
      <li><a href="">Marlinsucker</a></li>
      <li><a href="">Ceylonese remora</a></li>
      <li><a href="">Spearfish remora</a></li>
      <li><a href="">Slender suckerfish</a></li>
    </ul>
  </li>
</ul>


<style>
#nav > li > ul > li:hover > ul{
  display: block;
}

ul {
  padding: 0;
  //margin: 0;
  list-style: none;
  }
li{
  float: left;
  //position: relative;
  width: 10em;
  }
li ul, #nav li ul li ul{
  display: none;
  position: absolute;
  //top: 1em;
  //left: 0;
  }
li > ul {
      //top: auto;
      //left: auto;
      }
li:hover ul, li.over ul { display: block; }                                          
</style>

I need an alertnate solution

when this is changed from this...
<ul id = "nav" >

to this...
<ul>

how should i modify the css marked in bold?

You can replace #nav with ul.

But you have to remember that if you do that, it will affect All ul's on your page/site, not just the nav. Why do you want to take #nav out of the code?

kozai: Why do you want to take #nav out of the code?

me:  you have already solved my problem when my code has id.
But i want to find out, if it is posible with elements that have no id.

kozai: You can replace #nav with ul.

me:
As i said, the code above is complete. When you copy and paste it to a a.htm file...
... and replace this...

li ul, #nav li ul li ul{
  display: none;
  position: absolute;
  //top: 1em;
  //left: 0;
  }

with this...

li ul, ul li ul li ul{
  display: none;
  position: absolute;
  //top: 1em;
  //left: 0;
  }

or this...

li ul, ul > li > ul > li > ul{
  display: none;
  position: absolute;
  //top: 1em;
  //left: 0;
  }

my menu do not work. display: none do not hide Orange, Apple, Banana, Mango, Pear.

You've made it generic. So now you need to target only the first level of ul's on hover

li:hover > ul, li.over ul { display: block; }

showing on hover is ok.

when i replace #nav with ul...
this one is not working...

display: none;

just make that change. it'll work like it's supposed to.

thank you.