为了账号安全,请及时绑定邮箱和手机立即绑定

float: none;没有用。怎么回事?

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>CSS下拉菜单</title>

<style type="text/css">

    *{margin: 0px;padding:0px;}

#nav{width: 600px;height: 40px;background-color: #ccc;margin: 0 auto;}

#nav ul{list-style: none;}

#nav ul li{line-height: 40px;text-align: center;position: relative;float: left;}

#nav a{text-decoration: none;display: block;padding:0 40px;}

#nav a:hover{background-color:  #000;color: #fff;}

#nav ul li ul li{float: none;background-color: #eee;margin-top: 2px;color: #fff;}

</head>

<body>

<div id="nav">

           <ul>

                <li><a href="#">首页</a></li>

                <li><a href="#">官网</a></li>

                <ul>

  <li>官网</li>

  <li>官网</li>

  <li>官网</li>

  <li>官网</li>

            </ul>

                <li><a href="#">美食</a></li>

                <li><a href="#">靓仔</a></li>

                <li><a href="#">靓仔</a></li>

           </ul>

</div>

</body>

</html>


正在回答

2 回答

用display隐藏与显示

 ul li ul{width:90px; position:absolute; display:none }

 ul li:hover ul{display:block;}

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
形形色色的下拉菜单
  • 参与学习       107006    人
  • 解答问题       542    个

本教程从易到难,循循渐进,运用不同技术实现动态下拉菜单

进入课程

float: none;没有用。怎么回事?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信