first-child is not working properly in my css code - css

Question

I have a problem using first-child
I have the following html code to make a menu with first and second levels
<ul id="navMenu" >
<li class="parent">Home
</li>
<li class="parent">Products
<ul ><li>Software
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</li>
<li>Hardware
<ul>
<li>Product 1</li>
<li>Product 2</li>
</ul>
</li>
</ul>
</li>
</ul>
and the following css
#menuContainer{
float: right;
}
ul#navMenu{
margin: 25px 0 0;
list-style: none outside none;
}
ul#navMenu li{
float: left;
margin: 0 0 0 0px;
position: relative;
z-index: 999;
}
ul#navMenu li a{
display: block;
padding: 5px 0px;
font-size: 13px;
line-height: 12px;
background: transparent;
color: #444;
-webkit-transition: background-color 0.1s linear, color 0.1s linear;
-moz-transition: background-color 0.1s linear, color 0.1s linear;
}
ul#navMenu li.parent a{
padding-right: 23px;
background-color: transparent;
background-repeat: no-repeat;
background-position: right top;
font-family: "Lucida Grande", Tahoma, Arial, sans-serif;
text-transform: uppercase;
}
ul#navMenu li a:hover, ul#navMenu li.current a{
color: #CB0167 ;
text-decoration: none;
font-family: "Lucida Grande", Tahoma, Arial, sans-serif;
}
ul#navMenu li.parent a:hover, ul#navMenu li.current.parent a{
background-position: right bottom;
}
/* - -- --- ---- Sub-Menu ---- --- -- - */
ul#navMenu li.parent ul{
display: none;
position: absolute;
top: 25px;
left: 0;
width: 160px;
margin: 0;
padding: 0px 0 0;
list-style: none outside none;
overflow: visible;
z-index: 99;
border-top: 1px solid #eee;
}
.noJs ul#navMenu li.parent:hover ul{
display: block;
}
ul#navMenu li.parent ul li{
float: none;
margin: 0;
padding: 0;
}
ul#navMenu li.parent ul li a{
display: block;
padding: 7px 10px;
color: #444;
background: #fff;
font-size: 11px;
border-right: 1px solid #eee;
border-left: 1px solid #eee;
text-transform: none;
background-image: url('../img/dots_menu.png');
background-repeat: no-repeat;
}
ul#navMenu li.parent ul li:first-child a{
background-image: none;
}
ul#navMenu li.parent ul li:first-child a:hover{
background-image: none;
}
ul#navMenu li.parent ul li:last-child a{
box-shadow: 0 1px 0 rgba(0,0,0,0.05);
border-bottom: 1px solid #eee;
}
ul#navMenu li.parent ul li a:hover{
color: #CB0167 !important;
background: #fefefe;
background-image: url('../img/dots_menu.png');
background-repeat: no-repeat;
}
/* - -- --- ---- Second Level Sub-Menu ---- --- -- - */
ul#navMenu li.parent ul li ul{
display: none;
position: absolute;
top: -1px;
left: 159px;
width: 160px;
margin: 0;
padding: 0 0 0 0px;
border-top: 1px solid #eee;
}
ul#navMenu li.parent ul li ul.leftMenu{
left: -168px;
padding: 0 10px 0 0;
}
.noJs ul#navMenu li.parent:hover ul li ul{
display: none;
}
.noJs ul#navMenu li.parent ul li:hover ul{
display: block;
}
ul#navMenu li.parent ul li ul li:first-child a{
background-image: none;
}
ul#navMenu li.parent ul li ul li:first-child a:hover{
background-image: none;
}
The menu product is exactly what I need , and the hardware menu , but the software menu is not working , any idea how to fix it ??
Thanks a lot :)

Answer 1

using the > you can prevent the style affect the grandchild's , so try to change this
ul#navMenu li.parent ul li:first-child a{
to this
ul#navMenu li.parent ul li:first-child > a{
also
ul#navMenu li.parent ul li:first-child a:hover{
with this
ul#navMenu li.parent ul li:first-child > a:hover{

Answer 2

your code is too messed up... you can replicate the same without <ul> and <li>.. here's a small snippet of your menu of home/products .. home you find your solution here..
http://jsfiddle.net/NMrMN/
You can apply the necessary css yo your specific needs.. but,using div's to achieve this would give you more freedom on how to place the elements on the page.. so,this is my solution to what i think is your problem..