Creating a good-looking navigation menu is a great way to improve the overall look and feel of a web application. A well-designed and attractive menu will increase usability and give your application a polished feel.
There are a few ways to go about creating a dropdown menu on a web app:
- Build a Flash-based menu
- Build a Javascript-based menu
- Build a CSS/HTML-based menu
Which should you choose? These days, you should avoid Flash, as it doesn’t work on many mobile devices. That leaves you with Javascript and CSS/HTML, neither of which are bad options. I personally prefer the CSS/HTML approach, for a few reasons:
- It’s easier to create and manipulate: You only need to understand CSS and HTML, and it leaves you with straightforward code that’s easy to update.
- It’s lightweight: It leaves you with less overall code, and a smaller application size.
- You won’t run into any javascript conflicts: If you already use Javascript in different parts of your web app, you may run into Javascript conflicts if you use it elsewhere. Unlikely, but possible.
- More people can use it: As Javascript can be used for malicious purposes, some users disable it in their browsers. As such, a javascript-based menu won’t work for them.
In this tutorial, I’m going to show you how to create a simple, but attractive CSS-based drop-down menu. This first tutorial will only include the basics, but over the next few weeks, I’m going to build off of this tutorial, and teach you some cool CSS3 tricks that you can add to your web apps.
Ready? Let’s build the menu:
Demo
Before we begin, let’s take a look at what we’re building. Here’s a link to the completed drop-down menu. As you can see from the demo, it’s a pretty basic drop-down menu. When you hover over each option, it drops down and displays more options.
If you peaked at the page source of the demo, you noticed there are two parts to the menu: An HTML section and a CSS section. I’ll walk you through each part, but will start with the HTML:
HTML
The HTML portion of the menu is just a standard unordered list. You’ll notice that the drop-down options are presented as list items. Here’s the HTML code for the menu.
<div id="wrap">
<ul class="navbar">
<li><a href="#">Home</a></li>
<li>
<a href="#">Retrievals</a>
<ul>
<li><a href="#">Data Listing</a></li>
<li><a href="#">Web Scheduling</a></li>
<li><a href="#">Google Maps Application</a></li>
</ul>
</li>
<li>
<a href="#">Reporting</a>
<ul>
<li><a href="#">Ad Hoc Report</a></li>
<li><a href="#">Drill Down Report</a></li>
<li><a href="#">Ranking Report</a></li>
</ul>
</li>
<li>
<a href="#">Business Intelligence</a>
<ul>
<li><a href="#">Business Dashboard</a></li>
<li><a href="#">Web Pivot Table</a></li>
<li><a href="#">Interactive Report</a></li>
<li><a href="#">What-If Analysis</a></li>
</ul>
</li>
<li>
<a href="#">Data Maintenance</a>
<ul>
<li><a href="#">Database CRUD</a></li>
<li><a href="#">Database Update</a></li>
<li><a href="#">Order Entry</a></li>
<li><a href="#">Drag-and-Drop Application</a></li>
</ul>
</li>
<li>
<a href="#">B2B Portal</a>
<ul>
<li><a href="#">B2B Portal</a></li>
<li><a href="#">Secure Data-Driven Listings</a></li>
<li><a href="#">Secure Shopping Cart</a></li>
</ul>
</li>
</ul>
</div>Now, if you were to copy and paste that code into a web app, it would look just like a bulleted list. How does it look so different in the example? Why can’t you see the drop-down list items until you hover over one of the options? The answer lies in the CSS, which we will cover next.
CSS
The CSS portion of the menu provides all of the styling. In short, it’s what makes the bulleted list look like a drop-down menu. It’s what hides the drop-down options until you hover over the menu. It’s what changes the colors when a selection is hovered over. To learn how, let’s go over the code, and explain what each style does. To make things easier, I’ve included an image with each section of code. In each image, I’ve highlighted the area of the menu bar that code applies to.
Sound good? Let’s start at the top. The first style essentially creates a container for our navigation menu. It places the blue rectangle across the width of the page, and assigns it a height of 50px. You can find the code below, as well as an image to illustrate which section of the menu the code applies to. I’ve placed comments on the parts of the code whose purpose may not be obvious:
#wrap {
width: 100%; /* Spans the width of the page */
height: 50px;
margin: 0; /* Ensures there is no space between sides of the screen and the menu */
z-index: 99; /* Makes sure that your menu remains on top of other page elements */
position: relative;
background-color: #366b82;
}The next style ensures that the navigation menu does not affect other elements on the page. We accomplish this with the “position: absolute;” style. When you position an element absolutely, it is taken out of the flow of the page. In other words, it’s ignored by other elements. This is quite important as you don’t want your drop-down menus to push other elements down, which they would do otherwise. Here’s the code and the corresponding image for this style:
.navbar {
height: 50px;
padding: 0;
margin: 0;
position: absolute; /* Ensures that the menu doesn’t affect other elements */
border-right: 1px solid #54879d;
}Next, we move on to the styles that are responsible for making the menu items line up horizontally across the top of the page. I’ve placed comments after the more important styles, so you understand how this code works. This code is responsible for main menu items in the navigation bar. Here’s the code as well as the corresponding image:
.navbar li {
height: auto;
width: 150px; /* Each menu item is 150px wide */
float: left; /* This lines up the menu items horizontally */
text-align: center; /* All text is placed in the center of the box */
list-style: none; /* Removes the default styling (bullets) for the list */
font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #366b82;
}So far, we’ve created a list, removed the bullets, and lined up all of the list items horizontally. The next bit of code styles the anchor tags that are found in each list item. As you will see from the image, each anchor tag is the same size and shape as the list item. Here’s the code for each anchor, as well as the corresponding image. I’ve placed comments on the code to help you understand what each style does:
.navbar a {
padding: 18px 0; /* Adds a padding on the top and bottom so the text appears centered vertically */
border-left: 1px solid #54879d; /* Creates a border in a slightly lighter shade of blue than the background. Combined with the right border, this creates a nice effect. */
border-right: 1px solid #1f5065; /* Creates a border in a slightly darker shade of blue than the background. Combined with the left border, this creates a nice effect. */
text-decoration: none; /* Removes the default hyperlink styling. */
color: white; /* Text color is white */
display: block;
}
The next style is responsible for changing the color of each menu item’s background when hovered over with a mouse pointer. There is no image, as it is fairly straightforward. Here’s the code:
.navbar li:hover, a:hover {background-color: #54879d;} I’ve combined the next two styles as they are related. The first style hides the drop-down menu, while the second style displays it when a mouse pointer is hovered over the main menu item. Here’s the code:
.navbar li ul {
display: none; /* Hides the drop-down menu */
height: auto;
margin: 0; /* Aligns drop-down box underneath the menu item */
padding: 0; /* Aligns drop-down box underneath the menu item */
}
.navbar li:hover ul {
display: block; /* Displays the drop-down box when the menu item is hovered over */
}
The next few styles apply to the drop down menu. Keep in mind that this style inherits most of its styles from “.navbar li”, which applies to all “li” elements found within the dropdown. We do want to change the background color of the drop-down menu. This only requires one style, which you’ll find below (along with the image):
.navbar li ul li {background-color: #54879d;} Just as we placed hyperlinks within each list item in the main menu, we’ll do the same in each list item in the drop-down menu. The hyperlinks also inherit the styles found in “.navbar li a”, so our job will be pretty easy. We only want to change the borders, so as to create the same effect found in the main menu. The first style listed below is responsible for the borders, while the second style changes the background color when hovered over. Here’s the code and the corresponding image:
Code:
.navbar li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.navbar li ul li a:hover {background-color: #366b82;}
How to use this menu with your m-Power apps
If you’d like to use this menu bar in your own m-Power web apps, it’s very easy to add. In the Admin section, there’s an option to “Edit data dictionary files.” Click that option and add the HTML and CSS portions of this menu to the appropriate files. One thing to note: If you customize the colors of this menu to match your corporate colors, make sure you change the border colors as well. The left border should be slightly lighter than the background color, while the right border should be slightly darker.
Conclusion
That’s it! Feel free to grab the code from the demo and use this menu in your own web apps. It’s a quick way to improve the look and feel of your web apps. It’s simple to build, simple to maintain, and looks pretty good as well. Now, stay tuned, because in the next few weeks, I plan on writing some tutorials that build on this navigation menu. I’ll explore a few ways you can use some news features found in CSS3 to enhance your web apps.
Pingback: Tutorial: Create a pure CSS navigation menu for your web apps | mrc's Cup of Joe Blog
there is a problem with this code. If there is content below the menu, the menu will not expand, regardless of the z setting. Is there a work around for this issue? Otherwise, its a lovely menu-I quite like it.
I’m afraid I couldn’t duplicate the issue. I placed some content below the menu and it still worked. Did you alter the code at all? The z-setting doesn’t control the menus ability to expand, it simply determines the elements stacking order. The absolute position on the first “ul” element will have more impact on the expanding. Was that changed at all?
-Steve
What’s Happening i am new to this, I stumbled upon this I’ve found It absolutely useful and it has helped me out loads. I hope to contribute & help other users like its aided me. Good job.
Hey thanks for posting these css, i needed it.
Thanks…
Pingback: Using CSS3 Gradients » mrc Tech Blog
I just added this website to my rss reader, excellent stuff. Can not get enough!
It would be nice to know how the mrcmenu can be have css applied to it.
JBo —
That’s certainly possible. In m-Power’s “Admin” section, there’s an option to “Edit Data Dictionary Files” that lets you alter any of the style sheets, servlet files, or header/footer files. You should be able to edit the mrcmenu CSS from there.
Thank You. I learned to create dropdown menu :
thank you very much, very useful stuff,,,,
Hi, thank you so much for this. This has been the only drop-down menu tutorial that has actually been helpful to me, so THANK YOU :) I was just wondering if there’s a way to remove the last table at the very end? Is that possible? Thank you so much.
-Steph
Thanks Steph, I’m glad it helped! With regards to your question, I’m afraid I don’t know which table you’re referring to. If you’re referring to the list items, you can certainly remove any one of them, and everything else will just slide over.
-Steve
Hey Steve, sorry I ‘m just referring to menu itself, the empty box on the far right side. Because I only have 7 top menu items and don’t really want the unfilled menu box at the end. Is there a way to remove it so that there are only the 7 menu items that I need? thank you :)
-Steph
Steph-
That’s not a problem. Just remove the width and height styles from the “wrap” id, and it should disappear.
-steve
awesome, thank you so much! you’re a lifesaver :)
-Steph
Thanks for this code, i had issues with sub-menus not aligning up with their menus, i fixed this by setting their width and centered text. Great!!
Hi, Steve!
This appears to be a great CSS drop down menu. I’ve been trying to customize it to fit my web design and I’m having a few problems, perhaps you can give me some help here?
I want my top line navbar to look like this
About | Writing | SEO | Resume | Contact
Can I do that with this? I’ve been trying to make it work and so far no luck. I don’t want the borders. I’d like the width adjust to the width of the words.
Also, I have my current navbar setup in a container with the following CSS on a full image background of a super moonrise!
.container #h-navbar {
font-size: 95%;
float: left;
color: white;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 5px;
padding-left: 5px;
text-align: center;
text-decoration: none;
}
.container #h-navbar a:hover {
color: #ffc;
background-color: #243a60;
text-decoration: none;
}
.container #h-navbar a, #h-navbar a:visited {
color: #ffc;
padding: 5px!important;
text-decoration: none;
}
I was hoping the drop down menu would work with the attributes I’ve already used.
BTW – I’m in school and this is for my digital portfolio and working in Notepad++
Thanks for the help.
Sharon
Hi Sharon,
I’m glad you like the drop-down menu! From what I understand, it seems like you can pretty easily adapt the menu to fit your needs.
First, to make the width adjust to the width of the words, just remove the width style (width: 150px) on the first “li”. You might need to add some margins or padding to separate the text.
Second, it sounds like you want to add lines in between your list items, but the lines shouldn’t extend to the top and bottom of the bar. Is that correct? There are a couple of ways to do that. First, you could use the “:after” pseudo class. It would look something like this:
.navbar a:after { content: ” | “;}
Doing that would add a vertical line after every anchor tag. Or, you could use the borders that are already on the anchor tags, and just add a top and bottom padding to the “.navbar li” style. That would create a vertical line that doesn’t reach the top or bottom of the bar.
I hope that helps.
Steve
Thanks, Steve!
I think I’m getting this and over the course of the weekend managed a little each day to get some refinement like I was looking for. I will likely need to play with this some more perhaps after my initial submission for grading which is due this Friday.
I did play with the width on the first “li” and found the drop down lists then appeared horizontally rather than vertically. So I ended up with a minimum width of 115px which is wide enough for the longest words and too long for the shortest words. So, I will play with this if I have time before submission, and if not, before the 2nd submission.
If I can make the above adjusted widths work, then I’ll go for the bar between the words, however, I have a question about your instructions regarding the quotation marks around the bar on this line of code:
.navbar a:after {content: ” | “;}
Above in your reply to me you have the first set of quotes facing left instead of the default right and the second set of quotes facing right instead of the default left. Is that correct the way you typed it or a typo or does it matter?
Thanks again, Sharon
Hi Sharon,
Glad to hear you’re making progress. I’m honestly not sure why the quotation marks appeared that way in the comment. It really doesn’t matter which way they face–you’ll just want to put quotation marks around the content.
Let me know if you have any other questions.
Steve
thank you so much for this nice menu bar.this code will help me in designing my home page ofbmy project.
Thanks a lot its was really helpfull…
I have looked at several tutorials to get some help and advice with drop down css navigation menus. This is the best one I have seen, thanks.
Thanks! I’m glad you liked it!
Greetings,
Can you help me to set the height of the cells?
For some reason my attempts are not yielding results when I use the “height” descriptor.
I have had to resort to using “line-height”, which throws things off when the text is longer than the cell-width and needs to wrap.
Here is my initial page where I use line-height (at 290% !) to set the height:
http://www.nondairycreamer.com/index_emanuelblagonic_01.html
This above page shows the look I am after in terms of cell height.
And here is the page where I set the line-height to something more reasonable (140%) and attempt to set the height as 70px:
http://www.nondairycreamer.com/index_emanuelblagonic_02.html
I used your background color for what is essentially the “wrap” div, to show you what is going on.
Can you offer me any clues, given my HTML file and the CSS files, why I can’t seem to set the height of the cells any more than the height of the actual font?
While I’m at it, do you know what CSS I might use to have the cell width automatically increase to accommodate longer strings of text?
Thanks,
David
David –
No problem, I can help you fix that problem. The height element isn’t working because the “li” and “a” elements are both inline elements, and height only works on block elements.
However, turning both of those elements into block-level elements won’t fix your problem. Multi-line drop-down lists pose a bit of a problem, but here’s what you can do to fix it:
First, change your “li” elements to “display: table” and give them a height.
Second, change your “a” elements to “display: table-cell;” and remove the padding. Then, add “vertical-align: middle;” and “text-align: center;” to the “a” element. That should do the trick.
Also, to make your cell width automatically adjust the width, just change the “li” width to “min-width”. It would look like this: “min-width: 150px;”.
Hope that helps.
Steve
Thank you for taking the time to help, Steve!
The min-width did the trick!
As for the height, I appreciate your approach, and I was able to find a culprit and a fix:
The fix is courtesy of another coder:
I removed the ridiculous 290% line-height and changed the padding on #menu a{} from 0 10px to just 10px. I found I was able to control the height in an easy way with padding. The culprit holding me back was that first “0”.
Thanks,
David
Great, I’m glad you got it working!
Steve
Hi Steve!
Thank you so much for providing such easy to understand drop-down menu instructions. I was wondering if you could help me out with my dilemma. I’m trying to place an image to the left of the drop down items. I want to have a drop-down menu like TigerMedical.com.
Thanks, for your help,
Ben
Hi Ben,
I took a quick look at the TigerMedical’s source code, and it looks like their drop-down menu consists mainly of div elements. The giant drop-down box itself is an absolutely positioned unordered list (ul), but the columns within that box are all floated divs, housed in a single list item (li). The image on the left just comes from an image tag placed in the first div.
I’d probably approach something like that a little differently. If you take the code above, and simply give the dropdown “ul” a width and a height, you could easily mimic the look and feel of their menu. For instance, it would look something like this:
.navbar li ul {width: 600px; height: 400px;}.
Then, just adjust the list item’s height to fit, and alter the background color to your liking. If you do it that way, you could easily replace the first list item with an image to get the effect you’re after.
Of course, you’d have to add some margins to the image, but you probably get the idea.
I hope that makes sense. Good luck!
-Steve
Possibly the best tutorial ever on drop downs-definately adding this site to my ‘must reads’-thank you so much Steve!
Thanks, glad you liked it!
– Steve
hey Steve! Thanks for the note!-if you have an email addy or way of sending code so its not exposed to the universe, I’ll shoot you over the code.
No problem, feel free to send code to shanse3@gmail.com. I’ll take a look at it when I can.
– Steve
Great tutorial. I’m trying to adapt this to my site but I am removing the background of the primary menu and replacing the text with images. I’m having trouble with the image position and link area as well as getting multiple images to replace the existing text. ex. I could make all of them the image for home but not have a home image, followed by a contact image, and so on. How would you approach this?
Hi Alex –
I’m a little unclear on exactly what you’re trying to accomplish, but if you’re just trying to replace the text with images, that shouldn’t be a problem. Though, I’d recommend using images with the same dimensions. Then, you’d probably want to remove the padding on the anchor elements, and just use margins on the images to make them center. Is that what you’re looking for?
-Steve
Quick question:
How do I by-pass my default page hyperlink colors in the nav only? I can’t remember how to get it to just stay the same color non-linked text.
Hi Catrina,
Just change the color style on your anchor elements. Right now, the color on “navbar a” is set to white. Just change that to whatever color you want your links to appear.
Steve
Hi Steve,
Great dropdown tutorial by you…I’ve gone through with many but not as crisp and clear as this. Needless to say its well written, easy to understand and simple to implement…hats off!!!
I tried to implement this in one of my project but facing an issue, the dropdown items are fixed (in width) to parent element or hover link-item. And in your tutorial dropdown item text wraps if it gets lengthier in width.
But in my project, the dropdown items need to be in single line and not wrapped, can you please help me to sort out this.
Also one more question, are dropdown elements inheriting any style attribute of parent element, or not. If yes, then how can it be stopped.
Thanks a lot for your valuable contribution!!!
Hi Ravi,
Thanks, I’m glad you liked it!
Right now, the “.navbar li” styles apply to all “li” elements in the dropdown menu by design, as I wanted them to all look similar. That’s easy to change, and you can do it using a couple of different methods:
1. Override the “.navbar li” styles with child-specific styles. For example, the dropdown “li” elements inherit the width from the navbar “li” elements. If you don’t want that to happen, you would need to add a width to your dropdown li elements, like this: .navbar li ul li {width: auto;}.
2. Change the “.navbar li” styles to apply only to the direct descendant of the navbar. For example, if you changed it to “.navbar > li”, those styles will only apply to the first “li” element in the dropdown. Of course, you would then need to define styles for the dropdown li” elements.
Hope that helps. Good luck!
Steve
Hi, Steve:
Instead of having a unordered list under the original nav bar, is it possible to put in a div?
Thanks!
You could certainly put it into a div, but I can’t think of any way that would improve the drop-down. It seems like it would require more CSS and deliver the same result. Is there a particular reason you want to take that approach?
-Steve
Hi, Steve:
I want to add a description to the main group of links (i.e., “Retrieval” in your example) in a column to the left of the div, and the second level of links in the column to the right of the div.
Thanks for your quick response!
I’m sorry, but I’m having trouble visualizing what you’re looking to accomplish. Do you have an example, or a link to another site that’s implementing a drop-down in this way? I’m curious to see what exactly you’re looking for.
Steve
Hi, Steve:
I’m currently trying to do it without the two columns first, just to make sure I know how everything works. But the navbar I put in my website doesn’t really work, because every time I hover over the 2nd level links, the 1st level background color changes back to the original color (as if I’m not hovering over the list). Can you please help me?
Here’s the html coding:
About Us關於我們
History | 教會簡介
Staff | 教會同工
Our Faith | 信仰告白
Location | 教會主
Ministries事工事工
Sunday School | 主日學
Prayer Meeting | 禱告會
Awana Clubs | 禱告會
Outreach宣道事工
Chinese School | 中文學校
Short Term Missions | 短期宣教
Missionaries | 仰告白
Calendar教會年曆
Church Calendar | 教會年曆校
Meeting Schedule | 聚會時間
Special Events | 特別聚會
And here’s the CSS rules for the navbar. I only deviated from your coding to make cosmetic changes, like background color and width of the list items:
#ddWrap {
margin: 0px;
position: absolute;
right: 0px;
z-index: 99;
bottom: 0px;
height: 50px;
width: 486px;
background-color: #5A110D;
}
ul.ddnav {
position: absolute;
list-style-type: none;
height: 50px;
}
ul.ddnav li{
width: 110px;
;
float: left;
height: auto;
text-align: center;
padding: 0;
margin: 0;
font-family: “Century Gothic”, sans-serif;
font-size: 1.1em;
}
ul.ddnav li a , ul.ddnav li a:visited {
text-decoration: none;
display: block;
padding-top: 3px;
color: #FEFDB3;
}
ul.ddnav li a:hover, ul.ddnav li a:focus , ul.ddnav li a:active{
text-decoration: none;
padding-top: 3px;
color: #5A110D;
background-color: #FEFDB3;
}
ul.ddnav li ul {
display: none;
margin: 0px;
padding: 0px;
height: auto;
list-style-type: none;
}
ul.ddnav li ul li{
background-color: #fefdb3;
width: 250px;
text-align: left;
}
ul.ddnav li:hover ul {
display: block;
}
ul.ddnav li ul li a, ul.ddnav li ul li a:visited {
color: #5A110D;
padding-left: 10px;
}
ul.ddnav li ul li a:hover, ul.ddnav li ul li a:focus, ul.ddnav li ul li a:active{
color: #FEFDB3;
background-color: #5A110D;
padding-left: 10px;
}
Can you tell what I’m doing wrong? Thanks for all your help!
– supra411
-Supra,
Sorry for the late answer–for some reason, I never received notification of a new comment, so I just saw your question now.
To answer your question, your first level links change back to the original color because you removed this style in your CSS:
.navbar li:hover, a:hover {background-color: #54879d;}
That tells your first and second level links to stay the same color while hovering over the dropdown links. If you add that back, it should work.
-Steve
Hi, Steve:
It worked! Thanks a lot! However, now the text color is the same as the background color. The CSS rule I added is:
}
ul.ddnav li:hover, a:hover , a:focus, a:active{
background-color: #FEFDB3;
color: #5A110D;
}
The font color doesn’t change to #FEFDB3. Sorry for continuously bothering you!
Thanks for everything!
supra411
I would check to make sure you don’t have any conflicting styles. I personally use Chrome’s built-in developer tools. Using Chrome, you can right-click the element in question, and then select “Inspect element”. It will tell you which styles are being applied to that element.
Hope that helps!
Steve
Thanks For Teaching!!!!!
Hi Steve,
you mentioned copying from the Admin section, there’s an option to “Edit data dictionary files.” Click that option and add the HTML and CSS portions of this menu to the appropriate files. I could not find the admin section ??
Hi Kevin,
When you log in to m-Power, you can find the “Admin” option in the top navigation bar. It’s the option furthest to the right, next to the “Maintenance” option. Let me know if you run into any issues.
Steve
simply it is awesome…
this is an awesome tutorial and really helped me with my project. super simple and easy to follow wonderful.
just one question how do i make sub sub menus? and them appear to the right of the sup menu?
Hi there,
When I put this in as embedded CSS it works, but when on an external sheet, it only half works. The drop down is not hidden and they are a little all over the place. Not quite sure what is going wrong. I have checked the coding, it is as you have written above.
Hi Ollie,
Just a guess, but it sounds like the styles may be conflicting with other styles on your site. It shouldn’t matter whether or not the CSS is embedded or external. Do you have any other styles with identical class/id names?
Steve
I have copied this code exactly and the menu will not drop down my other links… I’m just wondering what might be wrong…
Nevermind… the coding is fine. It just doesn’t want to run in IE but it works perfect in Firefox. Thanks for the tutorial!
I like your blog. because it detail how to use html,css,jquery ,and javascript.Ex. Detail about How to use , , .
Hi Steve,
This tutorial was very easy to follow. Thank you for putting it together. I’m having some issues implementing it on my website and it could be because it is conflicting with other parent elements?
1. I have a Logo (a .png image) that I want to turn into a button (just like in Gmail where you click on a button/icon and it shows you more options) rather than having the drop-down on hover.
2. I can’t get the list to be hidden even with “Display:none” – it’s just statically present below the logo. When I try to change the background color of the UL / parent div, the color doesn’t change so that’s what makes me think it may be a parent issue?
3. I’m trying not to use javascript “onclick” as I haven’t studied that language at all.
Any tips would be helpful. Thank you in advance!
Andrew
Hi Andrew,
Adding a logo to your dropdown menu is easy. Just replace your text in the parent navigation with your image. For instance, instead of the word “Reporting”, I could replace that with a graph icon and it would work fine.
The “display: none;” issue sounds like a conflict with other CSS elements. I would open up your site in chrome, right-click on the list, and select “Inspect element”. That will let you see what styles are being applied to that element.
Hope that helps!
Steve
Hello,
Thanks for posting this – it was, as per all the comments above, both clear and helpful!
I’ve been using this code for a couple months now, but am now looking to add a secondary navigation. So in your example, under “Reporting” if you hovered over “ad hoc report” another level of navigation would appear to the right.
Is this something that could be easily implemented?
Thanks!
Katherine
Hi Katherine,
Yes, that could be easily implemented. I threw something together really quickly that works. There might be a better way to do this, but this delivers the desired result:
CSS:
.navbar ul.sub {display: none;
height: auto;
padding: 0;
position: absolute;
left: 150px;
top: 0;
}
.navbar li:hover ul.sub {display: none;}
.navbar ul.sub li {float: none;}
.navbar .sub-link {position: relative;}
.navbar .sub-link:hover ul.sub {display: block; }
For the HTML, just add the “sub-link” class to the list-item, and the “sub” class to the sub-menu under the list item.
hi steve
i have tried using this in my menu but i cannot work out where to put the “sub” and “sub-link” in my html
please could you post an example bit of code with these inserted correctly so i can replicate?
thanks
chris
Hi, Steve,
is there a way to center nav on the page? I tried to set ‘margin:auto;’ to the ‘navbar’ class, but that didn’t work.
Thank you in advance!
Marko
Hi Marko,
That doesn’t work because the navbar is absolutely positioned. To center it, you’d have to wrap it in a relatively positioned div, and set the side margins to auto.
Steve
Can you please help me with I cannot figure out how to get it centred
Thank you *so* much for this. The comments in the actual code were *so* helpful!
Thanks, I’m glad you liked it!
I didn’t get where to put the CSS coding.
In this example, the CSS is placed in the head section of the document.
I understand your tutorial till HTML code. Coming to CSS, there are several code snippets given for different styles. How to save each copy of snippet ? I saved each copy with .css extension but the effect is not applied to the html page. Please guide me in this regard.
I’d recommend you just grab all of the CSS code from the page source of the demo.
Great info. I have implemented the code on my site and it works great. Only problem is that the drop down doesn’t work in IE. Is there a way to fix this.
Hi Jim,
I just tested it again in different versions of IE, and it appears to work. My guess is that other CSS is interfering with the dropdown, or you’re facing a z-index issue.
Hi Steve, this is a very good tutorial and it has helped me out tremendously. My question is, is there a way to make the li stay on one line when the browser window is minimized? Thanks Broooke
nice work thanks…
hi
i have used an above post to get a 2nd level sub menu that pops out from the 1st dropdown menu – but at the bottom of the screen it still pops out down (and disappears off the screen) is there a way of it popping out up instead of down?
thanks
chris
your code works but how can make it centered
thx helpful so much