<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

		ul{position: relative;list-style-type: none;padding: 0;margin:0; position: relative; }

		.nav{width: 180px;overflow: hidden;float: left;}

		li.nav-title{padding:8px;color: white;text-align: center;font-size: 14px;background: gray;border-right: 1px solid black;border-bottom: 1px solid gray;}

		li.nav-title:hover{background: blue;}

		ul.two-nav{display:none;width: 60%;overflow: auto; z-index: 1;left: 30px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}

		ul.two-nav li{padding:18px;margin:5px;color: white;text-align: center;font-size: 14px;background: #98e7e6;border-radius: 20px;}

		.nav:hover .two-nav {display: block;}

		.nav:hover .two-nav li:hover {background: cyan;}

​

	</style>

</head>

<body>

	<ul class="nav">

		<li class="nav-title">前端</li>

		<ul class="two-nav">

			<li class="nav-content">html</li>

			<li class="nav-content">css</li>

			<li class="nav-content">js</li>

			<li class="nav-content">sass</li>

			<li class="nav-content">less</li>

		</ul>

	</ul>

	<ul class="nav">

		<li class="nav-title">后端</li>

		<ul class="two-nav">

			<li class="nav-content">mysql</li>

			<li class="nav-content">php</li>

			<li class="nav-content">reids</li>

			<li class="nav-content">java</li>

			<li class="nav-content">python</li>

		</ul>

	</ul>

	<ul class="nav">

		<li class="nav-title">后端</li>

		<ul class="two-nav">

				<li class="nav-content">mysql</li>

				<li class="nav-content">php</li>

				<li class="nav-content">reids</li>

				<li class="nav-content">java</li>

				<li class="nav-content">python</li>

		</ul>

	</ul>

	<ul class="nav">

		<li class="nav-title">后端</li>

		<ul class="two-nav">

				<li class="nav-content">mysql</li>

				<li class="nav-content">php</li>

				<li class="nav-content">reids</li>

				<li class="nav-content">java</li>

				<li class="nav-content">python</li>

		</ul>

	</ul>

</body>

</html>

　　

实例解析

HTML 部分：

我们可以使用任何的 HTML 元素来打开下拉菜单，如：<span>, 或 a <button> 元素。

使用容器元素 (如： <div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。

使用 <div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。

CSS 部分：

.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。

.dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。 注意 min-width 的值设置为 160px。你可以随意修改它。 注意: 如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。

我们使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。

:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

下拉菜单css的更多相关文章

  1. 纯CSS实现二级导航下拉菜单--css的简单应用

    思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...

  2. 下拉菜单  - - css

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. CSS技巧分享：如何用css制作横排二级下拉菜单

    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...

  4. 基于CSS3金属风格下拉菜单

    基于CSS3金属风格下拉菜单,css,金属风格,下拉菜单,CSS3导航. css3按钮:http://www.huiyi8.com/css3/anniu/

  5. 超简洁的CSS下拉菜单

    效果体验:http://hovertree.com/texiao/css/3.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http ...

  6. 纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）

    虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...

  7. CSS 实现样式下拉菜单

    下拉菜单的实现 脚本: <script type="text/javascript"> function ShowSub(li) { ]; ; subMenu.styl ...

  8. jq+css+html简单实现导航下拉菜单

    相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了,直接上code. Html部分 <div class="_nav"> <ul id=&qu ...

  9. 形行色色的下拉菜单（HTML/CSS JS方法 jQuery方法实现）

    HTML/CSS方法实现下拉菜单来源:慕课网<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

随机推荐

  1. 关于 DotNetCore 的自定义权限管理

    1.自定义权限需要扩展 Microsoft.AspNetCore.Authentication 实现一套接口 IAuthenticationHandler, IAuthenticationSignIn ...

  2. springmvc配置之mvc:annotation-driven

    为了简化springmvc配置,spring同时引入了mvc namespace, 配置了 <mvc:annotation-driven/> spring会默认注册a RequestMap ...

  3. java面试经常问到的计算机网络问题

    GET 和 POST 的区别 GET请注意,查询字符串(名称/值对)是在 GET 请求的 URL 中发送的:/test/demo_form.asp?name1=value1&name2=val ...

  4. 通过宝塔webhook，实现git自动拉取服务器代码

    1.宝塔安装webhook,添加一条记录,脚本内容为: #!/bin/bash echo "" #输出当前时间 date --date='0 days ago' "+%Y ...

  5. MyPython

    目录 Python,那些不可不知的事儿 Python简介 Python环境搭建 从Hello World开始 Python中的数据类型 函数 模块 面向对象 More Python,那些不可不知的事儿 ...

  6. HDU 1074 Doing Homework【状压DP】

    Doing Homework Problem Description Ignatius has just come back school from the 30th ACM/ICPC. Now he ...

  7. 好玩图像pil处理

    pil库的学习总结 #__author:'lwq'#date: 2018/11/15 from PIL import Image,ImageFilter,ImageDraw,ImageFont ### ...

  8. mysql基础篇（上篇）

    一.数据库 1.数据库介绍 2.RDBMS专业术语 3.MySQL数据库 4.常用数据库命令 1.数据库介绍 :什么是数据库 数据库就是按照数据结构来组织.存储和管理数据的仓库. 我们常常讲的数据库往 ...

  9. 小程序之带参数跳转到tab页

    wx.switchTab({ url: '../../message/message/message', }) //wx.switchTab url不能带参数 解决方法⬇️ (紫色表示非固定需要自己更 ...

  10. 承接VR外包，虚拟现实外包，北京正规公司

    我们制作各类型VR全景虚拟现实,增强现实视频制作.录制等项目.品质保证,售后完备,可签合同.contectus: 13911652504(技术经理tommy) 承揽VR外包 虚拟现实外包 U3D外包( ...