homepage Welcome to WebmasterWorld Guest from 54.205.197.66
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Problem with 'a' tags and selectors
Nesting <ul>s messes up selectors with 'a' tags
christripledot




msg:4353461
 2:03 pm on Aug 19, 2011 (gmt 0)

Hello,

I'm struggling with a nested navigation menu. I use
<a> tags for their hoverability with old versions of IE. Unfortunately when a second-level <ul> is a child of the anchor, it seems like it takes the <a> out of the tree used for CSS selectors.

Example:
nav>ul>li>a>ul doesn't target the inner <ul>.

However,
nav>ul>li>ul does. Odd, no? This poses a problem when it comes to styling the second-level menu, because if "nav>ul>li>a>ul" doesn't work, neither does "nav>ul>li>a:hover>ul". Of course if I remove the anchor from the selector altogether, I have no way of detecting hover.

This seems like a bug to me; I mean, the selector should work. Strange that this behaviour is consistent across Firefox, Safari and IE...

A stripped-down example is below (I know old IE versions don't support child selectors, but I'll save the class-hacking 'til last).

Any ideas people? Thanks for looking!

- Chris


<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8" />
<title>Nested Menus</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
}

nav ul {
list-style-type: none;
}

nav ul, nav li, nav a {
float: left;
}

nav li, nav a {
display: block;
}

nav li {
position: relative;
margin-right: 1em;
}

nav>ul>li>a:hover>span {
background: orange;
}

/* PROBLEM SELECTORS BELOW*/

nav>ul>li>a>ul {
position: absolute;
top: 20px;
background: transparent;
}

nav>ul>li>a:hover>ul>li>a {
background: green;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#"><span>Menu Item</span></a></li>
<li><a href="#"><span>Submenu</span><ul>
<li><a href="#"><span>Submenu Item</span></a></li>
<li><a href="#"><span>Submenu Item</span></a></li>
</ul></a></li>
</ul>
</nav>
</body>
</html>

 

christripledot




msg:4353465
 2:15 pm on Aug 19, 2011 (gmt 0)

Well, I realise how silly I've been - you can't nest 'a' elements, can you?

Anyone have any workarounds for nested menu hoverage in IE (no JS allowed!)

Paul_o_b




msg:4353471
 3:02 pm on Aug 19, 2011 (gmt 0)

IE6 only recognises hover on anchors and not on other elements while other browsers recognise hover on all elements, therefore you only need the Js for IE6. Google "suckerfish menus" for a small snippet of js to add this function for Ie6.

There are methods for making a dropdown menu work in IE6 without JS but they are either much too complicated or too hacky to be of much use. Stu Nichols at CSS play has examples of both but to be honest the best solution is still to add the small javascript fix for IE6 or the "whatever hover" htc file.

You can't use the child selector either if you want to support IE6 as it doesn't understand them.

christripledot




msg:4353477
 3:17 pm on Aug 19, 2011 (gmt 0)

Thanks Paul, I'll check out CSSplay.

I'm aware of child selector support (re-read my post), and 'Suckerfish', 'whatever:hover', etc. Unfortunately all JavaScript (including .HTC behaviours) has been expressly forbidden by my client.

Paul_o_b




msg:4353486
 3:41 pm on Aug 19, 2011 (gmt 0)

Ah sorry I missed the bit about the child selector :)

Here is an example of a dropdown that works in Ie6 without javascript and still uses valid code but stray one pixel from the method and you will break it.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Multi level - CSS Only Dropdown No javascript (not even for ie6)</title>
<style type="text/css">
* {margin:0;padding:0}/* for testing only */
h1, h2 {text-align:center;padding:5px 0}
h1 {font-size:140%}
h2 {font-size:120%}
ul {list-style:none}
.outer {
width:601px;
margin:auto;
position:relative;
}
.header {
width:601px;
position:relative;
z-index:3;
}

/* menu styles */
#navigation {
position:relative;
height:25px;
background:#ccc;
z-index:2;
margin:0 0 10px;
}
.nav {position:absolute;}
.nav .link {
width:150px;
margin-top:-9999px;
float:left;
}
.nav a {
display:block;
height:23px;
line-height:23px;
text-decoration:none;
padding:0 5px;
color:#000;
border:1px solid #000;
margin-bottom:-1px;
width:138px;
}
.nav .sub a {
background:#ddd;
margin-right:-1px;
position:relative;
}
.nav .sub {
float:left;
background:#000;
padding-top:23px;
margin-top:-23px;
}
.nav a.main {
position:relative;
margin-top:9999px;
margin-right:-149px;
float:left;
color:#fff;
font-weight:bold;
}
.nav .sub a.main {background:#000}
.nav a:hover, .nav a:focus, .nav a:active {
margin-right:0;
background:#000;
}
.nav a:hover{color:#fff;}

/*Multi-level code*/
.sub:hover {clear:both;}
.link .link {position:absolute;z-index:99;height:25px;}
.link .link a.main{margin-top:9974px!important}
.link .link .sub{position:relative;left:149px;top:3px;padding-top:0;background:transparent;}
.pre-sub{padding-bottom:25px!important}
/*end*/
</style>
<!--[if lte IE 6]>
<style type="text/css">
.nav li{zoom:1.0}
/* ie6 multi-level code */
.link .link {position:static;}
.link .link .sub {margin-bottom:-999em;}
.link .link {margin-right:-1px}
.link .link a:hover {margin-right:1px}
.link .link .link a:hover {margin-right:2px}
</style>
<![endif]-->
</head>
<body>
<div class="outer">
<div class="header">
<h1>Drop down in IE6 with no javascript</h1>

<h2>Based on an idea and code by Timo Huovinen </a>) &copy; 2009</h2>
</div>
<div id="navigation">
<ul class="nav">
<li class="link"> <a class="main" href="#">Main</a>

<ul class="sub">
<li><a href="#">test1</a></li>
<li class="pre-sub"><a href="#">test2</a></li>
<li class="link"> <a class="main" href="#">Sub menu &raquo;</a>
<ul class="sub">
<li><a href="#">sub test1</a></li>

<li><a href="#">sub test2</a></li>
<li class="pre-sub"><a href="#">test2</a></li>
<li class="link"> <a class="main" href="#">Sub menu &raquo;</a>
<ul class="sub">
<li><a href="#">sub test1</a></li>
<li><a href="#">sub test2</a></li>

<li><a href="#">sub test3</a></li>
<li><a href="#">sub test4</a></li>
</ul>
</li>
<li><a href="#">sub test3</a></li>
<li><a href="#">sub test4</a></li>
<li class="pre-sub"><a href="#">test2</a></li>

<li class="link"> <a class="main" href="#">Sub menu &raquo;</a>
<ul class="sub">
<li><a href="#">sub test1</a></li>
<li><a href="#">sub test2</a></li>
<li><a href="#">sub test3</a></li>
<li><a href="#">sub test4</a></li>

</ul>
</li>
<li><a href="#">sub test5</a></li>
<li><a href="#">sub test6</a></li>
</ul>
</li>
<li><a href="#">test3</a></li>

<li><a href="#">test4</a></li>
</ul>
</li>
<li class="link"> <a class="main" href="#">Main</a>
<ul class="sub">
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>

<li><a href="#">test3</a></li>
<li><a href="#">test4</a></li>
</ul>
</li>
<li class="link"> <a class="main" href="#">Main</a>
<ul class="sub">
<li><a href="#">test1</a></li>

<li class="pre-sub"><a href="#">test2</a></li>
<li class="link"> <a class="main" href="#">Sub menu &raquo;</a>
<ul class="sub">
<li><a href="#">sub test1</a></li>
<li><a href="#">sub test2</a></li>
<li class="pre-sub"><a href="#">test2</a></li>

<li class="link"> <a class="main" href="#">Sub menu &raquo;</a>
<ul class="sub">
<li><a href="#">sub test1</a></li>
<li><a href="#">sub test2</a></li>
<li><a href="#">sub test3</a></li>
<li><a href="#">sub test4</a></li>

</ul>
</li>
<li><a href="#">sub test3</a></li>
<li><a href="#">sub test4</a></li>
<li class="pre-sub"><a href="#">test2</a></li>
<li class="link"> <a class="main" href="#">Sub menu &raquo;</a>

<ul class="sub">
<li><a href="#">sub test1</a></li>
<li><a href="#">sub test2</a></li>
<li><a href="#">sub test3</a></li>
<li><a href="#">sub test4</a></li>
</ul>
</li>

<li><a href="#">sub test5</a></li>
<li><a href="#">sub test6</a></li>
</ul>
</li>
<li><a href="#">test3</a></li>
<li><a href="#">test4</a></li>
</ul>

</li>
<li class="link"> <a class="main" href="#">Main</a>
<ul class="sub">
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">test3</a></li>

<li><a href="#">test4</a></li>
</ul>
</li>
</ul>
</div>
<p>This is the following content : <a href="http://www.google.com">google</a> This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : </p>

</div>
</body>
</html>


Fotiman




msg:4353503
 5:01 pm on Aug 19, 2011 (gmt 0)

Another thing to consider... do you NEED to support IE6? I'd say we're on the verge of not having to support it any more, so it really depends on the what your customer wants. Personally, I probably wouldn't go out of my way to support IE6.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved