The power of CSS3 makes it possible for us to create some robust navigation and drop-down menus that are useful across most browsers. In our previous segment of this tutorial, we set up our navigation bar HTML, added styles for the nav_menu list, a gradient background with a border, and a border radius, and then set margins, padding, and text alignment. We added hover effects to the menu list items, updated the font styling and hover effects for the font text, and wrapped up with adding in a down arrow image to indicate that there is more content under the headings. The navigation menu as we left it in the previous piece looks like this now, as displayed in Chrome 16.0.912.63 m:

Figure A

Click to enlarge.

Adding the drop-down menus

Most drop-down menus consist of nested unordered lists within a parent menu list; however, in this tutorial we will be assigning each drop down menu a separate container using the HTML5 <nav> element. The HTML navigation construct for the drop-down menus is displayed below.

<nav>
      <ul id="nav_menu">
            <li><a href="#" class="drop_down">Home</a>
                  <nav class="nav_drop_1_column">
                        <nav class="1_col">
                             <p>This is an example of one-column content</p>
                        </nav>
                  </nav>
            </li>
            <li><a href="#" class="drop_down">About</a>
                  <nav class="nav_drop_2_column">
                        <nav class="one_column">
                             <p>This is an example of content in the first column</p>
                        </nav>
                        <nav class="one_column">
                             <p>This is an example content in the second column</p>
                        </nav>
                  </nav>
            </li>
            <li><a href="#" class="drop_down">Blog</a>
                  <nav class="nav_drop_3_column">
                        <nav class="three_column">
                             <h1>Welcome to the blog!</h1>
                        </nav>
                        <nav class="one_column">
                             <p>By <em>Jane Doe</em> <br /> January 3, 2012</p>
                        </nav>
                        <nav class="two_column">
                             <h2><a href="#">Blog Title Goes Here</a></h2>
                        </nav>
                        <nav class="three_column">
                                      <img src="images/Image_01.gif" width="75" class="img_left imgshadow" alt="Sample thumbnail image" title="Sample thumbnail image" />
                             <p>Text of the the latest blog post here for all to enjoy your latest prose on all things blogging! </p>
                        </nav>
                  </nav>
            </li>
            <li><a href="#" class="drop_down">Products</a>
                  <nav class="nav_drop_4_column">
                        <nav class="four_column">
                             <h1>Our Products!</h1>
                             <h2>Select from the categories below</h2>
                        </nav>
                  <nav class="one_column"><a href="#"><h3>Kitchen</h3></a>
                        <ul>
                                      <li><a href="#">Counters</a></li>
                             <li><a href="#">Sinks</a></li>
                                   <li><a href="#">Flooring</a></li>
                                   <li><a href="#">Appliances</a></li>
                        </ul>
                  </nav>
                  <nav class="one_column"><a href="#"><h3>Dining</h3></a>
                              <ul>
                              <li><a href="#">Tables</a></li>
                                   <li><a href="#">Chairs</a></li>
                                   <li><a href="#">Coverings</a></li>
                                   <li><a href="#">Silverware</a></li>
                             </ul>
                  </nav>
                  <nav class="one_column"><a href="#"><h3>Living</h3></a>
                             <ul>
                                   <li><a href="#">Tables</a></li>
                             <li><a href="#">Chairs</a></li>
                                   <li><a href="#">Couches</a></li>
                                   <li><a href="#">Recliners</a></li>
                             </ul>
                  </nav>
                  <nav class="one_column"><a href="#"><h3>Bath</h3></a>
                             <ul>
                                   <li><a href="#">Storage</a></li>
                                   <li><a href="#">Counters</a></li>
                                   <li><a href="#">Mirrors</a></li>
                                   <li><a href="#">Tubs</a></li>
                             </ul>
                  </nav>
            </nav>
            </li>
            <li><a href="#" class="drop_down">Services</a></li>
            <li><a href="#" class="drop_down">Contact</a></li>
      </ul>
</nav>

Adding in drop-down menu columns

The styling for the drop-down menus are:

  • set for 1 to 5 column layouts with an absolute positioning and a negative left margin to hide them until needed
  • a 1px solid border with the exception of the top in the same fallback background color as the top navigation
  • a linear top to bottom gradient starting with HEX #EDF1F5 and finishing with HEX #778899.
  • the same rounded corners using border-radius of 7px for the right, bottom, and left sides
  • the top is left with no radius, as it will appear to be seamlessly attached to the top level navigation tab.
