Adding CSS Multi level Drop Menu.

by

Do like to play with CSS.Yesterday I found a cool site that was just awesome.The site name was CSSPlay.I found a Drop menu which was just Fantastic.So today We are here with how to add CSS drop menu.In that menu When we hover at tabs it will expand fly out menu will appear.It is just great.It supports up to 4th level as you can see in picture Today we will lean how to add it with easy effort..

Drop Menu

To add CSS Drop menu kindly follow us.

Adding CSS codes.

CSS is Heart of HTML.To add CSS code you can get instruction from here.

  1. Add the Following CSS code in your HTML.
    /*================================================================ 
This copyright notice must be kept untouched in the stylesheet at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/anywidth2.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements.The code is modified by Bloggerrounder.blogspot.com .
===================================================================*/
#menu {width:740px; background: #3aa3d3; height:25px;; text-align:center; position:relative; z-index:20;}
#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}
#menu ul {display:inline-block;}
#menu li {margin:0; padding:0; list-style:none;}
#menu li {clear:both;float:none;}
#menu ul ul {position:absolute; left:-9999px;}
#menu ul.level1 {margin:0 auto;}
#menu ul.level1 li.level1-li {float:left; display:block; position:relative;clear:none;}
#menu ul.level1 {background:#3aa3d3;}
#menu ul.level2 {background:#ae4621;}
#menu ul.level3 {background:#c98b14;}
#menu ul.level4 {background:#9f690e;}
#menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/
#menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#fff; line-height:25px; text-decoration:none;padding:0 15px 0 15px;outline:none;}
#menu ul.level1 li.level1-li a.level1-a {float:left;}
#menu ul li:hover > ul {visibility:visible; left:0; top:25px;}
#menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-25px;}
#menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;}
#menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px;}
#menu a:hover ul {left:0; top:23px;}
#menu li.left a:hover ul {left:auto; right:-1px; top:23px;}
#menu li.left ul a {text-align:right; padding:0 15px 0 15px;}
#menu a:hover a:hover ul,
#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
#menu li.left a:hover a:hover ul,
#menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}
#menu a:hover ul ul,
#menu a:hover a:hover ul ul {left:-9999px;}
#menu li.left a:hover ul ul,
#menu li.left a:hover a:hover ul ul {left:-9999px;}
#menu li a.fly {font-variant: small-caps;}
#menu li.left ul a.fly {font-variant: small-caps;}
#menu li a:hover,
#menu li a.fly:hover {background-color:#555555;}
#menu li:hover > a,
#menu ul li:hover > a.fly {background-color:#555555;}
#menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-4px;}
#menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}
#menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}
#menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}
#menu ul, .tabs-outer {overflow:visible;}
#menu li a {border: none;}
.main-outer {z-index:10;}/*for IE*/
.tabs-outer {z-index:11;}/*for IE*/
  2. Where
    1. In Line 5 change the width of CSS that suits your taste.Use measure it for measuring the width.You can learn it from here.
    2. In line 13,14,15,16 change background-color:#xxxxxx  ,to color of level of Drop menu.You can get HTML color codes from here.

Adding Links at CSS Drop menu.

The HTML Code of CSS Drop menu is.

<!-- Dropdown menu Start -->
<!-- Bloggerrounder.blogspot.com -->
<div id="menu">
<ul class="level1">
<li class="level1-li"><a class="level1-a" href="#url">Home</a></li>
<li class="level1-li"><a class="level1-a fly" href="#url">Contact Us<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#url">Email</a></li>
<li><a href="#url">Telephone</a></li>
<li><a href="#url">Online Form</a></li>
<li><a href="#url">Snail Mail Address</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li"><a class="level1-a fly" href="#url">Resort<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#url">Ski Hire Facilities</a></li>
<li><a class="fly" href="#url">Main Ski Slopes<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">Beginners Slopes</a></li>
<li><a href="#url">Intermediate Slopes</a></li>
<li><a class="fly" href="#url">Advanced Skill Levels<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level4">
<li><a href="#url">Local</a></li>
<li><a href="#url">Nearby</a></li>
<li><a href="#url">With instructor</a></li>
<li><a href="#url">Snow boarding</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#url">Expert</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#url">Night Life</a></li>
<li><a class="fly" href="#url">Restaurants<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">Snow Hotel</a></li>
<li><a href="#url">The Snowman</a></li>
<li><a href="#url">Ice Cavern</a></li>
<li><a href="#url">Ski Inn</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a class="fly" href="#url">Car Hire<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">From Airport</a></li>
<li><a href="#url">In Resort</a></li>
<li><a href="#url">Multiple Resorts</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li"><a class="level1-a fly" href="#url">Surrounding Area<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#url">Where to go</a></li>
<li><a href="#url">What to do</a></li>
<li><a href="#url">Places of interest</a></li>
<li><a href="#url">National parks &amp; Museums</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li left"><a class="level1-a fly" href="#url">Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#url">Money Exchange</a></li>
<li><a class="fly" href="#url">Resort Essential Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">Lift Passes</a></li>
<li><a href="#url">Insurance</a></li>
<li><a class="fly" href="#url">Gear Rental<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level4">
<li><a href="#url">Boots</a></li>
<li><a href="#url">Skis</a></li>
<li><a href="#url">Ski Wear</a></li>
<li><a href="#url">Goggles</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#url">Ski Schools</a></li>
<li><a href="#url">Snow Report</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a class="fly" href="#url">Language<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">Austrian</a></li>
<li><a href="#url">German</a></li>
<li><a href="#url">French</a></li>
<li><a href="#url">English</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#url">Short Breaks</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li"><a class="level1-a" href="http://bloggerrounder.blogspot.com">Get it</a></li>
</ul>
</div>
<!-- Bloggerrounder.blogspot.com -->
<!-- Dropdown menu End -->

