CSS横向菜单+下拉子菜单_显示

更好效果 ： 巴西unigui书送的demo.7z

从最初无CSS

<div id="navigation">
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">My Blog</a></li>
  <li><a href="#">Friends</a></li>
  <li><a href="#">Next Station</a></li>
  <li><a href="#">Contact Me</a></li>
</ul>
</div>

#navigation ul {
  list-style-type:none;/* 不显示项目符号 */
  margin:0px;
  padding:0px;
}

#navigation ul li{float:left;}  /*  水平横向显示*/

#navigation ul li a{   /* 区块显示 */
  display:block; 
  padding:3px 6px 3px 6px;
  text-decoration:none;
  border:1px solid #711515;
  margin:2px;
}

#navigation ul li a:link, #navigation ul li a:visited{   /* 菜单背景色 */
  background-color:#c11136;
  color:#FFFFFF;
}

#navigation ul li a:hover{/* 鼠标经过时 */
  background-color: blue;/* 改变背景色 */
  color:#ffff00;/* 改变文字颜色 */
}

 完整代码

<style>
#navigation ul {
  list-style-type:none;/* 不显示项目符号 */
  margin:0px;
  padding:0px;
}
#navigation ul li{float:left;}  /*  水平横向显示*/

#navigation ul li a{   /* 区块显示 */
  display:block; 
  padding:3px 6px 3px 6px;
  text-decoration:none;
  border:1px solid #711515;
  margin:2px;
}

#navigation ul li a:link, #navigation ul li a:visited{   /* 菜单背景色 */
  background-color:#c11136;
  color:#FFFFFF;
}

#navigation ul li a:hover{/* 鼠标经过时 */
  background-color: blue;/* 改变背景色 */
  color:#ffff00;/* 改变文字颜色 */
}
</style>

<div id="navigation">
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">My Blog</a></li>
  <li><a href="#">Friends</a></li>
  <li><a href="#">Next Station</a></li>
  <li><a href="#">Contact Me</a></li>
</ul>
</div>

 添加下拉子菜单

<style>
.dropdown {
  position: relative;       /* 相对定位作为定位基准 ‌
  display: inline-block;    /* 行内块保持布局紧凑 ‌
  padding:3px 6px 3px 6px;
  text-decoration:none;
  border:1px solid #711515;
  margin:2px;
  text-align:center;
}
.dropdown-content {
  max-height: 0;           /* 初始高度为0实现折叠 ‌
  overflow: hidden;        /* 隐藏溢出内容 ‌
  transition: max-height 0.25s; /* 添加过渡动画
}
.dropdown:hover .dropdown-content {
  max-height: 200px;       /* 悬停时展开内容区域 ‌*/
}
#navigation ul {
  list-style-type:none;/* 不显示项目符号 */
  margin:0px;
  padding:0px;
}
#navigation ul li{float:left;}  /*  水平横向显示*/

#navigation ul li a{   /* 区块显示 */
  display:block; 
  padding:3px 6px 3px 6px;
  text-decoration:none;
  border:1px solid #711515;
  margin:2px;
}

#navigation ul li a:link, #navigation ul li a:visited{   /* 菜单背景色 */
  background-color:#c11136;
  color:#FFFFFF;
}

#navigation ul li a:hover{/* 鼠标经过时 */
  background-color: blue;/* 改变背景色 */
  color:#ffff00;/* 改变文字颜色 */
}
</style> 
<div id="navigation">
<ul>
  <li> 
<div class="dropdown">
  <span style="color:red;">查看子菜单</span>
  <div class="dropdown-content">
    <a href="#">设置</a>
    <a href="#">收藏夹</a>
    <a href="#">历史记录</a>
  </div>
</div>
</li>
  <li>
<div class="dropdown">
  <span style="color:red;">子单</span>
  <div class="dropdown-content">
    <a href="#">设置</a>
    <a href="#">收藏夹</a>
    <a href="#">历史记录</a>
  </div>
</div>
</li>
  <li><a href="#">Friends</a></li>

</ul>
</div>