鼠标放上后 会自动显示下级目录,这种用html可以实现吗?

发布网友 发布时间：2022-05-14 02:23

我来回答

共5个回答

懂视网 时间：2022-05-14 06:44

废话不多说了，直接大家贴代码了，具体代码如下所示；

*{
  margin: 0;
  padding: 0;
  }
  ul,li{
  list-style: none;
  }
  .ui-slide-box{
  width: 300px;
  }
  .ui-slide-item{
  width: 100%;
  position: relative;
  }
  .ui-slide-item-text{
  display: block;
  background-color: #000000;
  color: white;
  border-bottom: 1px solid yellow;
  height: 40px;
  line-height: 40px;
  }
  .ui-slide-item .ui-slide-box{
  display: none;
  position: absolute;
  left: 300px;
  top: 0;
  }
  .ui-slide-item:hover > .ui-slide-box{
  display: block;
  }

<ul class="ui-slide-box">
  <li class="ui-slide-item">
  <span class="ui-slide-item-text">aaaaaaaaaaaaa</span>
  <ul class="ui-slide-box">
   <li class="ui-slide-item">
   <span class="ui-slide-item-text">aaaaaaaaaaaa</span>
   <ul class="ui-slide-box">
    <li class="ui-slide-item">
    <span class="ui-slide-item-text">dddddddd </span>
    </li>
    <li class="ui-slide-item">
    <span class="ui-slide-item-text">sssssssssssss</span>
    </li>
    <li class="ui-slide-item">
    <span class="ui-slide-item-text">eeeeeeeeeeee</span>
    </li>
    <li class="ui-slide-item">
    <span class="ui-slide-item-text">ccccccccccccc</span>
    <ul class="ui-slide-box">
     <li class="ui-slide-item">
     <span class="ui-slide-item-text">aaaaaaaaaaaaa</span>
     <ul class="ui-slide-box">
      <li class="ui-slide-item">
      <span class="ui-slide-item-text">aaaaaaaaaaaa</span>
      <ul class="ui-slide-box">
       <li class="ui-slide-item">
       <span class="ui-slide-item-text">dddddddd </span>
       </li>
       <li class="ui-slide-item">
       <span class="ui-slide-item-text">sssssssssssss</span>
       </li>
       <li class="ui-slide-item">
       <span class="ui-slide-item-text">eeeeeeeeeeee</span>
       </li>
       <li class="ui-slide-item">
       <span class="ui-slide-item-text">ccccccccccccc</span>
       </li>
      </ul>
      </li>
      
      <li class="ui-slide-item">
      <span class="ui-slide-item-text">bbbbbbbbbb</span>
      <ul class="ui-slide-box">
       <li class="ui-slide-item">
       <span class="ui-slide-item-text">sfsdfsdfsd </span>
       </li>
       <li class="ui-slide-item">
       <span class="ui-slide-item-text">cvwdfsd</span>
       </li>
       <li class="ui-slide-item">
       <span class="ui-slide-item-text">ewewewe</span>
       </li>
       <li class="ui-slide-item">
       <span class="ui-slide-item-text">xxcxc</span>
       </li>
      </ul>
      </li>
     </ul>
     </li>
    </ul>
    </li>
   </ul>
   </li>
   
   <li class="ui-slide-item">
   <span class="ui-slide-item-text">bbbbbbbbbb</span>
   <ul class="ui-slide-box">
    <li class="ui-slide-item">
    <span class="ui-slide-item-text">sfsdfsdfsd </span>
    </li>
    <li class="ui-slide-item">
    <span class="ui-slide-item-text">cvwdfsd</span>
    </li>
    <li class="ui-slide-item">
    <span class="ui-slide-item-text">ewewewe</span>
    </li>
    <li class="ui-slide-item">
    <span class="ui-slide-item-text">xxcxc</span>
    </li>
   </ul>
   </li>
  </ul>
  </li>
  <li class="ui-slide-item">
  <span class="ui-slide-item-text">bbbbbbbbbbb</span>
  <ul class="ui-slide-box">
   <li class="ui-slide-item">
   <span class="ui-slide-item-text">aaaaaaaaaaaa</span>
   <ul class="ui-slide-box">
    <li class="ui-slide-item">
    <span class="ui-slide-item-text">dddddddd </span>
    </li>
    <li class="ui-slide-item">
    <span class="ui-slide-item-text">sssssssssssss</span>
    </li>
    <li class="ui-slide-item">
    <span class="ui-slide-item-text">eeeeeeeeeeee</span>
    </li>
    <li class="ui-slide-item">
    <span class="ui-slide-item-text">ccccccccccccc</span>
    </li>
   </ul>
   </li>
  </ul>
  </li>
  <li class="ui-slide-item">
  <span class="ui-slide-item-text">cccccccccccccccccc</span>
  <ul class="ui-slide-box">
   <li class="ui-slide-item">
   <span class="ui-slide-item-text">rrrrrrrrrrrrrrrrrrrrrrrrrr</span>
   <ul class="ui-slide-box">
    <li class="ui-slide-item">
    <span class="ui-slide-item-text">dddddddd </span>
    </li>
    <li class="ui-slide-item">
    <span class="ui-slide-item-text">sssssssssssss</span>
    </li>
    <li class="ui-slide-item">
    <span class="ui-slide-item-text">eeeeeeeeeeee</span>
    </li>
    <li class="ui-slide-item">
    <span class="ui-slide-item-text">ccccccccccccc</span>
    </li>
   </ul>
   </li>
  </ul>
  </li>
 </ul>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

css3的pointer-events使用详解

完全利用CSS实现元素居中

font-size-adjust属性如何优化网页排版

热心网友 时间：2022-05-14 03:52

热心网友 时间：2022-05-14 05:10

热心网友 时间：2022-05-14 06:45

热心网友 时间：2022-05-14 08:36