Creating a Drop Down Navigation Menu

86

Every tutorial I’ve done on navigation bars or menu’s has been the normal one level navigation bar, but when you build a website you may feel the need to create sub categories, for example my blog houses various tutorials which are stored in categories, I have a drop down navigation bar on the main link, which is tutorials which then displays sub catergories and then the specific catergory e.g. Tutorials > XHTML > Basics in that example there are three levels. You can create navigation bar levels using lists, it’s the easiest way to create a drop down menu but for styling it can get a bit tricky, but in this tutorial Im going to show you how to form a drop down navigation menu and then style it with CSS

Forming a basic navigation with lists

First off all were actually going to form the drop down menu itself, forming the drop down menu isn’t that hard it’s styling the lists itself that can get confusing. Were going to start off by creating a basic navigation which is just one level

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
</ul>

This is a basic one level navigation with no styling, but formed by a list (unordered list to be exact) it could be formed with divs but it would get very messy and really it’s all about keeping it simple. Lets introduce a couple of drop down menu’s, look carefully at how the list is formed with the drop downs added in. At first it looks really odd, but hopefull you’ll see why it’s formed the way it is.

Introducing drop down menus

<ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
 <li><a href="#">Articles</a></li>
 <li><a href="#">Scripts</a>
  <ul>
    <li><a href="#">Drop Down Link 1</a></li>
    <li><a href="#">Drop Down Link 2</a></li>
    <li><a href="#">Drop Down Link 3</a></li>
    <li><a href="#">Drop Down Link 4</a></li>
    <li><a href="#">Drop Down Link 5</a></li>
  </ul>
 </li>
  <li><a href="#">Tutorials</a>
   <ul>
    <li><a href="#">Drop Down Link 1</a></li>
    <li><a href="#">Drop Down Link 2</a></li>
    <li><a href="#">Drop Down Link 3</a></li>
    <li><a href="#">Drop Down Link 4</a></li>
    <li><a href="#">Drop Down Link 5</a></li>
  </ul>
 </li>
  <li><a href="#">Links</a></li>
</ul>

This addition has added a drop down level to the scripts and tutorial links. You have to add a whole new list just before the closing </li> tag of the first level link. It’s important that your lists are closed correctly otherwise you won’t be using valid XHTML and your navigation will just fall apart, quite literally. If you placed this code into a webpage and then viewed it you will have what you call a navigation tree. Which will look like this:

Navigation Tree (Second Level)


Navigation Tree

Adding a third level

Okay so hopefully you understand the whole navigation tree thing and how the drop down menus work. So far we have a two level navigation, but we are not limited to two levels we can add a third level to a second level drop down taking the second level navigation addition we can add a third level to one or more of the second levels:

<ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
 <li><a href="#">Articles</a></li>
 <li><a href="#">Scripts</a>
  <ul>
    <li><a href="#">Drop Down Link 1</a></li>
    <li><a href="#">Drop Down Link 2</a></li>
    <li><a href="#">Drop Down Link 3</a></li>
    <li><a href="#">Drop Down Link 4</a></li>
    <li><a href="#">Drop Down Link 5</a></li>
  </ul>
 </li>
  <li><a href="#">Tutorials</a>
   <ul>
    <li><a href="#">Drop Down Link 1</a>
        <ul>
         <li><a href="#">Third Level Link 1</a></li>
         <li><a href="#">Third Level Link 2</a></li>
         <li><a href="#">Third Level Link 3</a></li>
        </ul>
      </li>
    <li><a href="#">Drop Down Link 2</a>
        <ul>
         <li><a href="#">Third Level Link 1</a></li>
         <li><a href="#">Third Level Link 2</a></li>
         <li><a href="#">Third Level Link 3</a></li>
       </ul>
     </li>
    <li><a href="#">Drop Down Link 3</a>
        <ul>
         <li><a href="#">Third Level Link 1</a></li>
         <li><a href="#">Third Level Link 2</a></li>
         <li><a href="#">Third Level Link 3</a></li>
       </ul>
     </li>
    <li><a href="#">Drop Down Link 4</a>
        <ul>
         <li><a href="#">Third Level Link 1</a></li>
         <li><a href="#">Third Level Link 2</a></li>
         <li><a href="#">Third Level Link 3</a></li>
       </ul>
     </li>
    <li><a href="#">Drop Down Link 5</a>
        <ul>
         <li><a href="#">Third Level Link 1</a></li>
         <li><a href="#">Third Level Link 2</a></li>
         <li><a href="#">Third Level Link 3</a></li>
       </ul>
      </li>
  </ul>
 </li>
  <li><a href="#">Links</a></li>
