<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="menu_style.css" />
</head>
<body>
<nav id="mainmenu">
<ul>
<li> <a href="#">Menu 1</a>
<ul>
<li><a href="#">Sub Menu </a></li>
<li><a href="#">Sub Menu </a></li>
<li><a href="#">Sub Menu </a></li>
</ul>
</li>
<li> <a href="#">Menu 2</a>
<ul>
<li><a href="#">Sub Menu </a></li>
<li><a href="#">Sub Menu </a></li>
<li><a href="#">Sub Menu </a></li>
</ul>
</li>
<li> <a href="#">Menu 3</a>
<ul>
<li><a href="#">Sub Menu </a></li>
<li><a href="#">Sub Menu </a></li>
<li><a href="#">Sub Menu </a></li>
</ul>
</li>
<li> <a href="#">Menu 4</a>
</ul>
</nav>
</body>
</html>
Menu CSS :-
/*-------------------------
Global Reset CSS
--------------------------*/
* {
margin:0;
padding:0;
}
html {
position:relative;
}
/*----------------------------
Main Menu CSS
-----------------------------*/
#mainmenu > ul {
width: 500px; /* Increase when you adding more menu tabs */
margin:0 auto;
}
#mainmenu > ul > li { /* This style only for the top level li */
background:#eee;
list-style: none;
display: inline-block;
line-height: 1;
margin: 1px;
border-radius: 3px;
position:relative;
font:12px/18px Arial, Helvetica, sans-serif;
text-decoration:none !important;
font-size:24px;
padding: 10px 10px;
}
#mainmenu li a {
text-decoration:none;
}
#mainmenu li ul {
position:absolute;
list-style:none;
text-align:left;
width:200px;
left:90%;
margin-left:-90px;
top:20px;
font:bold 12px Arial, Helvetica, sans-serif;
/* This is important for the show/hide CSS animation */
max-height:0px;
overflow:hidden;
-webkit-transition:max-height 0.4s linear;
-moz-transition:max-height 0.4s linear;
transition:max-height 0.4s linear;
}
#mainmenu li ul li {
background-color:#454545;
border-bottom:1px solid #222;
}
#mainmenu li ul li a {
padding:12px;
color:#fff !important;
text-decoration:none !important;
display:block;
}
#mainmenu li ul li:last-child {
border-bottom:0px solid #454545;
}
#mainmenu li ul li:hover {
background-color:#686868;
}
#mainmenu li ul li:first-child {
border-radius:3px 3px 0 0;
margin-top:25px;
position:relative;
}
#mainmenu li ul li:first-child:before { /* Top index arrow */
content:'';
position:absolute;
width:1px;
height:1px;
border:5px solid transparent;
border-bottom-color:#454545;
left:50%;
top:-10px;
margin-left:-60px;
}
#mainmenu li ul li:last-child {
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
}
#mainmenu li:hover ul {
max-height:250px; /* Increase when you adding more dropdown tabs */
}
