当前位置：首页 > 前端 >

html+css实现下拉菜单效果

时间：2024-05-22 20:41:42浏览：627 本站原创 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{ margin:0; padding:0;}
    ul,li{list-style: none;}
    .box{ width:600px; height:40px; margin:0 auto;}
    .box ul{ list-style:none;}
    .box ul li{ float:left; line-height:40px; text-align:center; position:relative;}
    .box ul li a{ text-decoration:none; color:#000; display:block;padding:0px 10px;}
    .box ul li a:hover{ color:#FFF; background:#333}
    .box ul li ul{ position:absolute; display:none;}
    .box ul li ul li{ float:none; line-height:30px; text-align:left;}
    .box ul li ul li a{ width:100%;}
    .box ul li ul li a:hover{ background-color:#06f;}
    .box ul li:hover ul{ display:block}
</style>
<body>
<div class="box">
    <ul>
        <li>
            <a href="javascript:void(0)">一级菜单</a>
            <ul class="ul">
                <li><a href="javascript:void(0)">二级菜单1</a></li>
                <li><a href="javascript:void(0)">二级菜单2</a></li>
                <li><a href="javascript:void(0)">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0)">一级菜单</a>
            <ul>
                <li><a href="javascript:void(0)">二级菜单1</a></li>
                <li><a href="javascript:void(0)">二级菜单2</a></li>
                <li><a href="javascript:void(0)">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0)">一级菜单</a>
            <ul>
                <li><a href="javascript:void(0)">二级菜单1</a></li>
                <li><a href="javascript:void(0)">二级菜单2</a></li>
                <li><a href="javascript:void(0)">二级菜单3</a></li>
            </ul>
        </li>
    </ul>
</div>


</body>


	</html>

效果：



上一篇：PHP正则（查询指定内容，以xx开头以xx结尾中的内容）
下一篇：PHP对接美团API接口 实现卡券核销功能

发表评论

昵称：  验证码：

关于博主

博主

博主：BlueCode

职业：web程序

简介：2002年开始一直从事Web制作，网站运营，会PHP+MYSQL ASP+MSSQL，微信开发

  • Linux文章
  • PHP文章
  • 随机文章