下拉列表

時間  2019-11-13
標籤 下拉 列表 简体版
原文   原文鏈接

 

<!DOCTYPE html>html

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
ul,ol{
list-style: none;
}
.clearfix:after{
content:"";
display:block;
clear:both;
visibility: hidden;
height:0;
}
.clearfix{
zoom:1;
}
.nav{
width:600px;
border:1px solid red;
margin:0 auto;
}
.nav li{
float:left;
line-height: 3;
width:100px;
text-align: center;
background:orange;
color:white;
}
.list{
display: none;
}
.nav li:hover .list{
display:block;
}
</style>
</head>
<body>
<div class="nav">
<ul class="clearfix">
<li>
首頁
<ul class="list">
<li>天貓</li>
<li>淘寶</li>
<li>京東</li>
<li>搜狗</li>
</ul>
</li>
<li>
新聞
<ul class="list">
<li>遊戲</li>
<li>動漫</li>
<li>視頻</li>
<li>運動</li>
</ul>
</li>
<li>
娛樂
<ul class="list">
<li>王者</li>
<li>吃雞</li>
<li>飛車</li>
<li>穿越</li>
</ul>
</li>
<li>
音樂
<ul class="list">
<li>用品</li>
<li>漫畫</li>
<li>小說</li>
<li>美團</li>
</ul>
</li>
<li>
軍事
<ul class="list">
<li>順豐</li>
<li>菜鳥</li>
<li>迅雷</li>
<li>百度</li>
</ul>
</li>
<li>
體育
<ul class="list">
<li>黑執事</li>
<li>罪惡王冠</li>
<li>海賊王</li>
<li>火影</li>
</ul>
</li>
</ul>
</div>
</body>
</html>視頻

效果圖{htm

}遊戲

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程