title: Same style repeating for sublinks
body: <p>I'm making a navigation bar. <a href="http://www.htmldrive.net/items/show/437/CSS3-only-horizontal-drop-line-tab-menu" rel="nofollow">Here's the reference link</a></p>
  
  <p>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 &amp; Mozilla Firefox, but not able to solve this issue in IE. Please Help, Its bit urgent.</p>
  
  <p>Here's my code</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="menu"&gt;
  &lt;ul id="nav"&gt;
  &lt;li&gt;&lt;a href="#"&gt;Tab1&lt;/a&gt;
  &lt;ul id="nav2"&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu 1 Submenu item 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu 1 Submenu item 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu 1 Submenu item 3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  
  &lt;li&gt;&lt;a href="#"&gt;Tab2&lt;/a&gt;
  &lt;ul id="nav2"&gt;
  &lt;li&gt;&lt;a href="#"&gt;Sub Link for tab 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Some other link&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Some othe rlink&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  
  &lt;li&gt;&lt;a href="#"&gt;Tab3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Tab4&lt;/a&gt;&lt;/li&gt;
  
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the css</p>
  
  <p>CSS:</p>
  
  <pre><code>#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 &gt; 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 &gt; 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 &gt; 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 &gt; 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 &gt; ul li a:hover {
  color: #86610b;
  text-decoration: none;
  text-shadow: none;
  }
  </code></pre>
  
  <p>Thanks in Advance</p>