返回css下拉菜单...登陆

css下拉菜单

小毛2019-06-15 12:03:2130
摘要:
运用display属性设置下拉菜单

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        *{margin: 0;padding: 0;}
        body{
            background: lightgray;
        }
        .page{
            margin: 20px auto;
            width: 600px;
            background: lightcyan;
            height: 1000px;
        }
        .nav>li{
            float: left;
            width: 150px;
            text-align: center;
            background: darkmagenta;
            padding: 0px;
            color: lightgrey;
            line-height:50px;
        }
        ul{
            list-style: none;
        }
        .dropdown-content{
            display: none;
            background: #0aa6ec;
        }
        .dropdown:hover .dropdown-content{
            display: block;
        }

    </style>
</head>
<body>
   <div class="page">
       <ul class="nav">
           <li>首页</li>
           <li class="dropdown">新闻
               <ul class="dropdown-content">
                   <li>国际新闻</li>
                   <li>国内新闻</li>
               </ul>
           </li>
           <li>产品</li>
           <li>联系我们</li>
       </ul>
   </div>
</body>
</html>

效果图QQ截图20190615115900.jpg

总结:

设置下拉菜单的display属性为隐藏,通过li的hover,更改下拉菜单的display属性为block;


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网