Avatar of kublai_khan
kublai_khan
 asked on

css drop down menu, submenu

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

HTMLCSS

Avatar of undefined
Last Comment
kublai_khan

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Kyle Hamilton

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
SOLUTION
Kim Walker

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
kublai_khan

ASKER
what if i remove the id...

<ul id = "nav" >

so it looks like this...

<ul>

... then what would be the css?
Kyle Hamilton

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.
kublai_khan

ASKER
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?
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Kyle Hamilton

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.
kublai_khan

ASKER
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
kublai_khan

ASKER
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>
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
kublai_khan

ASKER
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 Hamilton

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?
kublai_khan

ASKER
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.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Kyle Hamilton

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

ASKER
showing on hover is ok.

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

display: none;
Kyle Hamilton

just make that change. it'll work like it's supposed to.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
kublai_khan

ASKER
thank you.