HTML设计一个水平导航栏，完成水平导航栏下拉列表交互效果的实现。

HTML设计一个水平导航栏，简单的完成水平导航栏下拉列表交互效果的实现。

• • • (一）水平导航栏
    •   设计要求:
    •   CSS样式分析：

  hello，大家好！，学习之路一小步，如果有不严谨的问题请指出，我会积极学习的。

(一）水平导航栏

  设计要求:

（1）使用无序列表ul及嵌套的子列表ul做该导航菜单结构；
（2）使用浮动实现主菜单项的水平排列；
（3）使用:hover伪类选择器为主菜单项添加鼠标悬停效果（可自定义）；
（4）使用display 或 visibility 或opacity 属性隐藏子列表菜单；
（5）使用:hover伪类选择器添加鼠标悬停时显示子菜单效果；
（6）使用:hover伪类选择器添加鼠标悬停在子菜单选项时显示背景颜色和字体颜色改变效果；

CSS代码如下：：

<style>
      .menu ul{
		  margin:0;
		  padding:0;
	  }
      .menu {
		  width:1100px;
		  height:50px;
		  margin:0 auto;
		  border:1px  black solid;
		  background-color:#000099;
	  }
	  li {
		  list-style-type:none;
		  width:110px;
	  }
	  .menu >li{
		  float:left;
	  }
	  .menu li a{
		  display:block;
		  height:50px;
		  text-align:center;
		  line-height:50px;
		  text-decoration:none;
		  font-weight:bold;
		  color:#FFF;
	  }
	  ul li a{
		  margin:0;
		  padding:0;
		
	  }
	  .menu li ul li{
		  visibility:hidden;
		  background-color: #00F;
		  height:40px;
		
	  }
	  .menu ul li a{
		  font-size:14px;
		  font-weight:normal;
	  }
	  .menu>li:hover>a{
		  background-color:#000066;
		  color:red;
	  }
	  .menu>li:hover ul li{
		  visibility:visible;
	  }
	  .menu li ul li a:hover{
		  background-color:#2A40BD;
		  color:#9D4076;
	  }
		</style>  复制

HTML结构如下：：
  页面最外层结构如下：

  每个导航栏目内部结构如下：

  CSS样式分析：

（一）清楚默认样式

.menu ul{
		  margin:0;
		  padding:0;
	  }复制

 ul li a{
		  margin:0;
		  padding:0;
		
	  }复制

  首先将将菜单项中的无序列表样式的内外边距设置为0。这样做是为了避免了因为默认样式造成的问题，可以将这两个总和为一个，如下：

* {
     margin:0;
     padding:0;
     }
     复制

  设置所有元素的内外边距为0，以避免默认的边距影响布局。
（二）定义最外层ul的样式

.menu {
		  width:1100px;
		  height:50px;
		  margin:0 auto;
		  border:1px  black solid;
		  background-color:#000099;
	  }复制

   .menu{}是类选择器，创建一个类menu，也就是导航栏的样式：
我们定义一个宽度：1100px；（这里也可以设成100%）；高度：50px；水平居中；边距为1px的黑色实线边框；背景颜色为十六进制：000099的颜色；其中margin 属性用于设置元素的外边距，0 表示上下外边距为 0，auto 表示左右外边距自动调整以实现水平居中。
（三）定义li的样式

   li {
		  list-style-type:none;
		  width:110px;
	  }复制

  其中list-style-type:none;表示将li元素的列表标记样式设置为无，即去除各个列表前的项目符号；width:110px;是因为总长为1100px，我们有10个菜单，得以平分。（如果导航栏宽度设置为100%，则这里设置成10%。）
（四）让导航栏水平排列

.menu >li{
		  float:left;
	  }复制

  选择所有直接子元素为li的ul元素，也就是一级菜单为左浮动排列，可以让菜单都在网页的一整行，即水平排列，避免竖直排列。
（五）定义菜单栏的a的样式

.menu li a{
   	  display:block;
   	  height:50px;
   	  text-align:center;
   	  line-height:50px;
   	  text-decoration:none;
   	  font-weight:bold;
   	  color:#FFF;
     }复制

  定义menu类元素下的 li 元素的a元素，display:block;将a转化为块级元素。text-align:center;控制文字水平居中。line-height:50px;控制文字垂直居中。text-decoration:none;去除文字下划线；font-weight:bold;字体加粗。
（六）定义下拉菜单的样式并先隐藏

.menu li ul li{
		  visibility:hidden;
		  background-color: #00F;
		  height:40px;
	  }复制

  这里选择所有直接子元素为li的ul元素的子元素，也就是二级菜单，visibility:hidden;作用是将二级菜单给隐藏起来。
其他隐藏方法有三种：
  display：none；display:block;
  opacity:0; opacity:1;
  visibility:hidden; visibility:visible;
小结如下：opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
  visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
  display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样
(七）定义下拉菜单中嵌套的a的样式

.menu ul li a{
		  font-size:14px;
		  font-weight:normal;
	  }复制

  设置字体重量为普通，字体大小为14px；
（八）鼠标经过导航栏，其嵌套的a改变属性

.menu>li:hover>a{
		  background-color:#000066;
		  color:red;
	  }复制

  当鼠标放到导航栏中，字体红色,背景颜色为十六进制：000066的颜色；
（九）鼠标经过导航栏，显示包含的下拉菜单

.menu>li:hover ul li{
		  visibility:visible;
	  }复制

  这样可以显示下拉菜单；.menu>li代表menu类元素的直接子元素li。
（十）鼠标经过下拉菜单中的超链接，改变样式。

.menu li ul li a:hover{
		  background-color:#2A40BD;
		  color:#9D4076;
	  }复制

  当鼠标移动到下拉菜单的选项时，对应的背景和字体颜色改变。

到此为止,效果已经实现。望大家多多支持，一起学习进步。