CSS下拉菜单简单制作方法介绍

来源：动视网责编：小OO 时间：2020-11-27 18:52:50

CSS下拉菜单简单制作方法介绍

<。<；/p>；<；p class="；dropdown"；>；<；span>；鼠标移动到我这。<；/span>；<；p class="；dropdown-content"；>；<；p>；Gxl网<；/p>；<；p>；www.gxlcms.com<；/p>；<；/p>；<；/p>；<；/body>；<；/html>；；相关文章。CSS 下拉菜单；CSS 下拉菜单详解。简单带下划线跟随效果的CSS3下拉菜单特效。

推荐度：

点击下载本文 文档为doc格式

导读<。<；/p>；<；p class="；dropdown"；>；<；span>；鼠标移动到我这。<；/span>；<；p class="；dropdown-content"；>；<；p>；Gxl网<；/p>；<；p>；www.gxlcms.com<；/p>；<；/p>；<；/p>；<；/body>；<；/html>；；相关文章。CSS 下拉菜单；CSS 下拉菜单详解。简单带下划线跟随效果的CSS3下拉菜单特效。

本文实例为大家分享了CSS下拉菜单的具体实现代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
<head>
 <title>下拉菜单实例</title>
 <meta charset="utf-8">
 <style>
 .dropdown { 
 position: relative; 
 display: inline-block; 
 } 
 .dropdown-content { 
 display: none; 
 position: absolute; 
 background-color: #f9f9f9; 
 min-width: 160px; 
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 padding: 12px 16px; 
 } 
 .dropdown:hover .dropdown-content { 
 display: block; 
 } 
 </style>
</head>
<body>
<h2>鼠标移动后出现下拉菜单</h2>
<p>将鼠标移动到指定元素上就能看到下拉菜单。</p>
<p class="dropdown">
 <span>鼠标移动到我这！</span>
 <p class="dropdown-content">
 <p>Gxl网</p>
 <p>www.gxlcms.com</p>
 </p>
</p>
</body>
</html>

QQ截图20170320115023.png