CSS DROP DOWN MENU

CSS DROP DOWN MENU

CSS DROP DOWN MENU

Step 1: Insert the following code in the <HEAD> section of your page

<style>

.top_menu{
border:none;
border:0px;
margin:0;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
width:100%;
}

.top_menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
width:66%;
-webkit-box-shadow: 0px 0px 3px 0px #000000;
box-shadow: 0px 0px 3px 0px #000000;

}

.top_menu li{
float:left;
padding:0px;
}

.top_menu li a{
border-left:#999 1px solid;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}

.top_menu li a:hover, .top_menu ul li:hover a{
background: #2580a2 ;
color:#FFFFFF;
text-decoration:none;
}

.top_menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
}

.top_menu li:hover ul{
display:block;
}

.top_menu li li {

display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}

.top_menu li:hover li a{
background:none;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}

.top_menu li ul a{
display:block;
height:35px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}

.top_menu li ul a:hover, .top_menu li ul li:hover a{
background:#2580a2 center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}

.top_menu p{
clear:left;
}

</style>

Step 2: Insert the below sample code into the <BODY> section of your page:

<div class='top_menu'>
<ul>
<li><a href='#'><span>Menu 1</span></a></li>
<li><a href='#'><span>Menu 2</span></a>
<ul>
<li><a href='#'><span>subMenu 1</span></a></li>
<li><a href='#'><span>subMenu 2</span></a>
</li>
</ul>
</li>
<li><a href='#'><span>Menu 3</span></a></li>
<li><a href='#'><span>Menu 5</span></a>
<ul>
<li><a href='#'><span>subMenu 1</span></a></li>
<li><a href='#'><span>subMenu 2</span></a>
</li>
</ul>
</li>
<li><a href='#'><span>Menu 6</span></a></li>
<li><a href='#'><span>Menu 7</span></a></li>
<li><a href='#'><span>Menu 8</span></a>
<ul>
<li><a href='#'><span>subMenu 1</span></a></li>
<li><a href='#'><span>subMenu 2</span></a>
</li>
</ul>
</li>
<li><a href='#'><span>Menu 9</span></a></li>
<li><a href='#'><span>Menu 10</span></a>
<ul>
<li><a href='#'><span>subMenu 1</span></a></li>
<li><a href='#'><span>subMenu 2</span></a>
</li>
</ul>
</li>
</ul>
</div>

Comments