纯CSS二级纵向菜单

<body>
<div class="divda">
<div class="nav">
<ul>
<li><a href="#">首页</a>
<ul>
<li><a href="#">sun min xiang</a>
</li>
<li><a href="#">sun min xiang</a>
</li>
<li><a href="#">sun min xiang</a>
</li>
<li><a href="#">sun min xiang</a>
</li>
<li><a href="#">sun min xiang</a>
</li>
<li><a href="#">sun min xiang</a>
</li>
<li><a href="#">sun min xiang</a>
</li>
<li><a href="#">sun min xiang</a>
</li>
<li><a href="#">sun min xiang</a>
</li>
</ul>
</li>
<li><a href="#">了解如何使用</a>
</li>
<li><a href="#">所有需求</a>
</li>
<li><a href="#">国际需求</a>
</li>
<li><a href="#">Play专区</a>
</li>
<li><a href="#">大赛频道</a>
<ul>
<li><a href="#">sun min xiang</a>
</li>
<li><a href="#">sun min xiang</a>
</li>
<li><a href="#">sun min xiang</a>
</li>
<li><a href="#">sun min xiang</a>
</li>
<li><a href="#">sun min xiang</a>
</li>
<li><a href="#">sun min xiang</a>
</li>
<li><a href="#">sun min xiang</a>
</li>
<li><a href="#">sun min xiang</a>
</li>
<li><a href="#">sun min xiang</a>
</li>
</ul>
</li>
<li><a href="#">语音需求</a>
<ul>
<li><a href="#">sun min xiang</a>
</li>
<li><a href="#">sun min xiang</a>
</li>
<li><a href="#">sun min xiang</a>
</li>
<li><a href="#">sun min xiang</a>
</li>
<li><a href="#">sun min xiang</a>
</li>
<li><a href="#">sun min xiang</a>
</li>
<li><a href="#">sun min xiang</a>
</li>
<li><a href="#">sun min xiang</a>
</li>
<li><a href="#">sun min xiang</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="xian">
</div>
</div>

=====================

@charset "utf-8";
/* CSS Document */

* {
margin: 0px auto;
padding: 0px;
font-size: 100%;
/* 所有文字的大小继承BODY里面设置的字体的大小 */

font: inherit;
/* 字体继承 */
}
ul,
li {
margin: 0px;
padding: 0px;
}
body {
font-size: 14px;
font-family: "微软雅黑";
color: #999;
text-align: center;
}
.divda {
width: 100%;
height: 55px;
}
.nav {
width: 1004px;
height: 50px;
}
.nav ul {
width: 1004px;
height: 50px;
list-style: none;
}
.nav ul ul {
visibility: hidden;
position: relative;
width: 118px;
}
.nav ul li:hover ul,
.nav ul a:hover ul {
visibility: visible;
}
.nav ul ul li {
clear: both;
text-align: center;
font-size: 14px;
margin: 0px;
padding: 0px;
padding-top: 3PX;
}
.nav ul ul li a {
display: block;
width: 118px;
border-bottom: 1px solid #0C0;
background-color: #003;
height: 20px;
filter: alpha(opacity=70);
background-color: rgba(0, 0, 0, 0.7);
}
.nav ul ul li a:hover {
background: #ff8a00;
border-bottom: 1px solid #F03;
}
.nav ul li {
width: 118px;
height: 40px;
float: left;
margin-top: 10px;
}
.nav ul li a {
padding: 10px 0 12px 0;
display: block;
}
.nav ul li a:link,
a:visited {
text-decoration: none;
color: #999;
}
.nav ul li a:hover {
background: #ff8a00;
color: #FFF;
}
.divda .xian {
width: 100%;
height: 5px;
background: #ff8a00;
}

==========================

摘自网络素材

