纯css实现下拉菜单

标签：

遇到一个别人写的源代码，非常简洁，存档留念

https://www.servage.net/blog/2009/03/20/create-a-cool-css-based-drop-down-menu/

因为工作需求我稍微的修改了一下，将其转换成第一级导航栏竖排显示的效果：

ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: block;
  position: relative;
}
li ul { display: none;margin-left:154px;margin-top:-37px;height:36px;}
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  background: #939fba;
  white-space: nowrap;
  width:153px;
  height:36px;
  text-align:center;
  line-height:36px;
}
li a:hover { background: #0065c4; }
li:hover ul {
  display: block;
  position: absolute;
}
li:hover li {
  float: none;
  font-size: 14px;
}
li:hover a { background: #939fba;width:auto;padding-left:10px;padding-right:10px;}
li:hover li a:hover { background: #0065c4; }

——————效果如下图————————

纯css实现下拉菜单

标签：

原文地址：http://www.cnblogs.com/himurotatsuya/p/4629763.html