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

如何实现下拉菜单的对其呢

如何实现下拉菜单的水平居中


正在回答

2 回答

<style>
*{margin:0; padding:0;}
.menu{ width:600px; height:40px; margin:0 auto; background:#CCC;}
.menu ul{ list-style:none;}
.menu ul li{ float:left; line-height:40px; height:40px; text-align:center; position:relative;}
.menu ul li a{ text-decoration:none;  display:block; padding:0px 10px;  color:#000;}
.menu ul li a:hover{ color:#FFF; background:#999;}
.menu ul li ul li{ float:none; background:#F00; margin-top:1px; text-align:center;}
.menu ul li ul{ position:absolute; left:0px; top:40px; display:none;}
.menu ul li ul li a:hover{ background:#00C;}
.menu ul li:hover ul{ display:block;}
</style>
</head>

<body>
    <div class="menu">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">公司简介</a>
                <ul>
                    <li><a href="#">javascript</a></li>
                    <li><a href="#">jquery</a></li>
                </ul>
            </li>
            <li><a href="#">产品展示</a></li>
            <li><a href="#">商品</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>
</body>
</html>

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

text-align:center
margin:0 auto

position:absolute

left:50%

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

举报

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

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

进入课程

如何实现下拉菜单的对其呢

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