Hot For Coding
一个纯CSS实现的分类菜单

动手写了一个纯CSS的分类菜单,貌似还挺好用,可惜就没有添加动态效果了

full

点这里看Demo

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>分类菜单</title>
    <style type="text/css">
      * {
        margin: 0; 
        padding: 0;
      }

      body {
        font: 14px/1.5 "宋体";
      }

      a {
        text-decoration: none; 
      }

      a:hover {
        color: red; 
      }

      ul {
        position: relative; 
        margin: 50px 0 0 50px;
        width: 300px;
        border: 2px solid #aa9900;
      }

      li {
        height: 30px; 
        line-height: 30px;
        width: 100%;
        text-indent: 1em;
        list-style: none;
        border-top: 1px solid #CCC;
      }

      li:hover,
      li:hover + li,
      li:first-child {
        border-top: none; 
        height: 31px;
        line-height: 31px;
      }

      div.box {
        width: 300px; 
        height: calc(100% + 2px);
        display: none;
        left: 300px;
        top: -2px;

        border: 1px solid #999;
        position: absolute;
        z-index: 1;

        background: #EEE;
      }

      div.item {
        position: relative; 
        width: 100%;
        height: 100%;
      }

      li:hover div.box {
        display: block;
      }

      li div.item span.link { 
        display: block;
        width: calc(100% - 1px);
        height: calc(100% - 2px);
        position: absolute;
        left: 0;
        top: 0;
        border-style: solid;
        border-color: #FFF;
        border-width: 1px 0 1px 1px;
        z-index: 2;
      }

      li:hover div.item span.link {
        border-color: #999;
        background: #EEE;
        width: 100%;
      }

      span.icon {
        position: absolute;
        right: 10px;
        top: 0;
        color: #999;
        font-weight: bold;
        font-family: serif;
      }

      li:hover a {
        color: #270; 
      }

    </style>
  </head>
  <body>
    <ul>
      <li>
        <div class="item">
          <span class="link">
            <a href="#">分类1</a> 
          </span>
          <span class="icon">&gt;</span>
        </div>
        <div class="box">分类1 详细信息</div>
      </li> 

      <li>
        <div class="item">
          <span class="link">
            <a href="#">分类2</a> 
          </span>
          <span class="icon">&gt;</span>
        </div>
        <div class="box">分类2 详细信息</div>
      </li> 

      <li>
        <div class="item">
          <span class="link">
            <a href="#">分类3</a> 
          </span>
          <span class="icon">&gt;</span>
        </div>
        <div class="box">分类3 详细信息</div>
      </li> 

      <li>
        <div class="item">
          <span class="link">
            <a href="#">分类4</a> 
          </span>
          <span class="icon">&gt;</span>
        </div>
        <div class="box">分类4 详细信息</div>
      </li> 

      <li>
        <div class="item">
          <span class="link">
            <a href="#">分类5</a> 
          </span>
          <span class="icon">&gt;</span>
        </div>
        <div class="box">分类5 详细信息</div>
      </li> 

      <li>
        <div class="item">
          <span class="link">
            <a href="#">分类6</a> 
          </span>
          <span class="icon">&gt;</span>
        </div>
        <div class="box">分类6 详细信息</div>
      </li> 

      <li>
        <div class="item">
          <span class="link">
            <a href="#">分类7</a> 
          </span>
          <span class="icon">&gt;</span>
        </div>
        <div class="box">分类7 详细信息</div>
      </li> 

      <li>
        <div class="item">
          <span class="link">
            <a href="#">分类8</a> 
          </span>
          <span class="icon">&gt;</span>
        </div>
        <div class="box">分类8 详细信息</div>
      </li> 

      <li>
        <div class="item">
          <span class="link">
            <a href="#">分类9</a> 
          </span>
          <span class="icon">&gt;</span>
        </div>
        <div class="box">分类9 详细信息</div>
      </li> 
    </ul> 
  </body>
</html>

TITLE: 一个纯CSS实现的分类菜单

LINK: https://www.qttc.net/435_css_menus.html

NOTE: 转载本站文章请注明作者和出处