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

clipboard.png

使用css如何实现?

阅读 4.5k
6 个回答

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

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

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

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

使用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>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题