The effect is as follows:
| The code is as follows: |
Copy code |
<Style type = "text/css">
# Navsite {
Font-family: Verdana, Helvetica, Arial, sans-serif;
Font-size: 0.7em;
Font-weight: bold;
Width: 12em;
Border-right: 1px solid #666;
Padding: 0;
Margin-bottom: 1em;
Background-color: # 9cc;
Color: #333;
}
# Navsite ul {
List-style: none;
Margin: 0;
Padding: 0;
}
# Navsite ul li {
Margin: 0;
Border-top: 1px solid #003;
}
# Navsite ul li {
Display: block;
Padding: 2px 2px 2px 0.5em;
Border-left: 10px solid #369;
Border-right: 1px solid # 69c;
Border-bottom: 1px solid #369;
Background-color: #036;
Color: # fff;
Text-decoration: none;
Width: 100%;
}
Html> body # navsite ul li {
Width: auto;
}
# Navsite ul li a: hover {
Border-left: 10px solid #036;
Border-right: 1px solid # 69c;
Border-bottom: 1px solid #369;
Background-color: # 69f;
Color: # fff;
}
</Style> Html <Div id = "navsite">
<Ul>
<Li> <a href = "http://www.111cn.net"> home </a> </li>
<Li> <a href = "http://www.111cn.net"> technical article </a> </li>
<Li> <a href = "http://www.111cn.net"> Contact Us </a> </li>
<Li> <a href = "http://www.111cn.net"> submit an article </a> </li>
<Li> <a href = "http://www.111cn.net"> good theme </a> </li>
</Ul>
</Div> |
