使用jQuery实现横向导航菜单效果 美观的html横向导航条代码

导航条的制作HTML代码：

<nav>
　　<ul>
　　　　<li>
　　　　　　<a href="#"></a>
　　　　</li>
　　　　<li>
　　　　　　<a href="#"></a>
　　　　</li>
　　</ul>
</nav>

以上是导航条制作的基本格式，接下来是css样式

去除li带来的小黑点:

li{
                list-style: none;
            }

将nav设置一个合适的宽，高度由内容去撑开，只需要设置margin：auto将整个导航栏居中

将a标签的下划线去掉： text-decoration: none;

将导航条中<li>的内容设置样式：

.link li{
                float: left;  ————把内容左浮动，这样可以横向排列
                width: 100px;——设置每个li的宽
                height: 30px;——设置每个li的高
                background-color:pink  ——设置li的背景颜色为粉色
                border: 1px solid #6495ED; ——设置li的边框颜色以及边框大小
                text-align: center;——设置li中的文字样式为居中
                line-height: 30px;——设置li中文字举例上边框的高度
            }.link li:hover{     ————设置将鼠标放到li时的背景颜色
                background-color: aqua;
            }
  .link li:hover a{  ————设置将鼠标放到li中的a标签的内容时的文字颜色
                color: black;
                    }

 

最终特效是：