Output:
Source Code:
<html>
<head>
<title>Simple Drop down menu</title>
<style type="text/css">
.main_menu
{
height:30px;
line-height:30px;
color:#FFF;
position:relative;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
margin:0 auto;
width:35%;
}
.main_menu ul
{
padding:0px;
margin:0;
list-style:none;
}
.main_menu ul li
{
padding:0;
margin:0;
border-right:1px solid #000000;
float:left;
background:#FF5604;
}
.main_menu ul li a
{
color:#000;
display:block;
text-decoration:none;
padding:0 25px;
}
.main_menu ul li a:hover
{
background:#C66300;
color:#FFF;
}
.main_menu ul li ul
{
display: none;
width: auto;
position:absolute;
top:30px;
padding:0px;
margin:0px;
}
.main_menu ul li:hover ul
{
display: block;
position: absolute;
margin: 0;
padding: 0;
}
.main_menu ul li:hover li
{
float: none;
list-style:none;
margin:0px;
}
.main_menu ul li:hover li
{
background:#F24F00;
border-top:1px solid #000000;
}
.main_menu ul li:hover li a
{
color: #fff;
padding:0 20px;
display:block;
width:170px;
}
.main_menu ul li li a:hover
{
color:#000;
}
</style>
</head>
<body>
<div class="main_menu">
<ul id="menu1">
<li id="sub"><a href="#">PHP</a>
<ul>
<li id="sub"><a href="#">Array</a></li>
<li id="sub"><a href="#">Object</a></li>
<li id="sub"><a href="#">Function</a></li>
<li id="sub"><a href="#">Variable</a></li>
</ul>
</li>
<li id="sub"><a href="#">Css</a>
<ul>
<li id="sub"><a href="#">Css3</a></li>
<li id="sub"><a href="#">Css</a></li>
</ul>
</li>
<li id="sub"><a href="#">Html</a></li>
<li id="sub"><a href="#">Flash</a></li>
<li id="sub"><a href="#">Photo Shop</a></li>
</ul>
</div>
</body>
</html>
<head>
<title>Simple Drop down menu</title>
<style type="text/css">
.main_menu
{
height:30px;
line-height:30px;
color:#FFF;
position:relative;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
margin:0 auto;
width:35%;
}
.main_menu ul
{
padding:0px;
margin:0;
list-style:none;
}
.main_menu ul li
{
padding:0;
margin:0;
border-right:1px solid #000000;
float:left;
background:#FF5604;
}
.main_menu ul li a
{
color:#000;
display:block;
text-decoration:none;
padding:0 25px;
}
.main_menu ul li a:hover
{
background:#C66300;
color:#FFF;
}
.main_menu ul li ul
{
display: none;
width: auto;
position:absolute;
top:30px;
padding:0px;
margin:0px;
}
.main_menu ul li:hover ul
{
display: block;
position: absolute;
margin: 0;
padding: 0;
}
.main_menu ul li:hover li
{
float: none;
list-style:none;
margin:0px;
}
.main_menu ul li:hover li
{
background:#F24F00;
border-top:1px solid #000000;
}
.main_menu ul li:hover li a
{
color: #fff;
padding:0 20px;
display:block;
width:170px;
}
.main_menu ul li li a:hover
{
color:#000;
}
</style>
</head>
<body>
<div class="main_menu">
<ul id="menu1">
<li id="sub"><a href="#">PHP</a>
<ul>
<li id="sub"><a href="#">Array</a></li>
<li id="sub"><a href="#">Object</a></li>
<li id="sub"><a href="#">Function</a></li>
<li id="sub"><a href="#">Variable</a></li>
</ul>
</li>
<li id="sub"><a href="#">Css</a>
<ul>
<li id="sub"><a href="#">Css3</a></li>
<li id="sub"><a href="#">Css</a></li>
</ul>
</li>
<li id="sub"><a href="#">Html</a></li>
<li id="sub"><a href="#">Flash</a></li>
<li id="sub"><a href="#">Photo Shop</a></li>
</ul>
</div>
</body>
</html>
No comments:
Post a Comment