탐색 메뉴의 일반 사례

<title>导航栏的做法之一</title>
<style>
<span style="color: #008000;">/*<span style="color: #008000;">这是导航条***************************************************************************<span style="color: #008000;">*/
    <span style="color: #008000;">/*<span style="color: #008000;">容器是用来装那个存放了a标签的div<span style="color: #008000;">*/<span style="color: #000000;">
    .rongqi{
        background:#2C323B;
        height:55px;
        width:<span style="color: #800080;">100%<span style="color: #000000;">;
        margin:80px 0px;
    }
    <span style="color: #008000;">/*<span style="color: #008000;">导航条里面各个a标签的总宽度，当前是六个a的宽度，每个a宽度默认是200px<span style="color: #008000;">*/<span style="color: #000000;">
    #top{
        <span style="color: #008000;">//<span style="color: #008000;">border:solid #fff 1px;
<span style="color: #000000;">        margin:0px auto;
        width:1200px;
        height:55px;
        
    }
    <span style="color: #008000;">/*<span style="color: #008000;">hanghang是a标签的class<span style="color: #008000;">*/<span style="color: #000000;">
    .hanghang{
        font-<span style="color: #000000;">size:20px;
        color:#DDDDDD;
        text-<span style="color: #000000;">align:center;
        line-<span style="color: #000000;">height:50px;
        <span style="color: #0000ff;">float<span style="color: #000000;">:left;
        width:200px;
        height:55px;
        margin-<span style="color: #000000;">left:0px;
        list-style-<span style="color: #000000;">type:none;
        background:#2C323B;
        text-<span style="color: #000000;">decoration:none;
    }
    .hanghang:hover{
        list-style-<span style="color: #000000;">type:none;
        color:#ffffff;
        font-weight:<span style="color: #800080;">800<span style="color: #000000;">;
        background:#0C8ED9;
    }
<span style="color: #008000;">/*<span style="color: #008000;">****************************************************************************这是导航条/    
</style>


<!--这是导航条***************************************************************************-->
    <div class="rongqi">
        <div id="top">
            <a class="hanghang" href="#">首页</a>
            <a class="hanghang" href="#">导航1</a>
            <a class="hanghang" href="#">导航2</a>
            <a class="hanghang" href="#">导航3</a>
            <a class="hanghang" href="#">导航4</a>
            <a class="hanghang" href="#">导航5</a>
        </div>
    </div>
<!--***************************************************************************这是导航条-->