Same style repeating for sublinks

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

Answers


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.


Need Your Help

Changing file encoding from UTF-8 to ANSI

php encoding

I am creating an xml and .blm file from one set of data, I am taking text data in iso-8859-1 and converting it to UTF-8 using

SQL recursive CTE query, odd results set SQL Server 2005

sql sql-server-2005 common-table-expression

I am trying to write a recursive CTE query in SQL Server 2005 but am getting an odd set of results. My table is:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.