Day04-侧边栏实现

商城网页中通常有左侧的导航栏，实现产品导航，例如小米商城，今天来实现左侧导航。

html结构如下

    <div class="menu">
    <ul>
      <li><a href="#">手机</a></li>
      <li><a href="#">电视</a></li>
      <li><a href="#">笔记本 平板</a></li>
      <li><a href="#">家电</a></a></li>
      <li><a href="#">出行 穿戴</a></li>
      <li><a href="#">智能 路由器</a></li>
      <li><a href="#">电源</a></li>
      <li><a href="#">健康 儿童</a></li>
      <li><a href="#">耳机 音响</a></li>
      <li><a href="#">生活 箱包</a></li>
    </ul>
  </div>

css样式如下

    <style>
        body {
          background-image: linear-gradient(to right, #fad786, #c6ffdb);
        }
        .menu {
          width: 300px;
          background-color: rgba(255, 255, 255, 0.6);
          margin: 20px auto;
        }
        .menu ul {
          padding: 20px 0;
        }
        .menu ul li {
          height: 42px;
          line-height: 42px;
        }
        .menu ul li a {
          display: block;
          padding-left: 20px;
          /* text-indent: 2em; */
          color: #000;
          background-image: url(./images/right.png);
          background-repeat: no-repeat;
          background-position: 255px 11px;
        }
        .menu ul li a:hover {
          background-color: #ff6700;
          color: #fff;
        }
    </style>
    

效果如下