Hey guys, I've been trying to create dropdown menu for awhile now and I'm not getting the right result.
I need help guys
here's my css code
<style type="text/css">
#div2
{
margin-top:50px;
margin-left:100px;
}
#div2 ul{
margin:0px;
padding:0px;
}
#div2 ul.main-menu
{
list-style:none;
}
#div2 ul.main-menu li
{
/*display:block;*/
width:130px;
height:50px;
float:left;
background:#e8e9ea;
line-height:58px;
text-align:center;
border:1px solid #099;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
/*z-index:10;*/
position:relative;
}
#div2 ul.main-menu li a
{
text-decoration:none;
color:#000000;
display:block;
}
#div2 ul.main-menu li a:hover
{
color:#0094ff;
background:#808080
}
#div2 ul.main-menu ul.submenu1
{
position:absolute;
display:none;
}
#div2 ul.main-menu li:hover > ul.submenu1
{
display:block;
}
#div2 ul.main-menu ul.submenu1 ul.submenu-two ul.submenu-two
{
margin-left:130px;
top:0px;
}
.tab1
{
border-bottom-left-radius:50px;
border-top-left-radius:50px;
}
.tab2
{
border-bottom-right-radius:50px;
border-top-right-radius:50px;
}
#div2 ul.submenu-two li
{
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#div2 ul.submenu-two li:hover
{
width:150px;
}
#div2 ul.submenu-two li a
{
margin-left:5px;
}
</style>
html code
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<div id="div2">
<ul class="main-menu">
<li class="tab1"><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul class="submenu1">
<li><a href="#">Product</a>
<ul class="submenu-two">
<li><a href="#">Nokia</a>
<ul class="submenu-three">
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
</ul>
</li>
<li><a href="#">Games</a></li>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
</ul>
</li>
<li><a href="#">Movie</a>
<ul class="submenu-two">
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
</ul>
</li>
<li><a href="#">Music</a>
<ul class="submenu-two">
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
</ul>
</li>
<li><a href="#"></a>
<ul class="submenu-two">
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Food</a>
<ul class="submenu1">
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
</ul>
</li>
<li><a href="#">Wine</a>
<ul class="submenu1">
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
</ul>
</li>
<li><a href="#">Fruit</a>
<ul class="submenu1">
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
</ul>
</li>
<li><a href="#">Culture</a>
<ul class="submenu1">
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
</ul>
</li>
<li><a href="#">Country</a>
<ul class="submenu1">
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
<li><a href="#">list</a></li>
</ul>
</li>
<li class="tab2">Contact</li>
</ul>
</div>
</body>
</html>
thanks in advance