Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 分类菜单啊
Blogger Information
Blog 55
fans 0
comment 0
visits 58994
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
分类菜单啊
南鸢离梦的博客
Original
623 people have browsed it
  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>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post