css and html drop down menu - html

Question

hey i was learning how to use the drop down menu with css, but i faced two problems:
The length of my first drop down menu changes, even though i kept playing with their percentages.
I am not able to bring my second drop down menu, i guess i don't know how to call the second drop down menu in css even though i gave it a different class name.
Here is the HTML code just for the drop down menu:
<div class="list">
<ul class="style">
<li class="international">International
<ul class="sub1">
<li class> Top 10</li>
<li> All</li>
</ul>
</li>
<li class="pop">Pop
<ul class="sub1" >
<li> Top 10</li>
<li> All</li>
</ul>
</li>
<li class="electronic">Electronic
<ul class="sub1">
<li> Top 10</li>
<li> All
<ul class="sub2">
<li> English</li>
<li> European</li>
<li> International</li>
</ul>
</li>
</ul>
</li>
</div>
and here is the CSS code:
div ul li {
display:inline-block;
background-color:#B2B28F;
float:right;
text-align: center;
width: 22%;
position: relative;
z-index: 1;
bottom: 19px;
padding-top: 5px;
font-size: 18px;
padding-bottom: 3px;
font-weight: bold;
font-family: harrington;
margin-right: 12px;
border-bottom:5px;
margin-bottom: 10px;
text-align: center;
margin-top: 2px;
}
div ul li a {
display: block;
height: 30px;
text-align: center;
border-bottom:5px;
position: relative;
font-size: 20;
z-index: 1;
margin-top: 2px;
}
.sub1 li {
display: none;
position:relative;
width:100%;
height: 20px;
margin-bottom:-8px;
margin-top:12px ;
float: right;
font-size: 17;
margin-right: 4px;
padding: 2px;
text-align: center;
left:-20px;
}
.sub1 li a {
text-align: left;
margin-right: 15px;
}
.sub2 li {
position: relative;
left: 15px;
top: -30px;
width: 100%;
text-align: left;
margin-top: -3px;
margin-bottom: 4px;
display: none;
float: left;
}
div ul li:hover ul li{
display: block;
position: absolute;
top: 27px;
float: left;
width: 97%;
left: 0px;
height: 23px;
border-top: 5px;
text-align: center;
}
div ul li :hover ul li ul li {
display: block;
position: absolute;
text-align: center;
}
a:link {
text-decoration: none;
}
a:visited {
color:#520029;
}
a:hover {
color: #293D66;
}
also any comments on how i did would be appreciated!

Answer 1

Hope you like this..
Just made some changes on your html and css.
HTML:
<div class="nav">
<ul>
<li>International
<ul>
<li> Top 10</li>
<li> All</li>
</ul>
</li>
<li>Pop
<ul>
<li> Top 10</li>
<li> All</li>
</ul>
</li>
<li>Electronic
<ul>
<li> Top 10</li>
<li> All
<ul>
<li> English</li>
<li> European</li>
<li> International</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS:
.nav {
margin: 50px auto;
text-align: center;
}
.nav ul ul {
display: none;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul {
background: #C0C0C0;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
}
.nav ul:after {
content: ""; clear: both; display: block;
}
.nav ul li {
float: left;
}
.nav ul li:hover {
background: #4b545f;
}
.nav ul li:hover a {
color: #fff;
}
.nav ul li a {
display: block; padding: 10px 20px;
color: #757575; text-decoration: none;
}
.nav ul ul {
background: #5f6975; padding: 0;
position: absolute; top: 100%;
}
.nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a; position: relative;
}
.nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
.nav ul ul li a:hover {
background: #4b545f;
}
.nav ul ul ul {
position: absolute; left: 100%; top:0;
}
Also Here is the fiddle, Check this working here

Answer 2

I would recommend not using absolute positioning and floats to elements that don't need it..
regarding your second sub, I got it working in this example..
div > ul > li {
display:inline-block;
background-color:#B2B28F;
float:right;
text-align: center;
width: 22%;
position: relative;
z-index: 1;
bottom: 19px;
padding-top: 5px;
font-size: 18px;
padding-bottom: 3px;
font-weight: bold;
font-family: harrington;
margin-right: 12px;
border-bottom:5px;
margin-bottom: 10px;
text-align: center;
margin-top: 2px;
}
div ul li a {
display: block;
text-align: center;
padding:5px 0;
position: relative;
font-size: 20px;
z-index: 1;
color:#212121;
padding-left:10px; box-sizing:border-box;
}
ul { padding:0;}
ul li { list-style:none;}
.sub1 { display:none; width:100%;}
.sub1 li {
position:relative;
width:100%;
clear:both;
font-size: 17px;
text-align: center;
}
.sub1 li a {
text-align: left;
}
.sub2 { display:none; position: relative; background:#B2B28F;}
.sub2 li {
width: 100%;
text-align: left;
margin-bottom: 4px;
padding-left:20px;
box-sizing:border-box;
}
.sub2 li a { font-size:14px;}
div ul li:hover ul li{
width: 100%;
left: 0px;
border-top: 5px solid;
text-align: center;
}
div ul li:hover > ._sub { display:block;}
a:link {
text-decoration: none;
}
a:visited {
color:#520029;
}
a:hover {
color: #293D66;
}
http://jsfiddle.net/2mSzr/
notice I make more specific rules with the '>' option in css, so the styling rules will not
apply to the wrong elements..
Also in the HTML I've added _sub class to all sub menus, and changed the behavior so the display:none/block will be on the actual ul._sub elements and not on their li's.. it just
makes more sense..
go over the example above, let me know if you have any questions.