Use CSS to create a simple drop-down menu navigation

Welcome to ximumu site. this tutorial will show you how to create a simple CSS drop-down menu. if you feel better, please tell a friend of yours to let him know the website. Mu will be very grateful. pai_^
First, let's write an HTML code for this drop-down menu. create a div as a container and put the navigation menu in the inner. as in the following code, we use an unordered list to create this navigation menu. in this navigation menu, there is a sub-menu under Portfolio, which is displayed in bold. Do not forget to close the last sentence </li> (you can see this: css tips-clear unnecessary labels to make the code more meaningful)

HTML code:

Copy to ClipboardReference: [www.bkjia.com] <div id = "nav">
<Ul>
<Li class = "borderleft"> <a href = "http://www.bkjia.com" target = "_ blank"> fire homepage </a> </li>
<Li> <a href = "http://www.bkjia.com" target = "_ blank"> webmaster Information </a>
<Ul>
<Li class = "top"> <a href = "http://www.bkjia.com" target = "_ blank"> manufacturer </a> </li>
<Li> <a href = "http://www.bkjia.com" target = "_ blank"> webmaster teahouse </a> </li>
<Li> <a href = "http://www.bkjia.com" target = "_ blank"> online </a> </li>
</Ul>
</Li>

<Li> <a href = "http://www.bkjia.com" target = "_ blank"> website Operations </a>
<Ul>
<Li class = "top"> <a href = "http://www.bkjia.com" target = "_ blank"> SEO optimization </a> </li>
<Li> <a href = "http://www.bkjia.com" target = "_ blank"> site creation experience </a> </li>
<Li> <a href = "http://www.bkjia.com" target = "_ blank"> Promotion planning </a> </li>
</Ul>
</Li>
<Li> <a href = "http://www.bkjia.com" target = "_ blank"> website design </a>
<Ul>
<Li class = "top"> <a href = "http://www.bkjia.com" target = "_ blank"> Web development </a> </li>
<Li> <a href = "http://www.bkjia.com" target = "_ blank"> image design </a> </li>
<Li> <a href = "http://www.bkjia.com" target = "_ blank"> cool site </a> </li>
</Ul>
</Li>
<Li> <a href = "http://bbs.bkjia.com" target = "_ blank"> webmaster Forum </a> </li>
</Ul>
</Div>

The css

First, we will set a style for # nav div, give it a width, height, font size, and remove the default unordered list style.

Copy to ClipboardReference: [www.bkjia.com] * {margin: 0px; padding: 0px ;}
# Nav {
Font-family: arial, sans-serif;
Position: relative;
Width: 390px;
Height: 56px;
Font-size: 14px;
Color: #999;
Margin: 0 auto;
}
# Nav ul {
List-style-type: none;
}

In this step, we set the left float for the entire navigation level for <li>, and set relative, note <li> as a parent element, so that we can use absolute positioning below.

Copy to ClipboardReference: [www.bkjia.com] # nav ul li {
Float: left
Position: relative;
}

In this step, we set a style for the <a> label and it looks like a button (div css tutorial-how to use css to create a shortcut-like navigation)

Copy to ClipboardReference: [www.bkjia.com] # nav ul li {
Text-align: center;
Border-right: 1px solid # e9e9e9;
Padding: 20px;
Display: block;
Text-decoration: none;
Color: #999;
}

The most important part

This section shows you how to display and hide the drop-down menu.

When the cursor is not moved to the drop-down menu of the WEB item, the menu is displayed when the cursor is moved to the WEB item. The display attribute is used to achieve this effect.

Copy to ClipboardReference: [www.bkjia.com] # nav ul li ul {
Display: none
}
# Nav ul li: hover ul {
Display: block;
Position: absolute;
}

Set the hover status style for the drop-down menu:

Copy to ClipboardReference: [www.bkjia.com] # nav ul li: hover ul li {
Display: block;
Background: #12 aeef;
Color: # ffffff;
Width: 110px;
Text-align: center;
Border-bottom: 1px solid # f2f2f2;
Border-right: none;
}
# Nav ul li: hover ul li a: hover {
Background: # 6dc7ec;
Color: # fff;
}

Complete CSS:

Copy to ClipboardReference: [www.bkjia.com] * {margin: 0px; padding: 0px ;}
# Nav {
Font-family: arial, sans-serif;
Position: relative;
Width: 390px;
Height: 56px;
Font-size: 14px;
Color: #999;
Margin: 0 auto;
}
# Nav ul {
List-style-type: none;
}
# Nav ul li {
Float: left;
Position: relative;
}
# Nav ul li {
Text-align: center;
Border-right: 1px solid # e9e9e9;
Padding: 20px;
Display: block;
Text-decoration: none;
Color: #999;
}
# Nav ul li ul {
Display: none
}
# Nav ul li: hover ul {
Display: block;
Position: absolute;
}
# Nav ul li: hover ul li {
Display: block;
Background: #12 aeef;
Color: # ffffff;
Width: 110px;
Text-align: center;
Border-bottom: 1px solid # f2f2f2;
Border-right: none;
}
# Nav ul li: hover ul li a: hover {
Background: # 6dc7ec;
Color: # fff;
}

Final effect:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "Xml: lang =" en "lang =" en "> 





Tip: the code can be modified before running!