Weeb tutorials feedback Powered by

Stylish CSS3 mega drop down navigation menu.

This tutorial will show you how to create an amazing CSS3 mega drop down menu for your website. The menu has a hover effect & dropdown tabs - ideal for sites with a lot of information.

A number of CSS3 properties are used, some of which may not be fully supported yet. You can find a chart showing which browsers currently support CSS3 properties at the following link: http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/

To follow the tutorial you will need Photoshop or a similar product, but only for 1 or 2 images. The rest will be done using CSS. Before we get started you can view the finished dropdown menu below...

CSS3 Nav Demo CSS3 Nav DOWNLOAD

Step 1 - Structure the dropdown menu

First of all you will need to structure the navigation menu using HTML. To do this you will need to use an unordered list, nested within two DIV's. The reasoning behind having two wrappers(or DIV's) is that for this navigation menu we need two borders. It seems better to add an extra DIV into the equation rather than a number of images....

Secondly, in order to achieve the drop-down menu effect you will need to nest further 'UL'(Unordered lists). The nested list/s should always sit within an '<li>' element.

Below is the HTML list, it may look daunting but most of it is actual content, rather than code:

<div id="navWrap1"> <div id="navWrap2"> <ul> <li> <a href="#"> Home</a> <ul> <li> <p> <b>Welcome to ABC.com</b> </p> <img src="images/bluestylish2/navLine.png" height="2" width="418" alt="line"/> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </li> </ul> </li> <li> <a href="#"> About</a> <ul> <li> <p> <b>About us</b> </p> <img src="images/bluestylish2/navLine.png" height="2" width="418" alt="line"/> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </li> </ul> </li> <li> <a href="#">Contact</a> <ul> <li> <p> <b>Contact</b> </p> <img src="images/bluestylish2/navLine.png" height="2" width="418" alt="line"/> <form method="post" action="#"> <p> Name </p> <input type="text" name="Name"/> <p> Email: </p> <input type="text" name="Email"/> <br /> <p> Comments: </p> <textarea name="comments" cols="40" rows="5"> Enter your message here! </textarea> <br/> <br/> <input type="submit" value="Submit" /> </form> </li> </ul> </li> <li><a href="#"> Portfolio</a> <ul> <li> <p> <b>Portfolio</b> </p> <img src="images/bluestylish2/navLine.png" height="2" width="418" alt="line"/> <div class="navListFloat"> <p> Development </p> <ol> <li> <a href="#"> TutSite </a></li> <li> <a href="#"> BidBay </a></li> <li> <a href="#"> Evideo </a></li> <li> <a href="#"> MusicBay </a></li> <li> <a href="#"> Network 2.0</a></li> </ol> </div> <div class="navListFloat"> <p> Web Design </p> <ol> <li> <a href="#"> Playsite </a></li> <li> <a href="#"> Gamer Station </a></li> <li> <a href="#"> Musix </a></li> <li> <a href="#"> xPress.com </a></li> <li> <a href="#"> E Logo</a></li> </ol> </div> <div class="navListFloat"> <p> Other Projects</p> <ol> <li> <a href="#"> Incognito </a></li> <li> <a href="#"> ItSells.com</a></li> <li> <a href="#"> Musix </a></li> <li> <a href="#"> xPress.com </a></li> <li> <a href="#"> E Logo</a></li> </ol> </div> </li> </ul> </li> <li ><a href="#"> Social</a> <ul> <li> <p> <b>Social</b> </p> <img src="images/bluestylish2/navLine.png" height="2" width="418" alt="line"/> <form class="newsletter" method="post" action="#"> <p><b> Join newsletter </b></p> <div> <p> Name </p> <input type="text" name="Name"/> </div> <div> <p> Email: </p> <input type="text" name="Email"/> </div> <input type="submit" value="Join" /> </form> <img src="images/bluestylish2/navLine.png" height="2" width="418" alt="line"/> <a href="#"><img src="images/bluestylish2/rss.png" alt="RSS"/></a> <a href="#"><img src="images/bluestylish2/twit.png" alt="twit"/></a> <a href="#"><img src="images/bluestylish2/face.png" alt="face"/></a> <a href="#"><img src="images/bluestylish2/su.png" alt="su"/></a> <a href="#"><img src="images/bluestylish2/in.png" alt="in"/></a> </li> </ul> </li> </ul> <form class="search" method="post" action="#"> <input type="text" name="search" class="searchBox"/> <input type="image" src="images/bluestylish2/searchBtn.png" class="searchIMG" /> </form> <span class="clear"></span> </div> </div>

I realise the code above may be slightly confusing, there is a large amount of content and it probably makes it hard to see what is actually going on. Take a look at the code below for a bite-size example.

<ul> <li> <a href="#"> Home</a> <ul> <li> <p> Dropdown content goes here </p> </li> </ul> </li> </ul>

Inside the parent 'UL' is an 'LI', as you would normally expect. This 'LI' contains a nested 'UL'. The content of this nested 'UL' will be hidden, using CSS,until the user hovers the mouse over its parent.

When the mouse hovers the parent, the nested list is made visible using the display property. It can also be positioned as required using absolute positioning.

Step 2 - Create some simple images using Photoshop

As mentioned earlier you will need a couple of images to complete the navigation menu. First of all lets create a nice,simple background. Open Photoshop and create a new image. Make it around 425 pixels wide, and around 50 in height.

Pick a foreground colour, we are using #677384. Using the 'Paint bucket tool' ('G')fill the background.

Now browse to 'Filter > Noise > Add noise'. Use the same settings as shown in the image below.

CSS3 Nav example

That is all we need to do for the background. Save that image using PNG format.

