Reader Level:
ARTICLE

Create CSS Dropdown Menu Using HTML 5

Posted by Manoj Rajput Articles | HTML 5 July 31, 2012
In this article you will learn how to create a CSS Dropdown menu using HTML 5.
  • 1
  • 0
  • 14422

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

Article Extensions
Contents added by Itech Solution on Jun 29, 2013
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!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>
    <title>Web Site Name</title>
    <link href="../style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
        .style1
        {
            width: 100%;
        }       
        .style2
        {
            width: 6px;
        }
        body 
{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color:#FDFAEE;
font-family: Century Gothic;
font-size:12px;
color: Black;
}
        .button
           {
border: 1px solid #000000;
background-color: #FFFFFF;
font-family: Century Gothic;
font-size: 12px;
color: Black;
width:80px;
}
.t1
{
background-color:#F9F0D5;
}
.t2
{
background-color:#F7EAC1;
}
.t3
{
background-color:#F1D896;
}
    </style>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div class="BackgroundGradient"> 
    <div class="BodyContent">

    <div class="BorderBorder"><div class="BorderBL"><div></div></div><div class="BorderBR"><div></div></div><div class="BorderTL"></div><div class="BorderTR"><div></div></div><div class="BorderT"></div><div class="BorderR"><div></div></div><div class="BorderB"><div></div></div><div class="BorderL"></div><div class="BorderC"></div><div class="Border">

        <div class="Header">
          <div class="HeaderTitle"> 
          <table cellpadding="0" cellspacing="0" style="width:100%">
          <tr>
          <td align="left"><div align="left"> <img src="../images/logo11.png" height="70" 
                  width="90" />
        <img src="../images/maruti-suzuki-logo%20copy.png" />
        </div></td>
        <td> <h1>Shiv Brick Field</h1>
            <h1>Suratganj</h1>
                                            </td>
          </tr></table>
          </div>
        </div>
        <div class="Menu" style="height:25px">
            <%--<ul><li><a href="#" class="ActiveMenuButton"><span>Home</span></a></li> <li><a href="#" class="MenuButton"><span>Categories</span></a></li> <li><a href="#" class="MenuButton"><span>Archive</span></a></li> <li><a href="#" class="MenuButton"><span>About</span></a></li></ul>--%>
        </div>
        <div class="Columns"><div class="MainColumn"></div>
                   <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        <div class="ArticleBorder" style="height:300px"><div class="ArticleBL"><div></div></div><div class="ArticleBR"><div></div></div><div class="ArticleTL"></div><div class="ArticleTR"><div></div></div><div class="ArticleR"><div></div></div><div class="ArticleL"></div><div class="ArticleC"></div><div class="Article"> 
        </div></div>
        </asp:ContentPlaceHolder> </div>

    </div></div>
    </div> 
   </div> </div>
    </form>
    </body>
</html>

COMMENT USING

Trending up