纯CSS二级纵向菜单的更多相关文章

  1. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

  2. 支持多种浏览器的纯css下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. web中用纯CSS实现筛选菜单

    web中用纯CSS实现筛选菜单 本文我们来用纯css实现像淘宝宝贝筛选菜单那样的效果,例子虽然没有淘宝那样强大,不过原理差不多,如果花点心思也可以实现和淘宝一样的. 内容过滤是一个在Web上常见的一个 ...

  4. less可以做什么？less详解！(less嵌套选择器实现纯CSS二级导航)

    前端技术众多,作为一名前端工程师,我们每接触新技术首先要懂得此技术的优势和劣势,这是最基本的.往深入了说还需要懂得技术的应用场景,配合的技术等,方便为以后架构做准备.而less作为一门CSS预处理语言 ...

  5. 纯css制作三级菜单

    <!DOCTYPE html> <html> <head> <title>三级菜单</title> <meta charset=&qu ...

  6. 纯CSS弹出菜单（不支持IE6.0以下）

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  7. 纯css下拉菜单的制作

    通过观察下拉菜单的过程,发现有两种状态,一种是鼠标没有hover时,一种是鼠标hover时. 主菜单hover时,显示子菜单:主菜单没有hover时,不显示子菜单 <!DOCTYPE html& ...

  8. 23.1纯 CSS 创作一个菜单反色填充特效

    交互效果地址:https://scrimba.com/c/cEwREJs6 HTML代码: <nav> <ul> <li><span>Home</ ...

  9. 23.纯 CSS 创作一个菜单反色填充特效

    原文地址:https://segmentfault.com/a/1190000014876348 HTML代码: <nav> <ul> <li><span&g ...

随机推荐

  1. svn服务器的搭建与使用一

    转载出处 Subversion是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说. 首先来下载和搭建SVN服务器. 现在Subversion已经迁移到apache网站上了,下载地址: ht ...

  2. Java-----SSM（SpringMVC+Spring+mybaties）框架整合

    在进行整合之前,首先了解这个框架的作用 Mybaties: 丰富的标签库,可写动态sql,并统一的在.XML文件中编写,方便统一管理,解耦 SpringMVC: 标准的MVC思想(mode,view, ...

  3. pku 2488 A Knight&#39;s Journey （搜索 DFS）

    A Knight's Journey Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 28697   Accepted: 98 ...

  4. 機器學習基石 (Machine Learning Foundations) 作业1 Q15-17的C++实现

    大家好,我是Mac Jiang.今天和大家分享Coursera-台湾大学-機器學習基石 (Machine Learning Foundations) -作业1的Q15-17题的C++实现. 这部分作业 ...

  5. bmp文件格式中rgb555与rgb888之间的转换，24位与16位位图的转换

    今日,有同事问我.rgb555模式下的位图文件的格式问题,于是花了一下午的时间通过推測与測试,分析出了例如以下bmp文件在rgb555模式下的文件存储规律: 1:bmp文件的文件信息头中的biBitC ...

  6. Python笔记·第七章—— IO（文件）处理

    一.文件处理简介 计算机系统分为:计算机硬件,操作系统,应用程序三部分. 我们用python或其他语言编写的应用程序若想要把数据永久保存下来,必须要保存于硬盘中,这就涉及到应用程序要操作硬件,众所周知 ...

  7. Exception in thread "main" java.lang.NoClassDefFoundError: org/springframework/boot/context/embedded/ServletRegistrationBean

    异常信息 2017-09-02 18:06:37.223 [main] ERROR o.s.boot.SpringApplication - Application startup failed ja ...

  8. 【JMeter】if语句中不能Failure=false解决办法

    错误写法: if(roomId.matches("regEx")) Failure=false; else{ Failure=true; FailureMessage=" ...

  9. iOS实现类似QQ的好友列表，自由展开折叠（在原来TableView的基础上添加一个字典，一个Button）

    //直接代码 只包含 折叠展开字典的处理搭建#import "CFViewController.h" @interface CFViewController ()<UITab ...

  10. HTML+DIV+CSS+JSweb前端基础

    HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 (2 ...