简单导航的实现

其实实现导航菜单有多方式，例如可以用table标签，但是现在流行的是div+css样式，今天就用div+css和标签<ul>来实现：

网页代码如下：

<div id="nav" class="auto">
        <ul>
            <li><a href="demo.html">首页</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">音乐</a></li>
            <li><a href="submit.html">提交站点</a></li>
        </ul>
    </div>

css样式代码：

#nav {
    height:50px;
    
}
#nav ul {
    margin:0 0 0 25px;
}
#nav ul li {
    float:left;
    margin:0 10px 0 0;
}
#nav ul li a {
    color:black;
    font-size:13px;
    font-weight:bold;
    display:block;
    width:103px;
    height:27px;
    text-align:center;
    line-height:27px;
    margin:10px 0 0 0;
}
#nav ul li a:hover {
    background:url(hover.png);
    color:#ffffff;
    text-decoration:none;

}

下面是效果图：