<!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>
<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>
<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>