</ul>

This now makes each link on the second level of the tutorials link have a third level. The navigation tree changes slightly:

Navigation Tree (Third Level)


Navigation Tree

Okay so I’ve shown you how to form a drop down menu with various levels but now’s time to style the list. This is probably the more harder part to actually do so I’ll break it down in steps.

Adding a class to the list

First of all we need to create one class to style the actual navigation bar before we start messing with any lists. I created the class dropdown and added a div around the list code we’ve been using:

<div class="dropdown">
 <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Articles</a></li>
  <li><a href="#">Scripts</a>
   <ul>
     <li><a href="#">Drop Down Link 1</a></li>
     <li><a href="#">Drop Down Link 2</a></li>
     <li><a href="#">Drop Down Link 3</a></li>
     <li><a href="#">Drop Down Link 4</a></li>
     <li><a href="#">Drop Down Link 5</a></li>
  </ul>
 </li>
  <li><a href="#">Tutorials</a>
   <ul>
    <li><a href="#">Drop Down Link 1</a>
        <ul>
         <li><a href="#">Third Level Link 1</a></li>
         <li><a href="#">Third Level Link 2</a></li>
         <li><a href="#">Third Level Link 3</a></li>
        </ul>
      </li>
    <li><a href="#">Drop Down Link 2</a>
        <ul>
         <li><a href="#">Third Level Link 1</a></li>
         <li><a href="#">Third Level Link 2</a></li>
         <li><a href="#">Third Level Link 3</a></li>
       </ul>
     </li>
    <li><a href="#">Drop Down Link 3</a>
        <ul>
         <li><a href="#">Third Level Link 1</a></li>
         <li><a href="#">Third Level Link 2</a></li>
         <li><a href="#">Third Level Link 3</a></li>
       </ul>
     </li>
    <li><a href="#">Drop Down Link 4</a>
        <ul>
         <li><a href="#">Third Level Link 1</a></li>
         <li><a href="#">Third Level Link 2</a></li>
         <li><a href="#">Third Level Link 3</a></li>
       </ul>
     </li>
    <li><a href="#">Drop Down Link 5</a>
        <ul>
         <li><a href="#">Third Level Link 1</a></li>
         <li><a href="#">Third Level Link 2</a></li>
         <li><a href="#">Third Level Link 3</a></li>
       </ul>
      </li>
  </ul>
 </li>
  <li><a href="#">Links</a></li>
</ul>
</div>

Okay so now we have that class defined we can now begin styling.

Styling the Navigation base

Before anything else we need to style the navigation bar, we don’t need to style anything to do with the list we need actually style the class we added to the list code:

/* Navigation Style */