Adding or Removing Links.

For 1st level.

If you want to add tab for 1st label then add like this.

<li class=”level1”><a href=”Linkhere”>Tab name</li>

For Adding more first level link like this just copy and modify more codes.Be sure that you have inserted after <ul class=”level1”> tag.

For 2nd level

If you want to add for second class then your should add like this.

<li class="level1-li"><a class="level1-a fly" href="#url">Level up to 2</a>
                    <ul class="level2">
                <li><a href="#url">Level 2  tab</a></li>
                <li><a href="#url">Level 2 tab</a></li>
                <li><a href="#url">Level 2 tab</a></li>
                <li><a href="#url">Level 2 Tab</a></li>
            </ul>
             </li>

For 3rd Level

If you want to add 3rd level we should add like this

<li class="level1-li"><a class="level1-a fly" href="#url">Level 3 menu name</a>
            <ul class="level2">
                <li><a href="#url">Level 3 submenu</a></li>
                <li><a class="fly" href="#url">Level 3 sub menu</a>
                    <ul class="level3">
                        <li><a href="#url">Level 3 sub sub menu</a></li>
                                                <li><a href="#url">Level 3 sub sub menu</a></li>
                        <li><a class="fly" href="#url">Level 3 sub sub menu</a>
                    </ul>
                </li>
        </li>
For 4th level

For 4th level add in this way.

<li class="level1-li"><a class="level1-a fly" href="#url">Level 3 menu name</a>
			<ul class="level2">
				<li><a href="#url">Level 3 submenu</a></li>
				<li><a class="fly" href="#url">Level 3 sub menu</a>
					<ul class="level3">
						<li><a href="#url">Level 3 sub sub menu</a></li>
                                                <li><a href="#url">Level 3 sub sub menu</a></li>
						<li><a class="fly" href="#url">Level 3 sub sub menu</a>
							<ul class="level4">
								<li><a href="#url">Level 4 munu</a></li>
								<li><a href="#url">Level 4 menu</a></li>
								<li><a href="#url">level 4 menu</a></li>
							</ul>
						</li>
					</ul>
				</li>
		</li>

Final revision.

We add the level and  fly out menu like this.

Class name To be added to
level1 Level 1 ul tag
level2 Level 2 ul tag
level3 Level 3 ul tag
level4 Level 4 ul tag
level1-li Level 1 li tag with right or no dropdown
level1-li left Level 1 li tag with left dropdown
level1-a Level 1 li a tag for tabs with no dropdown
level1-a fly Level 1 li a tag for tabs with dropdown
fly li a tag for tabs (other than level 1) with flyout

Adding at Blogger.

  1. Go to Blogger Dashboard>layout or Design .
  2. Click on Add a Gadget,Below of header.
  3. Select HTML/JavaScript
  4. Add the CSS Drop menu HTML Codes

Adding at Word Press

Add the HTML codes in Word Press below of Header.

Bye.

Admin of Blogger Rounder
Shirshak is the Administrator of the Blogger Rounder who thinks he will die next to Blogger. He is Completely devoted to Blogger and thinks Web Designing will makes is career.You contact using contact form from navigation tab to him.You can find him in Twitter.

Subscribe for free
Thanks for visiting Blogger Rounder.We can subscribe to Blogger Rounder's by RSS feed or email updates.

0 comments on "Adding CSS Multi level Drop Menu.":

Post a Comment

We Love To Hear Comments from You.Comments are Welcome.You can comment here regarding this Post.If it is not related with the post you can ask a question by Contacting Us.Before Comment Please Subscribe To our RSS or email updates.Publishing Spam Comment is Not allowed.If you want to Add Code then Please Encode it.
Simple Tags like <a> ,<strong>,<b>,<em> and <i> are allowed for preventing spam

Newer page Older Pager Home Pager
Subscribe to: Post Comments (Atom)

Pls share this page

Get this
Copyright © 2012 Blogger Rounder .Designed by Shirshak.
back to top