jemz
September 12, 2012, 7:02pm
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>
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.
ralphm
September 13, 2012, 1:36am
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>.
jemz
September 13, 2012, 7:21am
4
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>.
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.
ralphm
September 13, 2012, 7:38am
5
Yes, that’s fine. The “ul” bit was redundant. Well spotted!
jemz
September 13, 2012, 7:40am
6
Yes, that’s fine. The “ul” bit was redundant. Well spotted!
Wow, Thank you ralph…I thought i was wrong:)
ralphm
September 13, 2012, 7:44am
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.
jemz
September 13, 2012, 7:44am
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.
ralphm
September 13, 2012, 7:46am
9
jemz
September 13, 2012, 7:51am
10
Thank you for this link,…Okay i will read this first.
ralphm
September 13, 2012, 7:52am
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.
jemz
September 13, 2012, 7:54am
12
it’s an example of menu i thought it’s a tutorial.
jemz
September 13, 2012, 7:57am
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.
ralphm
September 13, 2012, 7:57am
14
As I said, just look at the code, and it’s all the tutorial you need.
jemz
September 13, 2012, 8:12am
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
ralphm
September 13, 2012, 8:15am
17
First-letter only works on block elements and similar:
The CSS Pseudo-elements Module Level 4 specification clarifies behavior for existing pseudo-elements and defines several new ones. Only a few, however, have any degree of support in current browsers. Those are the ones we’ll talk about in this...
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.
jemz
September 13, 2012, 3:58pm
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.
ralphm
September 14, 2012, 12:16am
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;
}