Creating a Drop-Down Navigation Bar: the CSS
Nav Bar: the CSS
The following is an example of how you would code your CSS to make the drop-down menu function.
Step 1: Creating the Main Navigation Buttons
The first CSS section will be used to format the way all the the NAV buttons in the list will look.
/* This section formats the navbar list buttons and text */
#navbar li {
display:block;
text-align:center;
width:100px;
background-color:orange;
border:2px solid black;
/* This section creates the rounded corners of the rectangle button */
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
/* This section creates the space around the text in the nav button */
padding:6px;
/* This section creates the space between the nav buttons */
margin:5px 4px 0px 4px;
text-decoration:none;
box-shadow:#111 0 2px 3px;
}
For simplicity I removed the CSS that creates a gradient, and only added a solid color to the background of the buttons.
Step 2: Creating the First level of Drop-Down Buttons
The CSS below will create the formatting of the first drop down NAV Buttons which we previously labeled "Email" and "Phone". This section will only activate once we hover over the "Contact Us" button in the Main Navigation section. Since we have already created the main button design, we will only need to add the features that will apply specifically to the next set of drop-down buttons in the list. That CSS will look something like this:
#navbar #mycontact li {
color:white;
background-color:green;
}
For simplicity I used a solid button color of green and used white text. This section will apply specifically to the navbar list that has the DIV id of "mycontact".
Step 3: Creating the Second Level of Drop-Down Buttons
The CSS below will create the formatting of the second drop-down NAV Buttons which will activate when we hover over the button labeled "Phone". This will cause the two buttons labeled "CEO" and "CFO" to appear. Since we have already created the main button design, we will only need to add the features that will apply specifically to this set of drop-down buttons in the list. That CSS will look something like this:
#navbar #myphone li {
background-color:red;
}
Step 4: Creating the Sections that allow the drop-down buttons to work properly.
Now that we have the buttons created, we will need to add the sections that will apply to the lists and allow them to function and drop down correctly. There are multiple CSS sections below because the buttons in different lists need to function differently. The CSS will look something like this:
/* This section causes the drop-down buttons to be hidden before hovering */
#navbar ul ul {
display:none;
}
/* This section causes the unordered list to be viewed when you hover over it */
#navbar li:hover > ul {
display:block;
}
/* This section causes the buttons to float horizontally next to each other instead of being aligned vertically */
#navbar ul li {
float:left;
}
/* This section removed the underlined links in the main nav buttons */
#navbar ul li a {
display: block;
text-decoration:none;
}
/* This section causes the text to be black when the list is being hovered upon */
#navbar ul li:hover a {
color:#f22;
}
/* This section creates a slight margin and no padding when the buttons are hovered over */
#navbarexample ul li:hover > ul {
margin:3px;
padding:0px;
}
/*This section makes the dropdown appear below the appropriate button */
#navbar ul li {
position:relative;
}
/* This section allows the button to be an individual size instead of resizing the previous buttons to fit it */
#navbar ul li ul {
position: absolute;
top:30px;
left:0px;
}