Dreamweaver Tutorials back to dreamweaver tutorials home pagee contact form tutorial page
A value is required.Invalid format.A value is required.Invalid format.
Social Networks Follow Us on Twitter Our YouTube.com Channel Facebook Page

Drop Down CSS Horizontal Menu - Dreamweaver Tutorial

Create a menu, a horizontal css dropdown menu to be exact. Drop down menus are derived from the original sucker fish JavaScript dropdown menus. This drop down menu in css is exactly the same but will load much quicker in a web browser and is good for your website visitors and also good for your Google page rank! Part 2

Drop Down CSS Horizontal Menus

Here is the Drop Down css horizontal menu example that we will make in the Dreamweaver video tutorial:



1. The HTML Mark-Up for Drop Down Menu

Copy and Paste this HTML code for the CSS Drop Down Menu into your web page:


 <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 -->

The HTML code contains all of the HTML Mark up you will need to create a drop down menu. This code creates one html menu item so you will need to copy and paste the code in for every top level menu item. In other words, the code will make one horizontal menu item with a drop down menu of list items. The html mark up for the drop down menu also includes six list items but you can add or subtract the list items to suit your own drop down menus.

2. Add the Drop Down Menu CSS Styles

The CSS for the CSS dropdown menu looks complicated at first but if you practice this technique five or six times it will become like second nature. The Horizontal menu has a css hover effect which is obtained by using css to tell the list items to remain hidden. The list items are then called back using the visibility attribute and only when your visitor hovers over the main menu item on the horizontal menu.

  #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; 
 }

  #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;     
 
 }   

CSS dropdown menus and particularly the Horizontal css dropdown menus are derived from the original suckerfish JavaScript menu. Dreamweaver has the capability to make a Spry drop down menu but the method uses a lot of code which in today’s browsers using up to date css capabilities is unnecessary mostly because the Spry dropdown menu takes longer to load than a dropdown menu in css. The spry menu also creates a lot of heavy code and clutters up your web pages. Many hobbyist webmasters will not know how to minify their JavaScript and so will be left with a slow loading web page and a lot of clutter in their html documents.

The CSS dropdown menu takes a particular center stage now that the W3C have announced that they will no longer be providing support for Internet Explorer 6. Users of IE6 will lose some of the background hover ability as IE6 only allows the use of the hover pseudo selector on the ‘a’ and not any other css selector. There is of course a hack to get around this but with only 7.9% of remaining IE6 users as of May 2010, and the fact that the users are mostly from non-English speaking countries, why bother to take the time to cater for these relics of the last decade?

blog comments powered by Disqus


Dreamweaver Website Templates

PHP Luxury Contact Form Tutorial


Great Premium Shopping Cart

Email Marketing - Recommended links

CSS Drop Down Menu - Dreamweaver

Floating Menu - Dreamweaver

Tabbed Navigation Menu

CSS Text Boxes in Dreamweaver

CSS 3 in Dreamweaver

J Query in Dreamweaver

Transparent Overlays Dreamweaver

CSS in Adobe Dreamweaver

All Types of Links In Dreamweaver

Positioning Elements in Dreamweaver

Unordered List Images Dreamweaver

Create an RSS Feed in Dreamweaver

Website Typography in Dreamweaver

Expanding Text Boxes - Dreamweaver

Make a Donation

Donate for Dreamweaver Tutorials

paypal