Introduction
CSS menus are created using formatting and positioning of standard HTML. The underling structure is simply a nested list. The visible portion of the menu is the outermost list, and the drop-down portions are sublists. Each item in the list is a link to content. The associated formatting of the sheet changes the display of the submenus depending on whether or not the mouse is over the outer list item. Depending on the method used, the submenu may be set to display off the screen, or not be displayed at all unless the mouse is over the "Home title". When the mouse hovers over the title, the inner list is displayed overlapping the outer, so that the Home "drops down".
In fact, however, keyboard navigation is virtually impossible with this kind of menu because, while the tab key moves the "focus" to the submenu items, the user has no way of knowing what item is currently selected, or even what items are available. The only items that can be reliably accessed are those of the outer list.
Step 1: Open Macromedia Dreamweaver.
Step 2: Then create a new document by clicking the File Menu then New Document.
Click the Create button.
![newdocument.jpg]()
Step 3: HTML 5 Doctype:
<!DOCTYPE html>
<html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Title </title>
</head>
<body>
Create Text here
</body>
</html>
Step 4: Define the body part and set the content of the CSS Dropdown Menu:
Code
<nav>
<ul>
<li><a href="#">Home</a>
<ul>
<li><a href="#">SubMenu Text here 1</a> </li>
<li><a href="#">SubMenu Text here 2</a> </li>
<li><a href="#">SubMenu Text here 3</a> </li>
<li><a href="#">SubMenu Text here 4</a>
<ul>
<li><a href="#">SubMenu Lable 2 Text here 1</a> </li>
<li><a href="#">SubMenu Lable 2 Text here 2</a> </li>
<li><a href="#">SubMenu Lable 2 Text here 3</a> </li>
<li><a href="#">SubMenu Lable 2 Text here 4</a> </li>
<li style="border-bottom: none;"><a href="#">SubMenu Text Lable 2 here 5</a> </li>
</ul>
</li>
<li style="border-bottom: none;"><a href="#">SubMenu Text here 5</a> </li>
</ul>
</li>
<li><a href="#">About us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Step 5: Apply the stylesheet of the Dropdown Menu:
Code
<style>
*
{
margin: 0px;
padding: 0px;
}
body
{
background: #6d0086;
}
nav
{
background: #36004d;
float: left;
width: 100%;
height: 40px;
margin: 0px 0 2px 0px;
border-bottom: 2px solid #d298e7;
}
nav ul
{
float: right;
margin: 0px;
padding: 0px;
list-style: none;
display: inline;
}
nav ul li
{
float: left;
list-style: none;
display: inline;
position: relative;
line-height: 23px;
}
nav ul li a
{
float: left;
list-style: none;
display: block;
padding: 4px 22px;
border-left: 1px solid #0e0313;
border-right: 1px solid #5f016f;
color: #fff;
text-decoration: none;
font-size: 14px;
font-family: "Myriad Pro" , Arial;
}
nav ul li ul
{
display: none;
}
nav ul li:hover ul
{
width: 187px;
display: block;
float: left;
position: absolute;
left: 0px;
top: 29px;
background: #36004d;
border: 1px solid #36004d;
z-index: 9999 !important;
}
nav ul li:hover ul li
{
margin: 0 5px;
padding: 0px;
display: inline;
float: left;
border-bottom: 1px dotted #dddddd;
font-weight: normal;
position: relative;
background: none;
}
nav ul li:hover ul li a
{
font-weight: normal;
padding: 0px;
float: none;
width: 168px;
display: block;
padding: 0px 0 0px 9px;
font-size: 11px;
line-height: 25px;
height: 25px
border-left: none !important;
border-right: none !important;
}
nav ul li:hover ul li a:hover
{
background: #d298e7;
color: #000000;
}
nav ul li:hover ul li ul
{
display: none;
}
nav ul li:hover ul li:hover ul
{
position: absolute;
left: 170px;
top: 0px;
display: block;
}
</style>
Step 6: Write the complete code for the developed simple CSS Dropdown Menu that uses the HTML 5 tools. The complete application is:
<!DOCTYPE html>
<html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Css Dropdown menu</title>
<style>
*
{
margin: 0px;
padding: 0px;
}
body
{
background: #6d0086;
}
nav
{
background: #36004d;
float: left;
width: 100%;
height: 40px;
margin: 0px 0 2px 0px;
border-bottom: 2px solid #d298e7;
}
nav ul
{
float: right;
margin: 0px;
padding: 0px;
list-style: none;
display: inline;
}
nav ul li
{
float: left;
list-style: none;
display: inline;
position: relative;
line-height: 23px;
}
nav ul li a
{
float: left;
list-style: none;
display: block;
padding: 4px 22px;
border-left: 1px solid #0e0313;
border-right: 1px solid #5f016f;
color: #fff;
text-decoration: none;
font-size: 14px;
font-family: "Myriad Pro" , Arial;
}
nav ul li:hover ul li a:hover
{
background: #d298e7;
color: #000000;
}
nav ul li ul
{
display: none;
}
nav ul li:hover ul
{
width: 187px;
display: block;
float: left;
position: absolute;
left: 0px;
top: 29px;
background: #36004d;
border: 1px solid #36004d;
z-index: 9999 !important;
}
nav ul li:hover ul li
{
margin: 0 5px;
padding: 0px;
display: inline;
float: left;
border-bottom: 1px dotted #dddddd;
font-weight: normal;
position: relative;
background: none;
}
nav ul li:hover ul li a
{
font-weight: normal;
padding: 0px;
float: none;
width: 168px;
display: block;
padding: 0px 0 0px 9px;
font-size: 11px;
line-height: 25px;
height: 25px;
border-left: none !important;
border-right: none !important;
}
nav ul li:hover ul li ul
{
display: none;
}
nav ul li:hover ul li:hover ul
{
position: absolute;
left: 170px;
top: 0px;
display: block;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a>
<ul>
<li><a href="#">SubMenu Text here 1</a> </li>
<li><a href="#">SubMenu Text here 2</a> </li>
<li><a href="#">SubMenu Text here 3</a> </li>
<li><a href="#">SubMenu Text here 4</a>
<ul>
<li><a href="#">SubMenu Lable 2 Text here 1</a> </li>
<li><a href="#">SubMenu Lable 2 Text here 2</a> </li>
<li><a href="#">SubMenu Lable 2 Text here 3</a> </li>
<li><a href="#">SubMenu Lable 2 Text here 4</a> </li>
<li style="border-bottom: none;"><a href="#">SubMenu Text Lable 2 here 5</a> </li>
</ul>
</li>
<li style="border-bottom: none;"><a href="#">SubMenu Text here 5</a> </li>
</ul>
</li>
<li><a href="#">About us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
Output
![menuOutput.jpg]()