下拉菜单

最新推荐文章于 2022-10-22 20:33:16 发布

lzl_Avery

最新推荐文章于 2022-10-22 20:33:16 发布

阅读量355

点赞数

分类专栏：基础

本文链接：https://blog.csdn.net/lzl_Avery/article/details/69258005

版权

基础专栏收录该内容

66 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉菜单</title>
<style type="text/css">
div{ width:500px; height:500px; background:#c3d8d7; margin:200px;}
div>ul{ padding:100px 0 0 100px;}
ul{ list-style:none;}
a{ text-decoration:none;}
li{ line-height:30px;}
div>ul>li{ position:relative;}
div>ul>li #home{ background:#b9c7c6; border:1px solid #9cb0ae; border-radius:5px; padding:10px 50px;}
div>ul>li>a{ line-height:30px; color:#60b5c0;}
div>ul>li>ul{ background:rgba(68,169,181,0.5); width:94px; margin-top:-110px; border-radius:5px; display:none;}
div>ul>li>ul .border-bottom{ border-bottom:1px solid #60b5c0}
div>ul>li>ul li{ margin-left:-40px; text-align:center; font-size:12px;color:#fff;}
div>ul>li>ul li:hover{ background:#57b2bb; border-radius:5px;}
div>ul>li:hover>ul{ display:block; position:absolute;top:150px;}
</style>
</head>

<body>
<div>
<ul>
    <li>
      <a href="#" id="home">首页</a>
      <ul>
        <a href="#"><li class="border-bottom">新闻直播</li></a>
        <a href="#"><li class="border-bottom">科技探索</li></a>
        <a href="#"><li class="border-bottom">新闻直播</li></a>
        <a href="#"><li>新闻直播</li></a>
      </ul>
    </li>
</ul>
<p>dfgnnnnnnnnnnfghjnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn</div>
</p>
</body>
</html>

lzl_Avery

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
下拉菜单

下拉菜单 div{ width:500px; height:500px; background:#c3d8d7; margin:200px;} div>ul{ padding:100px 0 0 100px;} ul{ list-style:none;} a{ text-decoration:none;} li{ line-height:30px;} div>ul>l
复制链接

扫一扫

专栏目录