设为首页收藏本站
桌面版

密通学院

 找回密码
 立即注册

QQ登录

只需一步，快速开始

关于我们
服务项目
注册会员
会员认证
在线充值
赞助我们
源码下载
建站素材
下载中心
最新资讯
联系我们
热线服务
会员认证
形象展示
服务项目
最新资讯
联系我们
热线服务
招商中心
今日资讯
新客户端
密通学院
在线客服
新浪微博
腾讯微博
微信关注
密通学院»密通学院 › 共享资源 › 代码下载 › 纯css下拉菜单
返回列表 发新帖
查看: 3097|回复: 0

纯css下拉菜单

[复制链接]
mt

282

主题

27

回帖

8万

铜板

超级版主

Rank: 8Rank: 8

积分
89153
QQ
发表于 2019-3-28 20:13:39 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
一个简单的纯css下拉菜单，具体美化可以自己来搞。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         *{
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  11.         ul,a{
  12.             font-size: 20px;
  13.             list-style: none;
  14.             text-decoration: none;
  15.             background-color: #3C3C3C;
  16.             color: #FFFFFF;
  17.             width: 100px;
  18.             text-align: center;
  19.             border: 0px solid black;
  20.             border-radius: 5px;
  21.             margin-top: 1px;
  22.         }
  23.         a{
  24.             display: block;
  25.         }

  27.         .plat{
  28.             display: none;
  29.         }
  30.         .nav{
  31.              float: left;
  32.              margin-left: 1px;
  33.          }
  34.         .nav:hover .plat{
  35.             display: block;
  36.             clear: both;
  37.         }
  38.         .plat li:hover>a{
  39.             background-color: dimgrey;
  40.         }
  41.     </style>
  42. </head>
  43. <body>
  44. <ul class="nav">
  45.     <a href="#">服装</a>
  46.     <ul class="plat">
  47.         <li><a href="#">衬衫</a></li>
  48.         <li><a href="#">棉袄</a></li>
  49.         <li><a href="#">裤衩</a></li>
  50.     </ul>
  51. </ul>
  52. <ul class="nav">
  53.     <a href="#">服装</a>
  54.     <ul class="plat">
  55.         <li><a href="#">衬衫</a></li>
  56.         <li><a href="#">棉袄</a></li>
  57.         <li><a href="#">裤衩</a></li>
  58.     </ul>
  59. </ul>
  60. <ul class="nav">
  61.     <a href="#">服装</a>
  62.     <ul class="plat">
  63.         <li><a href="#">衬衫</a></li>
  64.         <li><a href="#">棉袄</a></li>
  65.         <li><a href="#">裤衩</a></li>
  66.     </ul>
  67. </ul>
  68. </body>
  69. </html>
复制代码


如果您有业务需求，可以和我联系：
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

首页|Archiver|手机版|小黑屋|密通学院：专业网络营销服务商

GMT+8, 2024-12-22 13:23 , Processed in 0.096679 second(s), 25 queries QQ

Powered by XMT Inc. © 2015-2025 ArrayV1.0　豫ICP备17022382号

系统运营：密城通 豫公网安备 41018302000212 号

快速回复 返回顶部 返回列表