block did not work

**jemz** · Sep 12, 2012 12:02

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

menu.css

Code:

.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

Code:

<!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>

**chris.upjohn** · Sep 12, 2012 16:45

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.

**ralph.m** · Sep 12, 2012 18:36

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

Code:

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

**jemz** · Sep 13, 2012 00:21

Originally Posted by ralph.m

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

Code:

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

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

Code:

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

**ralph.m** · Sep 13, 2012 00:38

Originally Posted by jemz

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

Yes, that's fine. The "ul" bit was redundant. Well spotted!

**jemz** · Sep 13, 2012 00:40

Yes, that's fine. The "ul" bit was redundant. Well spotted!

Wow, Thank you ralph...I thought i was wrong

**ralph.m** · Sep 13, 2012 00:44

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.

**jemz** · Sep 13, 2012 00:44

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.

**ralph.m** · Sep 13, 2012 00:46

Here is a nice example by Paul:

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

**jemz** · Sep 13, 2012 00:51

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

**ralph.m** · Sep 13, 2012 00:52

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.

**jemz** · Sep 13, 2012 00:54

it's an example of menu i thought it's a tutorial.

**jemz** · Sep 13, 2012 00:57

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.

**ralph.m** · Sep 13, 2012 00:57

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

**jemz** · Sep 13, 2012 01:12

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

**jemz** · Sep 13, 2012 01:13

i got it now

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

}

it's working now.

**ralph.m** · Sep 13, 2012 01:15

First-letter only works on block elements and similar:

http://reference.sitepoint.com/css/p...nt-firstletter

So you could either try changing it to

Code:

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

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

Code:

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

That option works in more browsers, too.

**jemz** · Sep 13, 2012 01:23

Thanks ralph

**jemz** · Sep 13, 2012 08:58

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.

**ralph.m** · Sep 13, 2012 17:16

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

Code:

/* this sets all hovered lists to red */
#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;
}

**jemz** · Sep 13, 2012 21:06

Originally Posted by ralph.m

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

Code:

/* this sets all hovered lists to red */
#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;
}

Yup i saw that, but he uses the script .over?..i was confused in the script.

**ralph.m** · Sep 13, 2012 22:55

Originally Posted by jemz

Yup i saw that, but he uses the script .over?..i was confused in the script.

Yeah, that's just for IE6, I think, which had problems with hovering on elements other than <a>. But IE6 is dead now, so don't worry about it.

**jemz** · Sep 13, 2012 23:02

Originally Posted by ralph.m

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

Code:

/* this sets all hovered lists to red */
#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;
}

Hi ralph, I got it now take a look at i did not use script...i can hover and put background color.

please correct me if i am wrong...

Code:

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

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



.nav > li{
   float: left;
   margin-right: 0.1em;
   min-width: 8em;
   text-align: center;
   background-color: red;
   
}

.nav li a:link,
.nav li a:visited{
  text-decoration: none;
 
}

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

.nav li ul li{
  display: none;
 
}


.nav li:hover li{
  display: block;  
  padding: 0.5em;
  background-color: yellow;
  color: #FFF; 
}

.nav li:hover,
.nav ul li:hover {
  background-color: violet;
  display: block;
}

**ralph.m** · Sep 13, 2012 23:02

Are you using the same HTML as Paul? If you've changed it at all, post that too.

**jemz** · Sep 13, 2012 23:11

Originally Posted by ralph.m

Are you using the same HTML as Paul? If you've changed it at all, post that too.

This is my HTML sorry i forgot to post,..i got problem i tested it I.E 8 but my css did not work at all.what lacking on this Ralph?

Code:

<!Doctype html>

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

 <body>
    <ul class="nav">
       <li><a href="#">home</a></li>
	   <li><a href="#">about</a>
	       <ul>
		       <li><a href="#">how</a></li>
			   <li><a href="#">where</a></li>
			   <li><a href="#">when</a></li>
	       </ul>
	   </li>
	   <li><a href="#">services</a></li>

    </ul>	

   
 <body>



</html>

User Tag List

Thread: block did not work

Thread Tools

Display

block did not work

Bookmarks

Bookmarks

Posting Permissions