如何使用纯css实现下拉框?

fengjutian
  • 505

clipboard.png

使用css如何实现?

回复
阅读 3.2k
6 个回答

css的hover伪类、控制元素显示、层级控制好就能做到

二级导航 hover状态,对类的子元素设置display:block

css可以用hover伪类来实现,第二层级应该放在第一层级的的子元素。

鼠标hover到购物车所在的元素时,把列表显示出来,注意两者的层级即可

Naturally
  • 36

使用css中的伪类选择器可以实现:

 <!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>网页标题</title>
  <style>
        .tanchu{
            display:none;
        }
        .xuanfu:hover .tanchu{
            display:block;
        }
  </style>
 </head>
 <body>
        <ul>
            <li>登陆</li>
            <li>注册</li>
            <li>消息通知</li>
            <li class = "xuanfu">购物车
                <div class = "tanchu">购物车中还没有商品,赶紧选购吧!</div>
            </li>
        </ul>
 </body>
</html>
宣传栏