css drop down menu, submenu

kublai_khan
kublai_khan used Ask the Experts™
on
on start , i want to hide orange apple banana mango banana pear.
i want them to show only when user hovers over fruits

the code is ...

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

Open in new window


i want to change it to something like this...

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

Open in new window


What is the correct css?


You can see the complete html below.

<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>
ul {
  padding: 0;
  //margin: 0;
  list-style: none;
  }
li{
  float: left;
  //position: relative;
  width: 10em;
  }
 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>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Data Scientist
Most Valuable Expert 2014
Commented:
This will target ONLY the uls at the level of your fruits:

             <ul>
                  <li><a>Orange</a></li>
                  <li>Apple</li>
                  <li>Banana</li>
                  <li>Mango</li>
                  <li>Pear</li>
            </ul>

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

Open in new window

Kim WalkerWeb Programmer/Technician
Commented:
And this will make the fruits appear when you hover over "fruits."

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

Open in new window

Author

Commented:
what if i remove the id...

<ul id = "nav" >

so it looks like this...

<ul>

... then what would be the css?
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
then replace #nav with ul

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

Open in new window


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

Author

Commented:
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?
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
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.

Author

Commented:
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

Author

Commented:
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>

Author

Commented:
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?
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
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?

Author

Commented:
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.
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
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; }

Author

Commented:
showing on hover is ok.

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

display: none;
Kyle HamiltonData Scientist
Most Valuable Expert 2014

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

Author

Commented:
thank you.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial