1. Home
  2. Forums Index
  3. Browser Side / CSS 1:09 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Problem with 'a' tags and selectors

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

         

christripledot

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

10+ Year Member



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

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

10+ Year Member



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

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

10+ Year Member



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

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

10+ Year Member



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

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

10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 1:09 pm May 1, 2026