Dropdown menu in html

Drop down menu in html and css
Drop down menu in html and css
DropDown Menu in HTML.zip
2.1 KiB
573 Downloads
Details

 
Drop down menus are the very important things when we design a website. On here we create a very user friendly and light weight drop down menu using html and CSS. You can download the source code that contains html and CSS code.

Download

Drop down menu in html and css
Drop down menu in html and css
DropDown Menu in HTML.zip
2.1 KiB
573 Downloads
Details

You can change the style and appearance of this menu according to you. You can change the height, background color or others appearance. See this Html and CSS code:

HTML Code :

<html>
<head>
    <title>DropDown menu in HTML</title>
    <link href="dropdownmenu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menus">
<ul>
     <li> 
     <a href=''>ABOUT</a>
        <ul>
	<li><a href=''>About Us</a></li> 
	<li><a href=''>Contact Us</a></li> 
	<li><a href=''>Authors</a></li> 
	<li><a href=''>EmailUs</a></li>
        </ul>
     </li>
 
     <li> 
     <a href=''>DEVELOPMENTt</a>  
        <ul>
	<li><a href=''>CSharp language</a></li>
 	<li> <a href=''>Visual Basic .Net </a> </li> 
	<li><a href=''>Visual Basic 6.0</a></li> 
	<li><a href=''>Visual C++</a></li>
	</ul>
     </li>
 
     <li> 
     <a href=''>WEB DEVEL</a> 
        <ul>
	<li><a href=''>ASP.Net</a></li>
 	<li><a href=''>JavaScrip</a></li>
        </ul>
     </li>
 
     </ul>
</div>
</body>
</html>

CSS :

#menus
{
	height:30px;
	background:url(images/navbg7.gif) repeat-x left top;
}
#menus ul
{
	 margin:0px;
	 padding:0px;
 
 
}
#menus ul li
{
	list-style:none;
	display:inline-block;
	float:left;
	position:relative;
	line-height:30px;
	height:30px;
	background:url(images/navbg7.gif) repeat-x left top;
	width:150px;
	text-align:center;
	behavior: url("csshover3.htc");
}
#menus ul li ul
{
	display:none;
}
#menus ul li a
{
	color:#fff;
	 padding:0px 15px;
	 line-height:30px;
	 text-decoration:none;
	 font-size:12px;
}
#menus a:hover
{
	text-decoration:underline;
}
#menus ul li:hover ul
{
	position:absolute;
	left:0px;
	top:30px;
	display:block;
}
#menus ul li ul li
{
	 width:160px;
	 text-align:left;
	 padding-left:10px;
	 height:30px;
	 overflow:hidden;
	 background:url(images/navbg7.gif) repeat-x left top;
}
  • kaleb

    Good show! Jolly good show!