Question

I’m making a navigation bar. Here’s the reference link

The problem is the style I’ve applied for Main Tabs is repeating for Sub Links as well. I’ve created separate class for the sub links(“nav2”). It works fine in Chrome & Mozilla Firefox, but not able to solve this issue in IE. Please Help, Its bit urgent.

Here’s my code

HTML:

<div id="menu">
<ul id="nav">
<li><a href="#">Tab1</a>
<ul id="nav2">
<li><a href="#">Menu 1 Submenu item 1</a></li>
<li><a href="#">Menu 1 Submenu item 2</a></li>
<li><a href="#">Menu 1 Submenu item 3</a></li>
</ul>
</li>

<li><a href="#">Tab2</a>
<ul id="nav2">
<li><a href="#">Sub Link for tab 2</a></li>
<li><a href="#">Some other link</a></li>
<li><a href="#">Some othe rlink</a></li>
</ul>
</li>

<li><a href="#">Tab3</a></li>
<li><a href="#">Tab4</a></li>

</li>
</ul>
</div>

Here’s the css

CSS:

#menu {
  width: 100%;
  height: 35px;
  clear: both;
}

ul#nav {
float: left;
width:100%;
margin: 0;
padding: 0;
list-style: none;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
}

ul#nav li {
 display: inline;
}

ul#nav li a {
  float: left;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
line-height: 35px;
color: #7e764c;
text-decoration: none;
text-shadow: 1px 1px #ffffff;
margin:0 4px 0 0;
padding: 0 15px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
background: #fff3b3;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffce9', endColorstr='#fff3b3');
background: -webkit-gradient(linear, 0 0, 0 70%, from(#fffce9), to(#fff3b3));
background: -moz-linear-gradient(#fffce9, #fff3b3 70%);
background: linear-gradient(#fffce9, #fff3b3 70%);
-pie-background: linear-gradient(#fffce9, #fff3b3 70%);
behavior: url(PIE.htc);
}

ul#nav .current a, ul#nav li:hover > a  {
color: #353535;
text-decoration: none;
text-shadow: 1px 1px #ffe8a1;
background: #fecf3a;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
 -moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px; 
}

ul#nav  ul {
display: none;
}

ul#nav2 li a {
background:none;
}

ul#nav li:hover > ul {
position: absolute;
display: block;
width: 100%;
height: 35px;
position: absolute;
margin: 35px 0 0 0;
background-color:#fecf3a;
border-bottom:1px solid #c3aa6f;
}

ul#nav li:hover > ul li {
float: left;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:normal;
line-height: 35px;
color: #86610b;
text-decoration: none;
margin: 0;
background:url(../img/line1.jpg) no-repeat right 15px;
}

ul#nav li:hover > ul li a {
float: left;
 font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:normal;
line-height: 35px;
color: #86610b;
text-decoration: none;
margin: 0;
background:url(../img/arrow-btm2.png) no-repeat center 28px;
}

ul#nav li:hover > ul li a:hover {
color: #86610b;
text-decoration: none;
text-shadow: none;
}

Thanks in Advance

Answer 1

First: You have not added a class to the submenus. You have added the id “nav2″ and ids should be unique. You should change this to class=”nav2” and use .nav2 instead of #nav2 in your css to target that.

There are two good ways to solve this.

1)

Create classes for the toplevel items. Something like:

<ul id="nav"> 
    <li class="navLevel1"><a href="#">Tab1</a> 

And then you change ul#nav li to .navLevel1 and ul#nav li a to .navLevel1 > a in your css.

2)

Change ul#nav li to #nav > li and #nav li a to #nav > li > a in your css

Note:
I used the child selector(>) which means you only select direct children of the element instead of descendants.