search

博客列表 >分类菜单啊

分类菜单啊

南鸢离梦的博客
南鸢离梦的博客原创
2019年11月14日 08:50:17622浏览
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>分类菜单</title>
  6.         <style type="text/css">
  7.             * {
  8.                 margin: 0; 
  9.                 padding: 0;
  10.             }
  12.             body {
  13.                 font:14px/1.5 "宋体";
  14.             }
  16.             a {
  17.                 text-decoration: none; 
  18.             }
  20.             a:hover {
  21.                 color: red; 
  22.             }
  24.             ul {
  25.                 position: relative; 
  26.                 margin: 50px 0 0 50px;
  27.                 width: 300px;
  28.                 border: 2px solid #aa9900;
  29.             }
  31.             li {
  32.                 height: 30px; 
  33.                 line-height: 30px;
  34.                 width: 100%;
  35.                 text-indent: 1em;
  36.                 list-style: none;
  38.                 border-top: 1px solid #CCC;
  39.             }
  41.             li:hover,
  42.             li:hover + li,
  43.             li:first-child {
  44.                 border-top: none; 
  45.                 height: 31px;
  46.                 line-height: 31px;
  47.             }
  49.             div.box {
  50.                 width: 300px; 
  51.                 height: calc(100% + 2px);
  52.                 display: none;
  53.                 left: 300px;
  54.                 top: -2px;
  56.                 border: 1px solid #999;
  57.                 position: absolute;
  58.                 z-index: 1;
  60.                 background: #EEE;
  61.             }
  63.             div.item {
  64.                 position: relative; 
  65.                 width: 100%;
  66.                 height: 100%;
  67.             }
  69.             li:hover div.box {
  70.                 display: block; 
  71.             }
  73.             li div.item span.link { 
  74.                 display: block;
  75.                 width: calc(100% - 1px);
  76.                 height: calc(100% - 2px);
  77.                 position: absolute;
  78.                 left: 0;
  79.                 top: 0;
  80.                 border-style: solid;
  81.                 border-color: #FFF;
  82.                 border-width: 1px 0 1px 1px;
  83.                 z-index: 2;
  84.             }
  86.             li:hover div.item span.link {
  87.                 border-color: #999;
  88.                 background: #EEE;
  89.                 width: 100%;
  90.             }
  92.             span.icon {
  93.                 position: absolute;
  94.                 right: 10px;
  95.                 top: 0;
  96.                 color: #999;
  97.                 font-weight: bold;
  98.                 font-family: serif;
  99.             }
  101.             li:hover a {
  102.                 color: #270; 
  103.             }
  105.         </style>
  106.     </head>
  107.     <body>
  108.         <ul>
  109.             <li>
  110.                 <div class="item">
  111.                     <span class="link">
  112.                         <a href="#">分类1</a> 
  113.                     </span>
  114.                     <span class="icon">&gt;</span>
  115.                 </div>
  116.                 <div class="box">分类1 详细信息</div>
  117.             </li> 
  119.             <li>
  120.                 <div class="item">
  121.                     <span class="link">
  122.                         <a href="#">分类2</a> 
  123.                     </span>
  124.                     <span class="icon">&gt;</span>
  125.                 </div>
  126.                 <div class="box">分类2 详细信息</div>
  127.             </li> 
  129.             <li>
  130.                 <div class="item">
  131.                     <span class="link">
  132.                         <a href="#">分类3</a> 
  133.                     </span>
  134.                     <span class="icon">&gt;</span>
  135.                 </div>
  136.                 <div class="box">分类3 详细信息</div>
  137.             </li> 
  139.             <li>
  140.                 <div class="item">
  141.                     <span class="link">
  142.                         <a href="#">分类4</a> 
  143.                     </span>
  144.                     <span class="icon">&gt;</span>
  145.                 </div>
  146.                 <div class="box">分类4 详细信息</div>
  147.             </li> 
  149.             <li>
  150.                 <div class="item">
  151.                     <span class="link">
  152.                         <a href="#">分类5</a> 
  153.                     </span>
  154.                     <span class="icon">&gt;</span>
  155.                 </div>
  156.                 <div class="box">分类5 详细信息</div>
  157.             </li> 
  159.             <li>
  160.                 <div class="item">
  161.                     <span class="link">
  162.                         <a href="#">分类6</a> 
  163.                     </span>
  164.                     <span class="icon">&gt;</span>
  165.                 </div>
  166.                 <div class="box">分类6 详细信息</div>
  167.             </li> 
  169.             <li>
  170.                 <div class="item">
  171.                     <span class="link">
  172.                         <a href="#">分类7</a> 
  173.                     </span>
  174.                     <span class="icon">&gt;</span>
  175.                 </div>
  176.                 <div class="box">分类7 详细信息</div>
  177.             </li> 
  179.             <li>
  180.                 <div class="item">
  181.                     <span class="link">
  182.                         <a href="#">分类8</a> 
  183.                     </span>
  184.                     <span class="icon">&gt;</span>
  185.                 </div>
  186.                 <div class="box">分类8 详细信息</div>
  187.             </li> 
  189.             <li>
  190.                 <div class="item">
  191.                     <span class="link">
  192.                         <a href="#">分类9</a> 
  193.                     </span>
  194.                     <span class="icon">&gt;</span>
  195.                 </div>
  196.                 <div class="box">分类9 详细信息</div>
  197.             </li> 
  198.         </ul> 
  199.     </body>
  200. </html>
上一条：PHP基础——PHP数组下一条：PHP数组的创建和遍历----PHP九期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多