4 replies [Last post]
jesrig
jesrig's picture
Offline
newbie
Last seen: 8 years 7 weeks ago
Timezone: GMT-4
Joined: 2010-07-25
Posts: 3
Points: 4

I made a nice pull down menu from a site called PureCssMenu.com. It worked out very nice and even worked around some bugs found in IE6, but I am going through the code to figure out exactly what everything is doing.
There is something that is stumping me:
Here is some code

ul.pureCssMenu li:hover>a{
background-color:#4792E6;
border-color:#665500;
border-style:solid;
font:normal 10px Verdana;
color: #ffffff;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#4792E6;
border-color:#665500;
border-style:solid;
font:normal 10px Verdana;
color: #ffffff;
text-decoration:none;
}

This code is responsible for making the menu options light up when you hover over them. Its part of a larger code which creates a pull down menu by using an unordered list. The second paragraph is not really necessary, it is only there to make everything work for IE6.

My question is as follows: How exactly is the child class working? I tried taking out the child selector (">") and just having a descendent selector, and now every single descendent in the pull down lights up blue when you hover over an option. BUT, when you put the child selector back, it all works. Only the parent ul's and the present ul which you are hovering over light up, like in any normal pull down.
Why does this happen? I thought that "child selector" means "any direct child"! So, shouldn't all of the pull down's options be lite up too? Doesn't li:hover>a mean - any a tag which is a child of an li tag which is being hovered over?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 5 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

jesrig wrote:Doesn't

jesrig wrote:

Doesn't li:hover>a mean - any a tag which is a child of an li tag which is being hovered over?

Yes, but it only applies to the current LI being hovered over. (I think Tongue). Think about it - if you just had an empty page, with three links on, and the hover effect was to make them bold, then you wouldn't expect every link to go bold when you hovered over one, would you?

The child selector is doing what it's supposed to - whenever you hover over a li, IT'S child element - not EVERY child element of every OTHER li - is getting the styles applied to it.

Hope that made sense Laughing out loud

/edit

I think I may have misread the question. Do you mean when you hover over a parent item, why don't ALL the drop-down items light up?

Verschwindende wrote:
  • CSS doesn't make pies

jesrig
jesrig's picture
Offline
newbie
Last seen: 8 years 7 weeks ago
Timezone: GMT-4
Joined: 2010-07-25
Posts: 3
Points: 4

clarification

Yes, you are right, you only look at the children of that li tag. I wasn't really questioning that. But, I understand now why taking out the child selector (>) made a difference: there really IS only one "a" tag which is a child. In my code, to make a pull down menu (or even a second or third pull down level), you nest another "ul" tag (which contains more li tags, each containing an a tag) inside that li tag. Thus, we only have one immediate "a" child per li. What my mistake was that for some reason, I was assuming that I was looking for a "a" child of this li, OR any other descendent from THIS li which had a child "a" tag (which would be all of the pull down tags!)

But what I am really still wondering about is this: this pull down menu has the feature that when you scroll your mouse down the menu, while each entry lights up the main menu option that has been extended down stays lit up too. (this is a standard menu bar feature.) How is this happening? When you pull your mouse down the list (which is really a nested "ul" within this main li tag), are you really still considered to be hovering over the original option in the menu bar even though the cursor is no where near it? The first paragraph of my code seems to be doing this...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 3 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

'>' is in effect the

'>' is in effect the immediate child of the parent, removing the child selector and leaving a space describes another type of selector known as a descendent selector which says any element as long as it has - at some point - a parent as named so the descendent element may be nested at any depth under a named parent with any number of other parent elements.

CSS does not and cannot traverse back up the DOM so highlighting the original top anchor has to be achieved through JavaScript usually, jQuery makes this trivial as it uses Xpath which allows it to 'look' back up the nodes of a document, I don't know if this is the approach that that menu uses as I'm not familiar with it.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jesrig
jesrig's picture
Offline
newbie
Last seen: 8 years 7 weeks ago
Timezone: GMT-4
Joined: 2010-07-25
Posts: 3
Points: 4

Nope, this was specifically a

Nope, this was specifically a pure css menu. It very well could be, though, that something else is creating this highlighting figure (as I described above). As I mentioned, I didn't write this code, I am just using it and disecting it to understand it. So, could you take a look at the entire .css file and see what might make the parent stay lite when its child is lit?

/* this stylesheet uses a ordered list to create a pull down menu.
   It includes a "a href" in every list item (<li>) so that the list
   works with internet explorer, which only applies the :hover pseudo-class
   to "a href" and no other tags.
*/ 
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:0px;top:98%;}	/*I changed this from left:-1px*/
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}	  /*this and the line above are overridden for IE6 in the html code */
 
ul.pureCssMenu,ul.pureCssMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 2px 2px 0px;
	background-color:#ffffff;
	/*background-repeat:repeat;*/
	border-color:#AAAAAA;
	border-width:1px;
	border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}
ul.pureCssMenu {
	display:block;
	zoom:1;
	float: left;
}
ul.pureCssMenu ul{
	width:165.65px;		/*size of all pulldowns, second and third level*/
}
ul.pureCssMenu li{
	display:block;
	margin:2px 0px 0px 2px;
	font-size:0px;		
	line-height:0px;
}
/*ul.pureCssMenu a:active, ul.pureCssMenu a:focus {	
outline-style:none;				
}*/			/*this is the default*/
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
	display:block;
	vertical-align:middle;
	background-color:#ffffff;
	border-width:0px;
	/*border-color:#6655ff;*/
	border-style:solid;
	text-align:left;
	text-decoration:none;
	padding:4px;
	/*_padding-left:0;*/
	font:normal 10px Verdana;
	color: #444444;
	text-decoration:none;
	cursor:default;
}
ul.pureCssMenu span{
	overflow:hidden;
}
ul.pureCssMenu li {
	float:left;
}
ul.pureCssMenu ul li {
	float:none;
}
ul.pureCssMenu ul a {
	text-align:left;
	white-space:normal;
}
ul.pureCssMenu li.sep{
	text-align:center;
	padding:0px;
	line-height:0;
	height:100%;
}
ul.pureCssMenu li.sep span{
	float:none;	
	padding-right:0;
	width:5;
	height:16;
	display:inline-block;
	background-color:#AAAAAA;	
	background-image:none;}
ul.pureCssMenu ul li.sep span{
	width:80%;
	height:3;
}
ul.pureCssMenu li:hover{
	position:relative;
}
ul.pureCssMenu li:hover>a{
	background-color:#4792E6;
	border-color:#665500;
	border-style:solid;
	font:normal 10px Verdana;
	color: #ffffff;
	text-decoration:none;
}
ul.pureCssMenu li a:hover{	/*this is needed for IE6. Without it, the menu doesn't show*/		
	position:relative;		/*this is because IE6 doesn't recognize the pseudo-class :hover*/
	background-color:#4792E6;	/*on anything but an <a> tag, and also doesn't recognize child classes*/
	border-color:#665500;
	border-style:solid;
	font:normal 10px Verdana;
	color: #ffffff;
	text-decoration:none;
}
ul.pureCssMenu li.dis a {
	color: #AAAAAA !important;
}
 
/*****************Now to display the pull downs************/
ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover ul{display:block}
ul.pureCssMenu a:hover ul ul,ul.pureCssMenu a:hover a:hover ul ul{display:none}
 
/*****************Now for the images***********************/
ul.pureCssMenu span{
	display:block;
	background-image:url(../images/arrv_anim_1.gif);
	background-position:right center;
	background-repeat: no-repeat;
   padding-right:11px;}
ul.pureCssMenu li:hover>a>span {background-image:url(../images/arrv_anim_1o.gif);}
ul.pureCssMenu a:hover span {background-image:url(../images/arrv_anim_1o.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(../images/arr_double_1.gif)}
ul.pureCssMenu ul li:hover > a span {background-image:url(../images/arr_double_1o.gif);}
/*****Needed for IE6*******/
ul.pureCssMenu table a:hover span,ul.pureCssMenu table a:hover a:hover span,ul.pureCssMenu table a:hover a:hover a:hover span{background-image:url(../images/arr_double_1o.gif)}
ul.pureCssMenu table a:hover table span,ul.pureCssMenu table a:hover a:hover table span{background-image:url(../images/arr_double_1.gif)}

The way they set up the html file was: