• 1
  • 2
Home > Tips

CSS Drop-down Menu - How to Create CSS Drop-down Menu



  CSS Drop-down Menu - CSS Drop-down Menu Tutorial

Drop-down menu is very common; it is usually created by using JavaScript. However, it may be a little difficult for you understand how to create drop-down menu by using JavaScript.

In this article, I will show you 2 samples of CSS drop-down menu with related CSS drop-down menu codes. You can copy and edit the codes to use them for your own website.




  CSS Drop-down Menu Sample 1 - Menu Items in Vertical Direction

Menu items in vertical direction are the most common drop-down menu we see on most of the websites. Below are the related CSS drop-down menu codes:

 

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>CSS Drop-down Menu Sample 1 - SliceMaker Soft, Inc.</title>
<style type='text/css'>
<!--
*{margin:0;padding:0;border:0;}
body {
font-family: arial, verdana, serif, tahoma;
font-size:12px;
}
#nav {
line-height: 24px; list-style-type: none; background:#666;
}
#nav a {
display: block; width: 384px; text-align:center;
}
#nav a:link {
color:#666; text-decoration:none;
}
#nav a:visited {
color:#666;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;font-weight:bold;
}
#nav li {
float: left; width: 384px; background:#CCC;
}
#nav li a:hover{
background:#999;
}
#nav li ul {
line-height: 27px; list-style-type: none;text-align:left;
left: -999em; width: 384px; position: absolute;
}
#nav li ul li{
float: left; width: 384px;
background: #F6F6F6;
}
#nav li ul a{ wedisplay: block; width: 360px;text-align:left;padding-left:24px;
}
#nav li ul a:link {
color:#666; text-decoration:none;
}
#nav li ul a:visited {
color:#666;text-decoration:none;
}
#nav li ul a:hover {
color:#F3F3F3;text-decoration:none;font-weight:normal;
background:#C00;
}
#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}
#content {
clear: left;
}
-->
</style>
<script type=text/javascript>
<!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById('nav').getElementsByTagName('li');
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? ' ': '') + 'sfhover';
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? ' ': '') + 'sfhover';
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? ' ': '') + 'sfhover';
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp('( ?|^)sfhover\\b'),
'');
}
}
}
window.onload=menuFix;
//--><!]]>
</script>
</head>
<body>
<center>
<ul id='nav'>
<li><a href='#'>CSS Drop-down Menu Sample 1</a>
<ul>
<li><a href='#'> CSS Drop-down Menu Sample 1 - SliceMaker Tutorial </a></li>
<li><a href='# '> CSS Drop-down Menu Sample 1 - SliceMaker Tutorial</a></li>
<li><a href='#'> CSS Drop-down Menu Sample 1 - SliceMaker Tutorial </a></li>
<li><a href='#'> CSS Drop-down Menu Sample 1 - SliceMaker Tutorial</a></li>
<li><a href='#'> CSS Drop-down Menu Sample 1 - SliceMaker Tutorial</a></li>
<li><a href='#'> CSS Drop-down Menu Sample 1 - SliceMaker Tutorial</a></li>
</ul>
</li>
<li><a href='#'>CSS Drop-down Menu Sample 1</a>
<ul>
<li><a href='#'> CSS Drop-down Menu Sample 1 - SliceMaker Tutorial </a></li>
<li><a href='#'> CSS Drop-down Menu Sample 1 - SliceMaker Tutorial</a></li>
<li><a href='#'> CSS Drop-down Menu Sample 1 - SliceMaker Tutorial </a></li>
<li><a href='#'> CSS Drop-down Menu Sample 1 - SliceMaker Tutorial</a></li>
<li><a href='#'> CSS Drop-down Menu Sample 1 - SliceMaker Tutorial</a></li>
<li><a href='http://www.slicemaker.com '> CSS Drop-down Menu Sample 1 - SliceMaker Tutorial</a></li>
</ul>
</li>
<li><a href='#'>CSS Drop-down Menu Sample 1</a>
<ul>
<li><a href='#'> CSS Drop-down Menu Sample 1 - SliceMaker Tutorial </a></li>
<li><a href='#'> CSS Drop-down Menu Sample 1 - SliceMaker Tutorial</a></li>
<li><a href='#'> CSS Drop-down Menu Sample 1 - SliceMaker Tutorial </a></li>
<li><a href='#'> CSS Drop-down Menu Sample 1 - SliceMaker Tutorial</a></li>
<li><a href='#'> CSS Drop-down Menu Sample 1 - SliceMaker Tutorial</a></li>
<li><a href='#'> CSS Drop-down Menu Sample 1 - SliceMaker Tutorial</a></li>
</ul>
</li>
</ul>
</center>
</body>

</html>

 




 CSS Drop-down Menu Sample 2 - with Three-level Menu

Below are the related CSS drop-down menu codes, you can copy and edit them to use them for your website.

 

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>CSS Menu - Vertical</title>
<style type='text/css'>
body {
margin: 0;
padding: 30px;
background: #FFF;
color: #666;
}
h1 {
font: bold 16px Arial, Helvetica, sans-serif;
}
p {
font: 11px Arial, Helvetica, sans-serif;
}
a {
color: #900;
text-decoration: none;
}
a:hover {
background: #900;
color: #FFF;
}
/*CSS Code for Menu Begin:*/
/* Root = Vertical, Secondary = Vertical */
ul#navmenu,
ul#navmenu li,
ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px; /*For KHTML*/
list-style: none;
}
ul#navmenu li {
display: block !important; /*For GOOD browsers*/
display: inline; /*For IE*/
position: relative;
}
/* Root Menu */
ul#navmenu a {
border: 1px solid #FFF;
border-right-color: #CCC;
border-bottom-color: #CCC;
padding: 0 6px;
display: block;
background: #EEE;
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}
/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background: #CCC;
color: #FFF;
}
/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
background: #EEE;
color: #666;
}
/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}
/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
background: #EEE;
color: #666;
}
/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}
/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
background: #EEE;
color: #666;
}
/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
background: #CCC;
color: #FFF;
}
ul#navmenu ul,
ul#navmenu ul ul,
ul#navmenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}
/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
display: none;
}
ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
display: block;
}
</style>
<script type='text/javascript'>
<!--
navHover = function() {
var lis = document.getElementById('navmenu').getElementsByTagName('LI');
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover=function() {
this.className+=' iehover';
}
lis[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(' iehover\\b'), '');
}
}
}
if (window.attachEvent) window.attachEvent('onload', navHover);
-->
</script>
</head>
<body>
<h1>CSS Drop-down Menu Sample 2 - Three-level Menu</h1>
<hr />
<ul id='navmenu'>
<li><a href='#'>Sample 2</a></li>
<li><a href='#'> Sample 2</a>
<ul>
<li><a href='#'> Sample 2</a>
<ul>
<li><a href='#'> Sample 2</a></li>
<li><a href='#'> Sample 2</a></li>
<li><a href='#'> Sample 2</a></li>
<li><a href='#'> Sample 2</a></li>
</ul>
</li>
<li><a href='#'> Sample 2</a></li>
<li><a href='#'> Sample 2</a></li>
</ul>
</li>
<li><a href='#'> Sample 2</a>
<ul>
<li><a href='#'> Sample 2</a>
<ul>
<li><a href='#'> Sample 2</a></li>
<li><a href='#'> Sample 2</a></li>
<li><a href='#'> Sample 2</a></li>
<li><a href='#'> Sample 2</a></li>
<li><a href='#'> Sample 2</a></li>
</ul>
</li>
<li><a href='#'> Sample 2</a>
<ul>
<li><a href='#'> Sample 2</a></li>
<li><a href='#'> Sample 2</a></li>
<li><a href='#'> Sample 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'> Sample 2</a></li>
<li><a href='#'> Sample 2</a></li>
</ul>
</body>
</html>

 

 




  Recommended Software to Create Drop-down Menu

If the above CSS drop-down menu codes are not useful to you, you can try to create drop-down menu on your own.

SliceMaker products can help you create exceptional drop-down menu without writing the complicated codes. Below are the video tutorials on how to create drop-down menu with SliceMaker products.




Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0