Block did not work

HTML & CSS
1

Hi i need some help on my menu it will not show the drop down list…

menu.css



.nav{
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 200px;
  text-transform: uppercase;
}

.nav  li{
  border-left: 10px solid blue;
  border-bottom: 1px solid red;
}

.nav li a:link,
.nav li a:visited{
  text-decoration: none;
  padding: 0.5em;
  display: block;
  background-color: yellow;
  border-left: 5px solid rgb(239,213,252);
  
}

.nav li a:hover{
  background-color: blue;
  color: #FFF;
  border-left: 5px solid green;

}

.nav ul{
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.nav ul li{
  border: 0;
  display: none;
}


.nav ul li a:link,
.nav ul li a:visited{
  background-color: orange;
  color: #FFF;
  padding: 0.5em 0.5em 0.5em 1em;
  display: block;
  text-decoration: none;
  border-left: 5px solid rgb(239,213,252);

}


.nav  li a:hover ul li {
   display: block; // I think this is my problem it will not work
}

my page



<!Doctype html>

<html lang="en">
<head>
 <meta charset="utf-8" />
 
 <link rel="stylesheet" href="menu.css" style="text/css"/>
 
</head>

 <body>
    <ul class="nav">
       <li><a href="#">T-shirt</a>
	       <ul>
		       <li><a href="#">small</a></li>
			   <li><a href="#">medium</a></li>
			   <li><a href="#">large</a></li>
	       </ul>
	   </li>
	   <li><a href="#">Brand</a></li>
	   <li><a href="#">What's new</a></li>

    </ul>	

   
 <body>



</html>
2

Your anchor element is a child of the <li> element there for it can’t trigger a hover state for the <ul> element because they are both children of the same parent, for the above to work you need to set the :hover event on the <li> element instead as that is the parent that every child element will attach itself to.

3

Yes, as Chris said, the last rule needs to be changed to

.nav li:hover ul li {
   display: block;
}

Before, the rule said make the <ul> that is inside the <a> display: block, but the <ul> isn’t inside the <a>, but it is inside the <li>. :slight_smile:

4

Thank you chris for explaining me and also to ralph for helping me to enlighten my mind, it’s working i tried your codes.

also one thing i also modify like this


.nav  li:hover li {
   display: block;
}

and it’s working also but i don’t know if this is the right way.

so i will just follow what have you shared to me.thank you so much.

5

Yes, that’s fine. The “ul” bit was redundant. Well spotted! :slight_smile:

6

Yes, that’s fine. The “ul” bit was redundant. Well spotted!

Wow, Thank you ralph…I thought i was wrong:)

7

CSS is pretty logical in this way. .nav li:hover li means specifically this: "apply these styles to a LI that’s inside another LI that’s inside an element with the class ‘nav’ ". It doesn’t matter if there are any elements in between those elements. :slight_smile:

8

Hi ralph and chris, i will modify this menu i am going to make a horizontal dropdown,and i will post if i get trouble.Thank you in advance.

9

Here is a nice example by Paul:

http://www.pmob.co.uk/temp/dropdown_horizontal2.htm

10

Thank you for this link,…Okay i will read this first.:slight_smile:

11

It’s just a simple example, but a nice one to start with. There’s nothing to read, but if you view the source code, you’ll all the code involved. :slight_smile:

12

it’s an example of menu i thought it’s a tutorial. :slight_smile:

13

but if you view the source code, you’ll all the code involved.

i will just make my own code first so that i can try to code like this after it i will try to see how paul did it. :slight_smile:

14

As I said, just look at the code, and it’s all the tutorial you need. :slight_smile:

15

Hi ralph, is there a tweak that can only the first letter to be uppercase?

i use this

.nav li a:first-letter{
text-transform: uppercase;

}

but it will not capital the firs letter

16

i got it now

.nav li:first-letter{
text-transform: uppercase;

}

it’s working now.

17

First-letter only works on block elements and similar:

So you could either try changing it to

.nav li:first-letter{
  text-transform: uppercase;
}

or just wrap the first letter in a span and do this:

.nav li a span{
  text-transform: uppercase;
}

That option works in more browsers, too. :slight_smile:

18

Thanks ralph :slight_smile:

19

Hi ralph, how did paul do that when we hover to “About” the background will be red and then if we go down to sub item list the background will change to red?how can i achieve that. I inspect the code but i am confuse.can you please help me.

20

It’s this bit here (you can see Paul even commented in his code):

[COLOR="#FF0000"]/* this sets all hovered lists to red */[/COLOR]
#nav li:hover a,#nav  li.over a,
#nav li:hover li a:hover,#nav li.over li a:hover {
   color: #fff;
   background-color: red;
}