纯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. day4、Linux基础题目

    第一题 我想在/data/da 目录下面创建 一个 da.txt 文件 [root@ll ~]# cd /data/oldboyedu -bash: cd: /data/oldboyedu: No s ...

  2. 对datatable进行简单的操作

    筛选出datatable中c_level=1的数据 dataRow[] rows = dt.Select("c_level=0"); 克隆表dt的结构到表dt,并将dt的数据复制到 ...

  3. 来腾讯云开发者实验室 学习.NET Core 2.0

    腾讯云开发者实验室为开发者提供了一个零门槛的在线实验平台,开发者实验室提供的能力: 零门槛扫码即可免费领取实验机器,支持使用自有机器参与,实验完成后支持保留实验成果: 在线 WEB IDE 支持 sh ...

  4. 对deep learning的第一周调研

    下面仅是我的个人认识,说得不正确请轻拍. (眼下,我仅仅看了一些deep learning 的review和TOM Mitchell的书<machine learning>中的神经网络一章 ...

  5. VBScripts and UAC elevation（visa以后的系统）

    这两天由于工作须要.在写一些vbs的脚本,才知道.vbs不能像其它可运行文件一样.在 须要提升訪问权限时.弹出UAC窗体.那么,怎样通过UAC提升vbs脚本的訪问权限呢? 查了一些资料,将结果整理一下 ...

  6. Android多线程研究（2）——定时器

    先来看一段代码: public static void main(String[] args) { new Timer().schedule(new TimerTask() { @Override p ...

  7. jquery通过数值改变球大小

    在业务中遇到一个问题:在页面上显示一个球.且球的大小会应数字的大小而改变. 我们都知道 js是能够画圆(用css样式准备一个圆.假设addClass),但这并非我们想要的. 于是笔者脑洞打开:用样式画 ...

  8. 详解Office Add-in 清单文件

    作者:陈希章 发表于2017年12月8日 前言 我们都知道,一个Office Add-in,最主要是由两个部分组成的:清单文件(manifest)和真正要用来执行的网站. 清单文件其实是一个标准的XM ...

  9. Microsoft Graph Web应用程序极致开发体验

    作者:陈希章 重写于 2017年5月24日 前言 这篇文章最早写于2017年5月2日,当时的想法是从最简单的方式来写如何在一个ASP.NET MVC应用程序中集成Microsoft Graph,但实际 ...

  10. dotnetcore 自动迁移工具

    费心思做了一个简单的dotnetcore迁移工具,欢迎大家使用和交流 工具所做的工作: 查找所有输入目录的子目录和上级目录,获取包含*.sln的项目集合,可批量迁移. 替换*.sln文件中的*.csp ...