Step 3 - Styling the navigation menu using CSS

Style the menu container:

#navWrap1 { border:thin #2e363f solid; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; width:1000px; } #navWrap2 { border:thin #a9c2dc solid; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; background:url(images/bluestylish2/bg.png); padding:0px 20px; }

First of all add a border to both DIV's, use a different colour on each. For best effect try to make the difference between the two borders subtle.

Specify a width for the menu on the outer wrapper, in our example we are using 1000px - which is enough to span the width of an average website.

Add rounded corners to both DIV's by using the 'border-radius' property.

Apply the background image we created earlier to the menu using the 'background' property. We want the image to repeat on both axis & this is done by default so no need for any further CSS.

Style the List:

#navWrap2 > ul { list-style:none; padding:0; margin:0; padding-top:5px; font-family:Tahoma, Geneva, sans-serif; } #navWrap2 > ul > li { float:left; position:relative; } #navWrap2 > ul > li > a { padding:8px 20px 15px 20px; text-decoration:none; color:#425160; text-shadow:#8194a8 1px 1px 0px; font-weight:bold; font-size:17px; display:block; margin-left:2px; margin-right:2px; margin-top:2px; }

The styling used on the 'UL' is pretty straight forward. If you are wondering why we added 5px of padding to the top its so that there is a space between the top of the menu and the tabs when hovering. This is displayed below:

CSS3 Nav Photoshop example

The list item code is also pretty simple, we only need to change two properties. Float the list items to the left to create a horizontal list & change the position to relative.

By changing the position to relative we are telling the web browser that any children which are positioned absolutely should be positioned relative to the parent list item.

Style the hover effect:

#navWrap2 > ul > li:hover{ /* for IE */ filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#e2e2e2', endColorstr='#ebebeb'); /* for webkit browsers */ background:-webkit-gradient(linear, left top, left bottom, from(#e2e2e2), to(#ebebeb)); /* for firefox 3.6+ */ background:-moz-linear-gradient(top, #e2e2e2, #ebebeb); /* Rounded corners: */ border-radius:10px 10px 0px 0px; -webkit-border-radius:10px 10px 0px 0px; -moz-border-radius:10px 10px 0px 0px; border-top:2px solid #cac9c9; border-left:2px solid #cac9c9; border-right:2px solid #cac9c9; }

Apart from the first 3 parts, the majority of this CSS is self explanatory. Just so you're aware the first 3 properties are used to define the gradient of an element. Each one does the same thing, but for a different browser.

#navWrap2 > ul > li:hover > a{ margin:0; color:#adadad; text-shadow:white 1px 1px 0px; }

Simple stuff, just change the text and shadow colour. Should blend with the new background a little better!

Styling the nested List/s (Dropdown content):

#navWrap2 ul li:hover ul{ display:block; -moz-box-shadow:3px 3px 4px #a7a7a7; /* Rounded corners: */ border-radius:10px 10px 0px 0px; -webkit-border-radius:10px 10px 0px 0px; -moz-border-radius:0px 10px 10px 10px; }

This bit is important. What we are saying is, basically, when you hover over a list item apply the following code to its child, or nested, UL. The dropdown lists, or nested lists are currently hidden (or will be in a minute when we change their display value to none). To bring them back into sight change the display value to block.

#navWrap2 ul ul { /* Hide the nested lists */ display:none; /* Position the nested UL, relative to its parent list item */ position:absolute; left:-2px; border-bottom:2px solid #cac9c9; border-left:2px solid #cac9c9; border-right:2px solid #cac9c9; /* Gradient: */ filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#ebebeb', endColorstr='#e2e2e2'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#e2e2e2)); /* for webkit browsers */ background: -moz-linear-gradient(top, #ebebeb, #e2e2e2); /* for firefox 3.6+ */ /* Width / spacing */ width:420px; padding:20px; }

Above code shouldn't need any further explanation, the comments are enough i think.

Styling the content of the drop-down menu

.navListFloat ol { padding:0; margin:0; } /* Style nested lists used in each tab */ #navWrap2 ul ul li{ list-style:none; } #navWrap2 ul ul li a{ text-decoration:none; color:#b2b2b2; padding:4px; } #navWrap2 ul ul li a:hover{ color:#5c5c5c; } /* Style any text within the drop down menu */ #navWrap2 ul ul p{ font-family:Tahoma, Geneva, sans-serif; color:#939393; font-size:14px; } #navWrap2 ul ul p b{ color:#414141; font-size:16px; } /* Style the multiple lists found in Development tab */ .navListFloat { float:left; width:106px; margin:0px 17px 17px 17px; } .navListFloat li { font-size: 13px; } .newsletter > input { margin-top:44px; } .newsletter div { float:left; margin-right:25px; } /* Style the search form */ .search { float:right; } .searchBox { float:left; margin-top:7px; height:23px; border-top:thin solid #3c444c; border-left:thin solid #3c444c; border-right:thin solid white; border-bottom:thin solid white; background:#e9e9e9; border-radius:6px 6px 6px 6px; -webkit-border-radius:6px 6px 6px 6px; -moz-border-radius:6px 6px 6px 6px; color:#7a7a7a; padding:1px 5px 1px 3px; } .searchIMG { float:left; margin-top:7px; margin-left:-5px; } img { margin-top:17px; border:none; } .clear { display:block; clear:both; }

There you have it, slightly long-winded but a good final product. Hopefully the tutorial wasn't too hard to follow, I had a big break during the creation of this and got kind of lost!

If anything is missing, or hard to follow let me know via the contact page. Hopefully get round to creating a comments section soon too!

next

This is the old version of our site. To visit the new version click the following link: New site