html css 导航 左右滑动效果代码,HTML+CSS/CSS3实现滑动下拉导航栏

HTML+CSS/CSS3实现滑动下拉导航栏

纯css实现的滑动下拉导航栏，超详细代码，以及实现中遇到的小问题

首先创建一个列表以及一些标签的全局样式

html代码

css代码

* {

margin: 0;

padding: 0;

}

a {

text-decoration: none;

color: black;

}

a:hover {

text-decoration: none;

}

li {

list-style-type: none;

}

初始效果图

2. 接下来给元素添加样式，让列表横向排列并且变得美观

.nav{

height: 50px;

width: 400px;

background-color: #0173DD;

}

.nav ul {

width: 100%;

height: 100%;

}

.nav ul li {

float: left;

width: 80px;

height: 100%;

text-align: center;

line-height: 50px;

margin-left: 10px;

}

.nav ul li a{

color: #fff;

}

效果图如下