CSS Menu Layout in Sub-List Parent - html

Question

I have been using my free time to improve my HTML knowledge during my holiday.
During the time I was designing a CSS Menu. I face some problem and don't know how to solve them.
I tried to search from Google. Because of my poor English, I was unable to find a solution, so I seek help here.
Problem:
I tried to design a CSS Menu with Expandable sub-menu.
Why doesn't the sub-menu's parent list change?
As you can see from the screenshot. The Product menu is different with others.
Is there any solution?
ScreenShot
Due to my reputation I can't provide a screenshot, so I'll provide a link:
http://i151.photobucket.com/albums/s155/HongJaiz/CSSMenu.jpg
CSS3 Coding
body{
position: relative;
height: 100%;
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));
}
.navbox {
position: relative;
float: left;
}
ul#expList {
list-style: none;
display: block;
width: 200px;
position: relative;
padding: 60px 0 60px 0;
background: url(shad2.png) no-repeat;
-webkit-background-size: 50% 100%;
}
li#expList {
list-style: none;
display: block;
width: 200px;
position: relative;
padding: 60px 0 60px 0;
background: url(shad2.png) no-repeat;
-webkit-background-size: 50% 100%;
}
ul li {
list-style: none;
}
li {
margin: 5px 0 0 0;
}
ul#expList li a {
-webkit-transition: all 0.3s ease-out;
background: #cbcbcb url(border.png) no-repeat;
color: #174867;
padding: 7px 15px 7px 15px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
width: 100px;
display: block;
text-decoration: none;
-webkit-box-shadow: 2px 2px 4px #888;
}
ul#expList li a:hover {
background: #ebebeb url(border.png) no-repeat;
color: #67a5cd;
padding: 7px 15px 7px 30px;
}
HTML Coding
<ul id="expList">
<li class="home">Home</li>
<li class="freebies">Product
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</li>
<li class="about">Register</li>
<li class="about">About Us</li>
</ul>

Answer 1

just coz you have given style to <a></a> of <li></li> and in case of parent of submenu i.e Product you haven't wrapped it in <a></a> tag, doing so will solve your problem
<ul id="expList">
<li class="home">Home</li>
<li class="freebies"><a>Product</a>
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</li>
<li class="about">Register</li>
<li class="about">About Us</li>
</ul>