.nav_drop_1_column,
.nav_drop_2_column,
.nav_drop_3_column,
.nav_drop_4_column,
.nav_drop_5_column {
      margin:4px auto;
      position:absolute;
      left:-999em;
      text-align:left;
      padding:10px 5px 10px 5px;
      border:1px solid #3f4c6b;
      border-top:none;
      /* Gradient background */
      background: #EDF1F5;
      background: -moz-linear-gradient(top, #EDF1F5, #778899);
      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EDF1F5), to(#778899));
      background: -o-linear-gradient(top, #EDF1F5, #778899);
      background: -ms-linear-gradient(top, #EDF1F5, #778899);
      background: linear-gradient(top, #EDF1F5, #778899);
      /* Rounded Corners */
      -moz-border-radius: 0px 7px 7px 7px;
      -webkit-border-radius: 0px 7px 7px 7px;
      -o-border-radius: 0px 7px 7px 7px;
      -ms-border-radius: 0px 7px 7px 7px;
      border-radius: 0px 7px 7px 7px;
}

Now we need to set the width for each drop-down container, listed individually with each of the column drop-downs from one to five columns

.nav_drop_1_column {width: 120px;}

.nav_drop_2_column {width: 240px;}

.nav_drop_3_column {width: 380px;}

.nav_drop_4_column {width: 520px;}

.nav_drop_5_column {width: 660px;}

Now, to display the drop-down menus on mouse over we add the hover styling:

#nav_menu li:hover .nav_drop_1_column,
#nav_menu li:hover .nav_drop_2_column,
#nav_menu li:hover .nav_drop_3_column,
#nav_menu li:hover .nav_drop_4_column,
#nav_menu li:hover .nav_drop_5_column {
      left:-1px;
      top:auto;
}

The updated navigation with the two column drop-down menu is displayed in Chrome 16.0.912.63 m:

Figure B

Styling the column content

Next, we will add in the column styling for the drop-down menus, allowing separated content for each column within the drop-down menus.

 .one_column,
.two_column,
.three_column,
.four_column,
.five_column {
      display:inline;
      float: left;
      position: relative;
      margin-left: 5px;
      margin-right: 5px;
}
.one_column {width: 110px;}
.two_column {width: 230px;}
.three_column {width: 390px;}
.four_column {width: 510px;}
.five_column {width: 630px;}

This screen capture shows the four-column drop down menu in use as displayed in Chrome 16.0.912.63 m:

Figure C

Now we need to add in some final styling for the paragraphs and headings to get our content looking nice and neat.

#nav_menu p, #nav_menu h1, #nav_menu h2, #nav_menu h3, #nav_menu ul li {
      font-family:'Trebuchet MS', Helvetica, sans-serif;
      line-height:21px;
      font-size:12px;
      text-align:left;
      text-shadow: 1px 1px 2px #999999;
}
#nav_menu h1 {
      font-size:22px;
      font-weight:500;
      letter-spacing:-1px;
      margin:7px 0 14px 0;
}
#nav_menu h2 {
      font-size:20px;
      font-weight:400;
      letter-spacing:-1px;
      margin:7px 0 14px 0;
      padding-bottom:14px;
      border-bottom:1px solid #999999;
}
#nav_menu h3 {
      font-size:14px;
      margin:7px 0 14px 0;
      padding-bottom:7px;
      border-bottom:1px solid #777777;
}
#nav_menu p {
      line-height:18px;
      margin:0 0 10px 0;
}
.strong {
      font-weight:bold;
}
.italic {
      font-style:italic;
}
Then we will style the drop down menu listed links with a deep purple color HEX #500A91 and then with a light blue color HEX #001DFA on hover.
#nav_menu li:hover nav a {
      font-size:18px;
      color:#500A91;
}
#nav_menu li:hover nav a:hover {
      color:#001DFA;
}

Next we need to define separate styles for the drop-down menu lists to replace and override the styles from the navigation bar unordered lists.

#nav_menu li ul {
      list-style:none;
      padding:0;
      margin:5px 5px 14px 5px;
}
#nav_menu li ul li {
      line-height:26px;
      position:relative;
      text-shadow: 1px 1px 2px #999999;
      padding:0;
      margin:0px;
      float:none;
      text-align:left;
      width:130px;
}
#nav_menu li ul li:hover {
      background:none;
      border:none;
      padding:0;
      margin:0px
}

Next, we will add in some styling for images setting them with shadow and left float.

.imgshadow {
      background: #CCCCCC;
      padding: 4px;
      border: 2px solid #999999;
      margin-top:5 px;
      -moz-box-shadow: 0px 0px 6px #A8A7AB;
      -webkit-box-shadow: 0px 0px 6px #A8A7AB;
      -o-box-shadow: 0px 0px 6px #A8A7AB;
      -ms-box-shadow: 0px 0px 6px #A8A7AB;
      box-shadow: 0px 0px 6px #A8A7AB;
}
.img_left {
      width: auto;
      float: left;
      margin: 5px 5px 5px 5px;
}

Let’s take a look at the blog tab which utilizes the three column drop down menu now as displayed in Chrome 16.0.912.63 m:

Figure D

Next, we can add in some styling for highlighted content that would stand out within a separate background with rounded corners and a border.

#nav_menu li .shadow_box {
      background-color:#626262;
      color: #eeeeee;
      text-shadow: 1px 1px 2px #000;
      padding:4px 6px 4px 6px;
      -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
      -o-border-radius: 7px;
      -ms-border-radius: 7px;
    border-radius: 7px;
      -webkit-box-shadow:inset 0 0 4px #CCCCCC;
      -moz-box-shadow:inset 0 0 4px #CCCCCC;
      -o-box-shadow:inset 0 0 4px #CCCCCC;
      -ms-box-shadow:inset 0 0 4px #CCCCCC;
      box-shadow:inset 0 0 4px #CCCCCC;
}

And we will update the HTML a bit to utilize this style with the following code:

<li><a href="#" class="drop_down">About</a>
   <nav class="nav_drop_2_column">
      <nav class="one_column">
         <p class="shadow_box">This is an example of content in the first column with the shadow box class including a gray background and border!</p>
      </nav>
      <nav class="one_column">
         <p>This is an example content in the second column</p>
      </nav>
   </nav>
</li>

The resulting code for the two-column drop-down as displayed in Chrome 16.0.912.63 m:

Figure E

The navigation menu has been successfully tested and viewed in Chrome, Safari, and Firefox.

Figure F

Click to enlarge.

The final HTML and CSS is available for download. Unzip the file and view HTML in Google Chrome or Firefox.