.dropdown {  font-family: arial, sans-serif; position:relative; width:100%; height:50px; border:1px solid #666666; font-size:14px; color:#ffffff; background:#333333; }

Basic List styling

We now need to style the basic list attributes:

/* Basic List Styling (First/Base Level) */

.dropdown ul {padding:0; margin:0; list-style: none;}

.dropdown ul li {float:left; position:relative;}

.dropdown ul li a { border-right:1px solid #666666; padding:17px 17px 17px 17px; display:block; text-decoration:none; color:#000; text-align:center; color:#fff;}

.dropdown ul li a:hover {color:#ffffff; background:#232323;}

This part is important as it is the foundation for the drop downs to work off.

Styling the Drop Down Menus (Second Level)

Now it’s time to style the second level drop down menus.


/* Second Level Drop Down Menu */

.dropdown ul li ul {display: none;}

.dropdown ul li:hover ul { font-size:13px; display:block; position:absolute; top:51px; min-width:150px; left:0;}

.dropdown ul li:hover ul li a {display:block; background:#000; color:#ffffff; width:110px; }

.dropdown ul li:hover ul li a:hover {background:#666666; color:#ffffff;}

Removing the :hover parts will break the navigation bar, they are there so the drop down menu only appears when the someones mouse hovers over a drop down link, removing it will menu it will constantly display so don’t remove it.

Styling the Drop Down Menus (Third Level)

I said your not limited to just two levels so here’s the styling for the third:

/* Third Level Drop Down Menu */

.dropdown ul li:hover ul li ul {display: none;}

.dropdown ul li:hover ul li:hover ul { display:block; position:absolute; left:145px; top:0; }

Explaining all of that

It would be a waste of time for me to just give you the code and say here look, great drop down navigation bar, it’s no use really if you don’t explain the whole code behind it. Styling the lists is done by signifying which list level you are styling:

.dropdown ul – First Level List
.dropdown ul li – First Level List Item

.dropdown ul li ul – Second Level List
.dropdown ul li ul li – Second Level List Item

.dropdown ul li ul li ul – Third Level List
.dropdown ul li ul li ul li – Third Level List Item

In some cases the third level list item is not needed either because there is no third level, or you don’t need to change anything and want it styled just like the second level drop down. Like I said the styling is the tricky part but hopefully from breaking the various levels down into sections has helped you understand in a more clearer way.

Put it all together

Put everything together and we get this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Drop Down Navigation</title>

<style type="text/css">

/* Navigation Style */


.dropdown { position:relative; font-family: arial, sans-serif; width:100%; height:50px; border:1px solid #666666; font-size:14px; color:#ffffff; background:#333333; }


/* Basic List Styling (First/Base Level) */

.dropdown ul {padding:0; margin:0; list-style: none;}

.dropdown ul li {float:left; position:relative;}

.dropdown ul li a { border-right:1px solid #666666; padding:17px 17px 17px 17px; display:block; text-decoration:none; color:#000; text-align:center; color:#fff;}

.dropdown ul li a:hover {color:#ffffff; background:#232323;}



/* Second Level Drop Down Menu */

.dropdown ul li ul {display: none;}

.dropdown ul li:hover ul { font-size:13px; display:block; position:absolute; top:51px; min-width:150px; left:0;}

.dropdown ul li:hover ul li a {display:block; background:#000; color:#ffffff; width:110px; }

.dropdown ul li:hover ul li a:hover {background:#666666; color:#ffffff;}


/* Third Level Drop Down Menu */

.dropdown ul li:hover ul li ul {display: none;}

.dropdown ul li:hover ul li:hover ul { display:block; position:absolute; left:145px; top:0; }

</style>

</head>

<body>
<div class="dropdown">
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Articles</a></li>
  <li><a href="#">Scripts</a>
   <ul>
     <li><a href="#">Drop Down Link 1</a></li>
     <li><a href="#">Drop Down Link 2</a></li>
     <li><a href="#">Drop Down Link 3</a></li>
     <li><a href="#">Drop Down Link 4</a></li>
     <li><a href="#">Drop Down Link 5</a></li>
  </ul>
 </li>
  <li><a href="#">Tutorials</a>
   <ul>
    <li><a href="#">Drop Down Link 1</a>
        <ul>
         <li><a href="#">Third Level Link 1</a></li>
         <li><a href="#">Third Level Link 2</a></li>
         <li><a href="#">Third Level Link 3</a></li>
        </ul>
      </li>
    <li><a href="#">Drop Down Link 2</a>
        <ul>
         <li><a href="#">Third Level Link 1</a></li>
         <li><a href="#">Third Level Link 2</a></li>
         <li><a href="#">Third Level Link 3</a></li>
       </ul>
     </li>
    <li><a href="#">Drop Down Link 3</a>
        <ul>
         <li><a href="#">Third Level Link 1</a></li>
         <li><a href="#">Third Level Link 2</a></li>
         <li><a href="#">Third Level Link 3</a></li>
       </ul>
     </li>
    <li><a href="#">Drop Down Link 4</a>
        <ul>
         <li><a href="#">Third Level Link 1</a></li>
         <li><a href="#">Third Level Link 2</a></li>
         <li><a href="#">Third Level Link 3</a></li>
       </ul>
     </li>
    <li><a href="#">Drop Down Link 5</a>
        <ul>
         <li><a href="#">Third Level Link 1</a></li>
         <li><a href="#">Third Level Link 2</a></li>
         <li><a href="#">Third Level Link 3</a></li>
       </ul>
      </li>
  </ul>
 </li>
  <li><a href="#">Links</a></li>
</ul>
</div>
</body>
</html>

Bug Fix:

Thanks to Jamie who emailed me about a certain problem with the navigation bar I have changed the code round a bit to fix a certain bug which when you changed the width nothing would happen to the drop down box sizes, but instead the links would start going onto one line. There was also a problem with when text was different lengths on the same drop down.

Please update your code (If you’ve used this already) and use the following method to change widths:

min-width:150px; (.dropdown ul li:hover ul) – This is the minimum width for the actual drop down links, you shouldn’t change this value to expand the drop down menus anymore.

width:110px; (.dropdown ul li:hover ul li a) – You should now use this width to control the size of the drop down menus. By Default this will make the drop down links align to the center, however you can overide this by using text-aling:left; on the same line the width is set.

Again thanks to Jamie Hudson for submitting this problem to me and advising me on this fix.

Bug Fix 2:

I’ve had a few emails from people that have had problems with the navigation links being everywhere and completly out of line I found that this is because people have been added a width to the .dropdown ul li line this can not be done as it will make every other list out of line, so instead you can simply change the padding setting on the .dropdown ul li a people have been wanting to change the gap between the links so if this is the case you will need to change these padding parts padding:17px 17px 17px 17px; they will need to be changed equally otherwise your navigation base links won’t align.

Bug Fix 3:

Thanks for Steve M, who commeted on the tutorial he provided a fix for IE7 issues where the navigation drop down would keep disappearing to quickly, all you need to do is add a height to the .dropdown ul li:hover ul li a line, this should fix problems with drop downs disappearing too quickly. In IE7

Well thats how to create a drop down menu. It’s basic I know, there are many ways to extend the functionality of this navigation bar e.g. jQuery but thats for another tutorial! I hope this was useful!

Preview the Drop down navigation menu

Note: Someone recently sent me there code and reported it wasn’t working in IE7. This is because they were using the Strict Doctype, in the example I used the Transitional doctype which does work in IE7 and IE8. But the strict doctype does not work for IE7 (And possiblly IE8 too)

Share This:

  • Hi! I am not too expert in CSS, well, no expert at all, roughly beginner, and I must say one thing… The example you give, does it really need to be pressed or just hovered to access the sub levels? I ask this because it seemed to me, in Chrome, that I only could access the inner levels by pressing them? Is it just me? If so, I am sorry for the stupid question!
    Thanks

    MΓ‘rcio Guerra

  • Hi! Me again, from IE7… After all it is my fault… It works properly in IE7!
    Sorry!

    MΓ‘rcio Guerra

    • Hey there, the navigation bar should work in IE and Firefox no problem. It might not work in Chrome because it uses the webkit and the :hover attributes.

      Edit: I’ve justed tested it in Google Chrome and it works fine for me.

  • This is a really great tutorial and thank you for creating it. If you feel like creating a video of this tutorial we have a $1000 USD contest running for the best video tutorial. We are a social learning network and we would love to have great work like this displayed for everyone to learn from. Check us out @ http://www.gurushare.com, but regardless, thank you again for a solid tutorial.

  • Dragosh

    Hello. I have one problem. I used CSS in the past but i don’t realize why i have this. when i make a similar menu, but with other structure (not the same in the example) the CSS script won’t work. Can you tell me why? Please contact me on the mail adress.

  • Thanks Gurushare, not sure if I have time to do a video, but I had a look at GuruShare and it looks really good. I put it in my bookmarks πŸ™‚

    And Dragonsh can you explain your problem in a bit more detail please.

  • Great tut – it works on all major browsers Safari, Chrome, Firefox, Opera “except IE7”. I reviewed the syntax (css, html) like 5 times and its exactly the same. Can you please elaborate on my problem?

    Thanks in advance πŸ˜›

  • Hey Abraham, it’s not working in IE7?

    Is that the problem your having?

  • Yes, when i hover over the menus that have sub-menus they don’t drop down

  • Mm very strange I’ve just tested it in IE7 and the drop downs work fine. Would you like to email me so I can help you out further?

  • Abraham

    I submit it the code throught the contact form

  • Thank you I will review it and get back to you πŸ™‚

  • I have fixed the code you sent me and replied to your email πŸ™‚

  • Christopher

    Great tutorial! However, I’m having a little problem. when I hover over a portion of the navbar, the dropdown shows up. but when i go to click on one of the dropdown items, the dropdown disappears. I have gone through so much trial and error in this, where I have resorted to copying the code, along with the stylesheet, for the bar with only two levels.

  • Hey Christopher, I think this generally happens in Internet Explorer, it’s not really a bug in my code persay, it’s just the fact that it uses the basic :hover method, browsers can interpret this in different ways, I think Internet Explorer does, sometimes I will admit you’ll have to be quite quick with the mouse. Hopefully in the future I can make a version 2 of this navigation and add in more features. Maybe bring in a bit of jQuery.

  • Christopher

    Alright! Thanks for the quick reply! I am using IE8, and it would come up at some points, but I did have to make a quick move of the mouse. Thanks!

  • No problem. Enjoy the tutorial!

  • Great job, love it!

    I have one problem – the nav bar looks great but when I put the drop down links in it will only allow me to do so under one tab. If I put it under the rest it throws the drop downs out as part of the main nav bar.

    Any suggestions would be a great help.

  • mmm :blond moment:

    Sorry about that but I have figured out what my mistake was. Left the behind the main nav tab after adding the drop down.

    Thank you and keep up the great job.

  • On a side note – is it possible to set the width of the drop down bar so that they all look the same instead of resizing according to the amount of text in the list?

  • You can change the drop down bar by changing the width setting on the

    .dropdown ul li:hover ul li a CSS line

    In this case I think the text will control how big the drop down menu will be. Im currently at school but I shall look at your problem and see if I can change anything.

  • Thank you James – much appreciated!

    Well basicly I need the tabs in the main bar to be evenly spaced. I used “/* 16% for six links like 50% for 2 */” which worked fine but now the drop downs are messed up. They all the same size now but so small you cant read the labels.

    • No problem, if you’d like to send me the code that you are using I’d happily review it and fix it up for you, I find it easier when I see the code and hopefully can point out a fix. You can send this to admin@james-blogs.com.

  • Many thanks, I have emailed the file.

  • No problem πŸ™‚ I have received your code and will begin examining it now πŸ™‚

  • I have fixed your navigation bar issues and have sent you the updated stylesheet πŸ™‚

  • Pingback: Creating a Drop Down Navigation Menu()

  • Many thanks James – It’s perfect! Enjoy the weekend.

  • No problem πŸ™‚ You to!

  • This is nice Menu. Thanks a lot.

  • Your most welcome πŸ™‚

  • Hello James,

    I like to work in CSS. i don’t like java script, and u done it’s for me…

    Thanks!!

    Amit Chivilkar,
    Mumbai, India.

  • Hey Amit, glad your getting into CSS. Hopefully in the future I’ll be able to update this navigation bar with some more exciting features later on, thanks for your comment πŸ™‚

  • Tony

    Hi, great job…

    I finally got it to work with OSCommerce, Doctype was HTML 4.0 transitional, but still wouldn’t work on IE, I changed that to XHTL 1.0 and it worked!

    The only problem now is that the menu disappears before I can select a sub item…it’s always something!

  • Yeah there is a little note at the end of the tutorial stating about the use of any other doctype than transitional in IE. You must transitional in IE. The problem where the navigation menu’s disappear quickly is simply because the navigation uses basic methods to create the drop down effect. In the future im going create a version two of this tutorial and implement features and fix things that you guys have been commenting on. Thanks for commenting πŸ™‚

  • Praveen

    Hi,

    Thanks for your explanation about drop down menu.

    this Css is not working in IE6

    How to fix it?

    • Im assuming it’s because Internet Explorer 6 doesn’t support the :hover method of making the drop downs. You can try replacing the :hover in the CSS with a:link:hover though im not sure if it will work. But could I ask why your still using Internet Explorer 6?! It’s probably the most invalidly coded browsers out there.

  • Pingback: James' Blog » Tabbed Navigation menu with under tab descriptions()

  • Pingback: James' Blog » Tabbed Navigation menu with under tab descriptions()

  • Xinaga

    That awsome, thanks alot. it’s helpfull to me…

  • Glad to hear it πŸ™‚

  • Akira

    I tried to change it to “display: inline;” but now I can’t put a ‘staitc’ size for the sub menus and I have to put ( ) after the links, have a way to determine a size for the sub menus?

    Thanks~

  • Sorry I don’t fully understand what you are trying to do, you can control the size of the sub menus by changing the min-width and width, the links are centered but you can remove this by adding text-align:left; to the .dropdown ul li:hover ul li a line

  • Akira0

    I was trying to put the submenus with a specified width, cause when I edited the links, the boxes was automatically chaging their sizes, but I after some tries I already got the right code hehehe

    Thank you, sorry to bother you~ πŸ™‚

  • Alright, glad you sorted it out and don’t worry about bothering me I’ll happily answer any queries or questions πŸ™‚

    Enjoy the Tut.

  • To fix the IE7 problem experienced by Tony above just add a height to this section of the CSS ‘.dropdown ul li:hover ul li a {display:block; background:#000; color:#ffffff; width:110px; }’

    That should stop it disappearing when you try and move down the dropdown menu!

    Good clear tutorial, almost exactly the way I’ve achieved the same result. It can be made to work in IE6 but requires some extra code and an IE6 specific stylesheet…

  • Thank you Steve for adding your input to the tutorial. I will go ahead and add your fix for IE7 to the tutorial.

  • Dave

    Eeeexcept you left a 1px space between the anchors and their sub-lists, so moving the mouse down slowly results in the menu closing before it can grab focus. Amateur.

  • Did your e key on your keyboard get stuck or something Dave?! Thanks for your comment. The spacing doesn’t help I know but also because the basic method of :hover is used to create the drop downs that probably doesn’t help either. I am going to do a version two of this tutorial and improve parts that have been highlighted.

  • Hey! Thanks James for all the tutorials. I am brand new to website design, and I have been learning a lot from you. Your effort in putting out these post have been a huge help to me.

    I really like this post and I decided to scratch my old nave bar and try the one you have on here. On your post, “Creating a Drop Down Navigation Menu” I am using your code, but the the sub-menus get covered by other content I have on the page. How do I avoid this?

    Thanks again!
    Zach

  • Hey Zach

    Thanks and im glad I can help you!

    What you can do to avoid other divs and content appearing over your drop down menu’s is by applying a z-index to the navigationbar div. e.g.

    .dropdown { font-family: arial, sans-serif; position:relative; width:100%; height:50px; border:1px solid #666666; font-size:14px; color:#ffffff; background:#333333; z-index:9000; }

    This should bring your navigation bar and it’s drop downs over the front of any div that is below it.

    Hope that helps!

  • Thank you! That worked perfectly!

  • Pingback: Creating A Tabbed Navigation Menu With Under Tab Descriptions()

  • Pingback: WordPress Quick Tip: Getting WordPress To Permantly Save Your FTP Information()

  • Hi James,
    I followed your instruction above and trying to create an add on drop down list to my existing menu just like your drop down link 1 of second level but no luck with it! I can’t add anything to my main menu. Would you be able to help me and guide me to create one? Please help!

    • If you would like to send me your current navigation bar code, then I’ll happily take a look and see whats causing you problems πŸ™‚

  • Hi James, Thanks for your prompt reply and here’s my codes:

    Under the template layout I posted :

    Under Page Elements :

    /*- Menu Tabs J————————— */
    #tabsI ul {
    margin:0;
    padding:10px 10px 0 0px;
    list-style:none;
    }
    #tabsI li {
    display:inline;
    margin:0;
    padding:0;
    }
    #tabsI a {
    float:left;
    background:url(“http://i306.photobucket.com/albums/nn256/ooiee_bucket/Blog%20Tab/tableftH.gif”) no-repeat left top;
    margin:0;
    padding:0 0 0 5px;
    text-decoration:none;
    }
    #tabsI a span {
    float:left;
    display:block;
    background:url(“http://i306.photobucket.com/albums/nn256/ooiee_bucket/Blog%20Tab/tabrightH.gif”) no-repeat right top;
    padding:5px 15px 4px 6px;
    color:ffffff;
    }
    /* Commented Backslash Hack hides rule from IE5-Mac */
    #tabsI a span {float:none;}
    /* End IE5-Mac hack */
    #tabsI a:hover span {
    color:#FFF;
    }
    #tabsI a:hover {
    background-position:0% -42px;
    }
    #tabsI a:hover span {
    background-position:100% -42px;
    }

    Home
    Our Services
    Photo Gallery
    Job Schedule
    Contact Us
    I’m tyring to add another line of drop down sub-menu under the following main menu :
    Job Schedule

    However, after reading through your tutorial, I still can’t get the right code to put underneath and to link to the new sub-menu page that I wanted.

    Hope you’ll be able to help. Many thanks!

    • Thanks! I will look at your code sometime today and find out the problem πŸ™‚

  • I have emailed you the code, you are welcome to reply to me via email rather than commenting on here if you wish πŸ™‚

    Hope I’ve helped!

  • Hi James,

    Thanks for your help and it really helps. I’ve also replied your mail with some questions.

    Do check it out when you have time.

    Take care.

    • Hey Beauty Galleries,

      I will check my emails when im back from college later today.

  • diden

    Brilliant!!! glad i found you! keep it up..

  • Brandon

    Thanks for this !!! I have been trying to teach myself drop down menu’s and would always get stumped. This helped so much !!!! I am in the process of making my own website. I am currently going for my web design certificate and I’m trying to get ahead of my class. Any tips on linking my other pages I created and any advice on getting web space.

  • Jasc

    Thanks for the great Tut!!

    But I have one question, If I want to center my menu, How can I do?

    thanks again.

  • That was the best and simplest tutorial on this I’ve seen out there but I’m still having some troubles. I’m trying to implement a 4 level dropdown menu in my blog. My problem is that I don’t really know CSS and I’m lacking the knowledge to adapt/write the definitions of the 3rd and 4th levels. can you e-mail me or post here the CSS for a 4level dropdown?
    Another issue I’m having is that the dropdown is not showing up on the blog even with a ‘z-index:9000;’ argument. The horizontal bar is there but not expanding when hovered. Any guesses?

  • Brittney

    Hi James,
    Im having trouble with the second drop down list, it doesnt seem to be showing up on hover or at all.

  • Elain

    Great post, it is really very useful for me to lean or create a menu by myself!

  • Elain

    Great post, it is really very useful for me to lean or create a menu by myself!

  • Em

    Brilliant… Thanks, this post made everything understandable!

  • Em

    Brilliant… Thanks, this post made everything understandable!

  • Pingback: Great Clips Printable Coupons()

  • Pingback: Prestashop Templates()

  • LS

    Hi
    how can i make the navigation bar placed up and to the right on my page? Β i shortened it to 50%, but i need it on the top right of my site.

  • LS

    Hi
    how can i make the navigation bar placed up and to the right on my page? Β i shortened it to 50%, but i need it on the top right of my site.

  • rich

    its good, and helped a lot. problem is, if you try this on a webste the dropdown menu’s end up underneath the content rather than over it so that it can be selected

  • rich

    its good, and helped a lot. problem is, if you try this on a webste the dropdown menu’s end up underneath the content rather than over it so that it can be selected

  • Pingback: Your Best Questions About Jquery Ui – Top Apprentice Blog()

  • Pingback: My Homepage()

  • Maha Khalaf

    You are an AMAZING 18 yr old.. Keep it up!

  • Maha Khalaf

    You are an AMAZING 18 yr old.. Keep it up!

  • casey

    hey james I got the navigation bar working its great thanks. But I have one issue. It doesn’t go above my other elements on the page πŸ™ any idea what I can do?

  • casey

    hey james I got the navigation bar working its great thanks. But I have one issue. It doesn’t go above my other elements on the page πŸ™ any idea what I can do?

  • Siani

    This really helped with my dissertation, adapted and modified and it works great (iv’e referenced you too) πŸ™‚ xXx

  • max

    i have to develop website similar to us blackberry site.can u help me out…??

  • rachael

    Amazing! Thanks so much, i’ve been trawling the webs for days for this!