| The code is as follows: |
Copy code |
<Style type = "text/css">
. Demo-container
# Tabnav {background: # d5d5d5; border-bottom: 1px solid #333; padding-bottom: 3px; width: 510px; margin: 0 auto}
. Demo-container # tabnav ul {padding: 15px 0px 5px 0px; margin: 5px 0px 5px 0px; list-style: none; background: # f1f1f1; border-bottom: 1px solid #999; line-height: 120%}
. Demo-container # tabnav ul li {display: inline; margin-left: 10px}
. Demo-container # tabnav ul li a {background: # fff; padding: 5px 10px 5px 10px; border: 1px solid #999; line-height: normal}
. Demo-container # tabnav ul li a: hover {background: # ccc; color: #666}
. Demo-container # tabnav ul li
A. here {background: # d5d5d5; padding: 5px 10px 5px 10px; border-top: 1px solid #999; border-left: 1px solid #999; border-right: 1px solid #999; border-bottom: 1px solid # d5d5d5; color: # fff; font-weight: bold}
. Demo-container # tabnav ul li a. here: hover {background: # d5d5d5} </Style>
<Div id = "tabnav"> <Ul>
<Li> <
Href = "#"> homepage </a> </li> <
Href = "#" class = "here"> technical article </a> </li>
<Li> <a href = "#"> submit an article </a> </li> <
Href = "#"> Contact Us </a> </li> </ul>
</Div> |
The effect is as follows:
