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;
	  }

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

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