CSS Dropdown Menu - Dreamweaver Tutorial
Share this Dreamweaver Article:
Here is an example of the css drop down horizontal menu that you can create with minimal html mark up and a little CSS. This horizontal can be made and styled in under 15 minutes if you follow the instructions below with full code examples!
1. Add the HTML for the CSS Dropdown Menu
There is minimal HTML mark up needed to create a horizontal dropdown menu or drop down list menu. If you have never used the navigation list menu technique before, then it can seem a little confusing at first. The dropdown navigation utilises a technique which takes an unordered list with another unordered list nested inside of it. Here is the html code for the horizontal drop down menu which you should copy into your webpage:
<div id="navMenu"> <ul>
<li> <a href="#">Products</a> <ul>
<li><a href="#">Wet Suit</a></li>
<li><a href="#">Vacuum Cleaner</a></li>
<li><a href="#">Pill Box</a></li>
<li><a href="#">Knee Socks</a></li>
<li><a href="#">Pirate Hat</a></li>
<li><a href="#">Kilt</a></li>
</ul> <!-- end inner UL -->
</li> <!-- end main LI -->
</ul> <!-- end main UL --> <br class="clearFloat" />
</div> <!-- end navMenu -->
Notice that an outer unordered list has been created and inside of this unordered list is a list item which will contain the top-level horizontal navigation link. In this case the name of the link is ‘products’ and it is inside of a null link.
Before the top level list item link tag has been closed (</li>), another unordered list had been created in side of it. Inside the inner unordered list are list item tags which make up the links for the drop down list menu.
The top level list item tag is now closed while maintaining the unordered list inside of it. It is very important that you use html comments along the way while hand coding so that you know where each unordered list ends and the other begins. There is a clear float html property included and attached after the list menu which will contain the floated elements and allow normal document flow to resume. Dropdown menu is then wrapped in a container div which is named ‘navMenu.’
2. Add the Dropdown Horizontal Menu CSS
Here are the CSS styles that make the horizontal css menu work:
#navMenu { margin:0; width:auto; } #navMenu ul { margin:0; padding:0; line-height:30px; } #navMenu li { margin:0; padding:0; list-style:none; float:left; position:relative; background:#999; } #navMenu ul li a { text-align:center; height:30px; width:150px; display:block; color:#000; font-family:"Comic Sans MS", cursive; text-decoration:none; color:#FFF; border:1px solid #FFF; text-shadow:1px 1px 1px #000; } /*********************************************/ /* hide menu and allow it to return */ /*********************************************/ #navMenu ul ul { position:absolute; visibility:hidden; top:32px; } #navMenu ul li:hover ul { visibility:visible; z-index:9999; } /**********************************************/ /*sets top level hover color*/ #navMenu li:hover { background:#09F; } /*sets link items hover color and background*/ #navMenu ul li:hover ul li a:hover { color:#000; background:#CCC; } /* Changes text color on hover for main menu hover*/ #navMenu a:hover { color:#000; } /* Contains the Float */ .clearFloat { clear:both; margin:0; padding:0; } /* IE7 Display Fix */ #navMenu ul li { display: inline; }
The drop down css styles first remove all of the default margins from the list tags and div tags being used. The list tag is then set to a position of relative and is used as a buffer for the unordered list which is set to a position of absolute.
The drop down menu css for the nested links is set to a position of hidden. The drop down css menu is then set to re-appear when a visitor hovers over the main link.
The drop down menu css for the nested links is set to a position of hidden. The drop down css menu is then set to re-appear when a visitor hovers over the main link and is achieved using a hover pseudo selector.
The horizontal css menu is then styled to suit the colors of your website. The css dropdown menu styles are then added with some complicated yet interesting css rollover menu effects. You should experiment with the color scheme of your css dropdown menu and by doing so you should be able to work out how the css rollover menu effects are being utilised with each selector present in the styles you have pasted into your css file.
If you have copied and pasted all of the html styles for the horizontal dropdown menu and the dropdown navigation as well as copied over the styles for the dropdown menu css, then you will have the exact same css dropdown menu that I have created in this web page.
To Add more columns and menu items for your drop down menu, simply copy and paste the html code again and change the menu item and the list items to the links that you desire for you website.
Any issues, then please leave a message in the comments box.