Multi-level CSS Menu

Use this css to generate multilevel css drop down menu.

.nav{
width:450px;
padding-top:64px;
float:right;
position:relative;
}

.nav ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

.nav li{ font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; color:#bcbdc0; list-style:none; display:inline; float:left; padding-left:20px; }

.nav li a, .nav li a:link, .nav li a:visited {
display:block;
margin: 0px;
color:#bcbdc0;
text-decoration:none;
}

.nav li a:hover, .nav li a:active {
color:#FFFFFF;
text-decoration: none;
margin-top: 0px;
}

.nav li li a, .nav li li a:link, .nav li li a:visited {
background:#00427A;
width: 100px;
font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; color:#bcbdc0;
float: none;
margin: 0px;
padding: 5px 7px 5px 7px;
border-bottom: 1px solid #0E3B62;
border-left: 1px solid #0E3B62;
border-right: 1px solid #0E3B62;
}

.nav li li a:hover, .nav li li a:active {
background:#00427A;
color: #FFFFFF;
margin: 0px;
padding: 5px 7px 5px 7px;
}

.nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
z-index: 100;
margin: 0 0 0 -12px;
}

/*my*/
.nav li ul li{

float: left;
list-style: none;
background: none;
font-family:Georgia, “Times New Roman”, Times, serif;
font-size:21px;
font-weight:normal;
color:#FFFFFF;
padding-left:11px;
padding-right:4px;
display:inline;
}
/*my*/

.nav li li {
}

.nav li ul a {
width: 140px;
}

.nav li ul a:hover, .nav li ul a:active {
}

.nav li ul ul {
margin: -27px 0 0 104px;
}

.nav li:hover ul ul, .nav li:hover ul ul ul, .nav li.sfhover ul ul, .nav li.sfhover ul ul ul {
left: -999em;
}

.nav li:hover ul, .nav li li:hover ul, .nav li li li:hover ul, .nav li.sfhover ul, .nav li li.sfhover ul, .nav li li li.sfhover ul {
left: auto;
}

.nav li:hover, .nav li.sfhover {
position: static;
}

Advertisements

Published by

samrat131

Hello, I am a software developer from Bangladesh. I develop professional web sites/applications using LAMP(Linux, Apache, MySql, PHP) Stack. I have 7 years of professional working experience developing websites on WordPress, Magento, Laravel, Yii, Code Igniter. I have in depth knowledge on following language and tools, PHP, C, C++, Java, MySql, HTML(5), CSS(3), JavaScript, jQuery, Linux, Windows, Apache, Ngnix.

One thought on “Multi-level CSS Menu”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s