纯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. Python的集合

    1. Python的集合 1.1 集合的定义 在Python中, 集合set是基本数据类型的一种集合类型,它有可变集合(set())和不可变集合(frozenset)两种.Python中的集合set类 ...

  2. Ext表单验证

    //大家在很多的extjs代码中都看到了这两个,他们都起提示作用的Ext.QuickTips.init();//支持tips提示Ext.form.Field.prototype.msgTarget=' ...

  3. 对deep learning的第一周调研

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

  4. Spark Shuffle模块——Suffle Read过程分析

    在阅读本文之前.请先阅读Spark Sort Based Shuffle内存分析 Spark Shuffle Read调用栈例如以下: 1. org.apache.spark.rdd.Shuffled ...

  5. ASP.NET Core 使用 Hangfire 定时任务

    定时任务组件,除了 Hangfire 外,还有一个 Quarz.NET,不过 Hangfire .NET Core 支持的会更好些. ASP.NET Core 使用 Hangfire 很简单,首先,N ...

  6. MFC中应用对象的成员：窗口指针m_pMainWnd说明

    CVC_MFC_firstDlg dlg; //定义对话框对象m_pMainWnd = &dlg;  //这个定义的对话框 dlg 成为主窗口 应用程序对象成员变量m_pMainWnd是一个窗 ...

  7. Material使用07 MatGridListModule的使用

    1 MatGridListModule简介 对相似数据的展现,尤其是像是图片的展示 使用起来很像表格 官方文档:点击前往 2 MatGridListModule提供的指令 2.1 mat-grid-l ...

  8. 移动端下拉刷新上拉加载-mescroll.js插件

    最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...

  9. 58、js扩展

    作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理. 一.js的作用域 任何程序设计语言都有作用域的概念,简单的说,作用 ...

  10. iOS UI特效

    1.iOS特效 a.对应APP中的基本动作分三类: 1.指向性动效(滑动,弹出等) 2.提示性动效(滑动删除,下拉刷新等) 3.空间扩展(翻动,放大等) b.这类动效在设计过程中需要主意几点: 1.系 ...