简单的纯css菜单

简介:
复制代码
<style>
ul {
    margin: 0px;
    padding: 0px;
}
ul li {
    float: left;
    display: inline;
    font: 0.9em Arial, Helvetica, sans-serif;
    height: 30px;
    width: 100px;
    list-style: none;
}
ul li a {
    color: #FFF;
    text-decoration: none;
    line-height: 29px;
    width: 91px;
    margin: 0px;
    padding: 0px 0px 0px 8px;
    display: block;
    border-right: solid 1px #ccc;
    border-bottom:solid 1px #ccc;
    background: #808080;
}
ul li ul li { height:25px; }
ul li ul li a {
    background: #666;
    line-height:24px;
}
ul li a:hover { background: #666; }
ul li ul { visibility: hidden; }
ul li:hover ul { visibility: visible; }
ul li ul li a:hover { background: #333; }
</style>


<ul>
  <li><a href="#">菜单一</a></li>
  <li><a href="#">菜单二</a>
    <ul>
      <li><a href="#">子菜单一</a></li>
      <li><a href="#">子菜单二</a></li>
      <li><a href="#">子菜单三</a></li>
    </ul>
  </li>
  <li><a href="#">菜单三</a></li>
  <li><a href="#">菜单四</a>
    <ul>
      <li><a href="#">子菜单一</a></li>
      <li><a href="#">子菜单二</a></li>
      <li><a href="#">子菜单三</a></li>
    </ul>
  </li>
  <li><a href="#">菜单五</a></li>
</ul>
复制代码
相关文章
|
2月前
|
前端开发
导航新风尚:CSS梯形设计,让网站菜单不再单调!
导航新风尚:CSS梯形设计,让网站菜单不再单调!
|
10月前
|
前端开发
HTML+CSS实现菜单的3D翻转特效
HTML+CSS实现菜单的3D翻转特效
|
JavaScript 前端开发
CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单
CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单
835 2
CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单
|
前端开发
CSS 等距菜单悬停效果
纯HTML和CSS实现立体等距菜单悬停,动态效果由CSS实现
CSS 等距菜单悬停效果
|
前端开发 JavaScript
CSS实现背景跟随滑动的按钮菜单效果
通过transition过渡属性,可以将相关css属性的变化,改为一个持续一段时间的连续过程,而不是使css样式的改变立即生效,其过程按照指定的曲线速率变化......
517 0
CSS实现背景跟随滑动的按钮菜单效果
|
前端开发 JavaScript 程序员
H5+css——JavaScript之隐藏式侧边栏菜单的实现
H5+css——JavaScript之隐藏式侧边栏菜单的实现
380 0
H5+css——JavaScript之隐藏式侧边栏菜单的实现
|
前端开发
HTMl+CSS制作二级菜单或二级导航栏
 二级菜单的实现思路为: 1.在默认状态下,使用display:none;将二级菜单隐藏。  2.当一级菜单中的列表标签li获取焦点(hover)后,使用display:blick;将二级菜单显示出来。  3.使用position: relative;和position: absolute;分别得一级菜单和二级菜单设置相对定位和绝对定位。
1198 0
HTMl+CSS制作二级菜单或二级导航栏
纯CSS3垂直动画菜单
在线演示 本地下载
1013 0
CSS3垂直图标菜单
在线演示 本地下载
840 0
CSS3 3D折叠展开动画菜单
在线演示 本地下载
1611 0