HTML and CSS Menu

Menu is a most important part of a website. So we want the menu to be beautiful ‍and interactive. But how we make a menubar and menu? Simply the solution is HTML and CSS.

By using HTML and CSS we can create a interactive navigation menu.

At first we want to create a HTML(Hypertext Markup Language) menu structure and then we need to style by CSS(Cascading Style Sheet).

Step-1:

Create a HTML menu structure as bellow-

<html>
<head>
<title>Html and CSS menu</title>
</head>
<body>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'>Home</a></li>
<li class='has-sub '><a href='#'>CMS</a>
<ul>
<li><a href='#'>Wordpress</a></li>
<li><a href='#'>Blogger</a></li>
</ul>
</li>
<li class='has-sub '><a href='#'>Web</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href='#'>PHP</a></li>
<li class='has-sub '><a href='#'>PHP Framework</a>
<ul>
<li><a href='#'>Laravel</a></li>
<li><a href='#'>CodeIgniter</a></li>
</ul>
</li>
<li><a href='#'>Javascript</a></li>
</ul>
</li>
<li class='has-sub '><a href='#'>Desktop</a>
<ul>
<li><a href="#">Java</a></li>
</ul>
</li>
<li><a href='#'>Android</a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Contact Us</a></li>
</ul>
</div>
</body>
</html>

The out will as below

Now we will write CSS for this menu.

Base CSS

@charset "UTF-8";
#css3menu {padding: 0; margin: 0; border: 0;}
#css3menu ul, #css3menu li {list-style: none; margin: 0; padding: 0;}
#css3menu ul {position: relative; z-index: 597; }
#css3menu ul li { float: left; min-height: 1px; vertical-align: middle;}
#css3menu ul li.hover,
#css3menu ul li:hover {position: relative; z-index: 599; cursor: default;}
#css3menu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%;}
#css3menu ul ul li {float: none;}
#css3menu ul ul ul {top: 0; left: auto; right: -99.5%; }
#css3menu ul li:hover > ul { visibility: visible;}
#css3menu ul ul {bottom: 0; left: 0;}
#css3menu ul ul {margin-top: 0; }
#css3menu ul ul li {font-weight: normal;}
#css3menu a { display: block; line-height: 1em; text-decoration: none; }

Now the output will

Now Style the menubar background

#css3menu {
background: #333;
border-bottom: 4px solid #1b9bff;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 12px;
}
#css3menu > ul { *display: inline-block; }
#css3menu:after, #css3menu ul:after {
content: '';
display: block;
clear: both;
}

Rearrange menu and submenu

#css3menu a {
background: #333;
color: #CBCBCB;
padding: 0 20px;
}
#css3menu ul { text-transform: uppercase; }
#css3menu ul ul {
border-top: 4px solid #1b9bff;
text-transform: none;
min-width: 190px;
}
#css3menu ul ul a {
background: #1b9bff;
color: #FFF;
border: 1px solid #0082e7;
border-top: 0 none;
line-height: 150%;
padding: 16px 20px;
}
#css3menu ul ul ul { border-top: 0 none; }
#css3menu ul ul li { position: relative }

Adjust Menubar and menu height

#css3menu > ul > li > a { line-height: 48px; }
#css3menu ul ul li:first-child > a { border-top: 1px solid #0082e7; }
#css3menu ul ul li:hover > a { background: #35a6ff; }
#css3menu ul ul li:last-child > a {
border-radius: 0 0 3px 3px;
box-shadow: 0 1px 0 #1b9bff;
}
#css3menu ul ul li:last-child:hover > a { border-radius: 0 0 0 3px; }
#css3menu ul ul li.has-sub > a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px;
}

Now out will as following

Finally we will design selected menu

#css3menu ul li:hover > a, #css3menu ul li.active > a {
background: #1b9bff;
color: #FFF;
}
#css3menu ul li.has-sub > a:after {
content: '+';
margin-left: 5px;
}
#css3menu ul li.last ul {
left: auto;
right: 0;
}
#css3menu ul li.last ul ul {
left: auto;
right: 99.5%;
}

Finally our menu will as bellow.

If you have any question on this tutorial please write on comment.

About Mahabubur Rahman

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.