热门搜索

下拉菜单案例

原创 2018-12-24 17:14:37 141
摘要：index.html代码内容：<!DOCTYPE html><html><head > <meta charset="utf-8"> <title>Document</title> <link rel="stylesheet" type="text/css" h

index.html代码内容：

<!DOCTYPE html>

<html>

<head >

<meta charset="utf-8">

<title>Document</title>

<link rel="stylesheet" type="text/css" href="css/index.css">

<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">

<link rel="shortcut icon" type="image/x-icon" href="">


<style type="text/css">




</style>

<body >

<div class="header">

<div  class="header_content">


<div class="header_content_left">


<a href="" class="header_content_a">中国大陆 &nbsp;<i class="fa fa-angle-down"></i>

<ul class="header_content_nation">

<li>全球</li>

<li>中国大陆</li>

<li>香港</li>

<li>台湾</li>

<li>澳门</li>

<li>韩国</li>

<li>马来西亚</li>

<li>澳大利亚</li>

<li>新加坡</li>

<li>新西兰</li>

<li>加拿大</li>

<li>美国</li>

<li>日本</li>

</ul>

</a>

<a href="" style="color: #F22E00">亲，请登录</a>

<a href="">免费注册</a>

<a href="">手机逛淘宝</a>



</div>

<div class="header_content_right">


<a href="" class="header_content_a">我的淘宝 &nbsp;<i class="fa fa-angle-down"></i>

<ul>

<li>我买到的宝贝</li>

<li>我的足迹</li>

</ul>

</a>

<a href="" ><span class="fa fa-cart-plus" style="color: #F22E00"></span>&nbsp;购物车&nbsp;<i class="fa fa-angle-down"></i></a>

<a href="" class="header_content_a"><span class="fa fa-star"></span>&nbsp;收藏夹&nbsp;<i class="fa fa-angle-down"></i>

<ul>

<li>收藏的宝贝</li>

<li>收藏的店铺</li>

</ul>

</a>


<a href="">商品分类</i></a>

<a href="" class="header_content_a">卖家中心&nbsp;<i class="fa fa-angle-down"></i>

<ul>

<li>免费开店</li>

<li>已卖出的宝贝</li>

<li>出售中的宝贝</li>

<li>卖家服务市场</li>

<li>卖家培训中心</li>

<li>体检中心</li>

<li>问商友</li>

</ul>


</a>

<a href="" class="header_content_a">联系客服&nbsp;<i class="fa fa-angle-down"></i>

<ul>

<li>消费者客服</li>

<li>卖家客服</li>

</ul>

</a>

<a href=""class="header_content_a" class="header_content_a"><span class="fa fa-navicon" style="color: #F22E00">&nbsp;</span>网站导航&nbsp;<i class="fa fa-angle-down"></i>

<div class="header_content_web">

<div class="header_content_web_table">

<div class="header_content_web_title"><span>主题市场</span></div>

<div class="header_content_web_item">

<ul>

<li>女装</li>

<li>男装</li>

<li>内衣</li>

<li>鞋靴</li>

</ul>

</div>


<div class="header_content_web_item">

<ul>

<li>箱包</li>

<li>婴童</li>

<li>家电</li>

<li>数码</li>

</ul>

</div>


<div class="header_content_web_item">

<ul>

<li>手机</li>

<li>美妆</li>

<li>珠宝</li>

<li>眼睛</li>

</ul>

</div>

<div class="header_content_web_item">

<ul>

<li>手表</li>

<li>运动</li>

<li>户外</li>

<li>乐器</li>

</ul>

</div>

<div class="header_content_web_item">

<ul>

<li>游戏</li>

<li>动漫</li>

<li>影视</li>

<li>美食</li>

</ul>

</div>

<div class="header_content_web_item">

<ul>

<li>鲜花</li>

<li>宠物</li>

<li>农资</li>

<li>房产</li>

</ul>

</div>

<div class="header_content_web_item">

<ul>

<li>装修</li>

<li>建材</li>

<li>家具</li>

<li>百货</li>

</ul>

</div>

<div class="header_content_web_item">

<ul>

<li>汽车</li>

<li>二手车</li>

<li>办公</li>

<li>定制</li>

</ul>

</div>

<div class="header_content_web_item">

<ul>

<li>教育</li>

<li>卡券</li>

<li>本地</li>

</ul>

</div>



</div>

<div class="header_content_web_table">

<div class="header_content_web_title"><span>主题市场</span></div>

<div class="header_content_web_item">

<ul>

<li>女装</li>

<li>男装</li>

<li>内衣</li>

<li>鞋靴</li>

</ul>

</div>


<div class="header_content_web_item">

<ul>

<li>箱包</li>

<li>婴童</li>

<li>家电</li>

<li>数码</li>

</ul>

</div>


<div class="header_content_web_item">

<ul>

<li>手机</li>

<li>美妆</li>

<li>珠宝</li>

<li>眼睛</li>

</ul>

</div>

<div class="header_content_web_item">

<ul>

<li>手表</li>

<li>运动</li>

<li>户外</li>

<li>乐器</li>

</ul>

</div>

<div class="header_content_web_item">

<ul>

<li>游戏</li>

<li>动漫</li>

<li>影视</li>

<li>美食</li>

</ul>

</div>

<div class="header_content_web_item">

<ul>

<li>鲜花</li>

<li>宠物</li>

<li>农资</li>

<li>房产</li>

</ul>

</div>

<div class="header_content_web_item">

<ul>

<li>装修</li>

<li>建材</li>

<li>家具</li>

<li>百货</li>

</ul>

</div>

<div class="header_content_web_item">

<ul>

<li>汽车</li>

<li>二手车</li>

<li>办公</li>

<li>定制</li>

</ul>

</div>

<div class="header_content_web_item">

<ul>

<li>教育</li>

<li>卡券</li>

<li>本地</li>

</ul>

</div>

</div>

<div class="header_content_web_table">

<div class="header_content_web_title"><span>主题市场</span></div>

<div class="header_content_web_item">

<ul>

<li>女装</li>

<li>男装</li>

<li>内衣</li>

<li>鞋靴</li>

</ul>

</div>


<div class="header_content_web_item">

<ul>

<li>箱包</li>

<li>婴童</li>

<li>家电</li>

<li>数码</li>

</ul>

</div>


<div class="header_content_web_item">

<ul>

<li>手机</li>

<li>美妆</li>

<li>珠宝</li>

<li>眼睛</li>

</ul>

</div>

<div class="header_content_web_item">

<ul>

<li>手表</li>

<li>运动</li>

<li>户外</li>

<li>乐器</li>

</ul>

</div>

<div class="header_content_web_item">

<ul>

<li>游戏</li>

<li>动漫</li>

<li>影视</li>

<li>美食</li>

</ul>

</div>

<div class="header_content_web_item">

<ul>

<li>鲜花</li>

<li>宠物</li>

<li>农资</li>

<li>房产</li>

</ul>

</div>

<div class="header_content_web_item">

<ul>

<li>装修</li>

<li>建材</li>

<li>家具</li>

<li>百货</li>

</ul>

</div>

<div class="header_content_web_item">

<ul>

<li>汽车</li>

<li>二手车</li>

<li>办公</li>

<li>定制</li>

</ul>

</div>

<div class="header_content_web_item">

<ul>

<li>教育</li>

<li>卡券</li>

<li>本地</li>

</ul>

</div>

</div>

<div class="header_content_web_table">

<div class="header_content_web_title"><span>主题市场</span></div>

<div class="header_content_web_item">

<ul>

<li>女装</li>

<li>男装</li>

<li>内衣</li>

<li>鞋靴</li>

</ul>

</div>


<div class="header_content_web_item">

<ul>

<li>箱包</li>

<li>婴童</li>

<li>家电</li>

<li>数码</li>

</ul>

</div>


<div class="header_content_web_item">

<ul>

<li>手机</li>

<li>美妆</li>

<li>珠宝</li>

<li>眼睛</li>

</ul>

</div>

<div class="header_content_web_item">

<ul>

<li>手表</li>

<li>运动</li>

<li>户外</li>

<li>乐器</li>

</ul>

</div>

<div class="header_content_web_item">

<ul>

<li>游戏</li>

<li>动漫</li>

<li>影视</li>

<li>美食</li>

</ul>

</div>

<div class="header_content_web_item">

<ul>

<li>鲜花</li>

<li>宠物</li>

<li>农资</li>

<li>房产</li>

</ul>

</div>

<div class="header_content_web_item">

<ul>

<li>装修</li>

<li>建材</li>

<li>家具</li>

<li>百货</li>

</ul>

</div>

<div class="header_content_web_item">

<ul>

<li>汽车</li>

<li>二手车</li>

<li>办公</li>

<li>定制</li>

</ul>

</div>

<div class="header_content_web_item">

<ul>

<li>教育</li>

<li>卡券</li>

<li>本地</li>

</ul>

</div>

</div>

</div>

</a>

</div>

</div>

<div class="clear"></div>

</div>



</body>

</html>


index.css代码内容:

*{margin: 0px;padding: 0px;}

a{text-decoration: none;color: #3C3C3C;font-size: 13px;}

li{list-style: none;padding:0;margin:0;}

.header_content a:hover{color: #FF5000;}

.header_content_left a{margin-right: 5px;}

.clear{clear: both;}

.header{width: 100%;height: 40px;background: #F4F4F4;}

.header_content{width: 1200px;height: 40px;margin: 0px auto;line-height: 40px;}

.header_content_left{height: 40px;float: left;}

.header_content_right{width: 600px;height: 40px;float: right;}

.header_content_a{display: inline-block;height: 40px;width: 90px;text-align: center;position: relative;}

.header_content_a:hover{background-color: #fff;}

.header_content_a ul{border: 1px solid #F5f5f5;display: none;position: absolute;padding: 5px 0px;border-top:none; }

.header_content_a:hover ul{display: block;position: absolute;}

.header_content_a ul li{color: #6c6c6c;height:30px;line-height: 30px;text-align: left;padding: 0px 3px;}

.header_content_a ul li:hover{background: #F4F4F4}

.header_content_nation{position: absolute;

overflow-x: hidden;

overflow-y: scroll; 

height:290px;

width:250px; 

border: solid 1px #aaa; 

border: 1px solid #F5f5f5;

display: none;

padding: 5px 0px;

border-top:none; }

.header_content_nation ul:hover {display: block;}

.header_content_nation li{color: #6c6c6c;height:30px;line-height: 30px;text-align: left;padding: 0px 3px;}

.header_content_nation li:hover{background: #F4F4F4}



.header_content_web{display: none; position: absolute;}

.header_content_a:hover .header_content_web{display: block;width: 1200px;height: 310px;

top: 40px;left: -1110px;}



.header_content_web_table{width: 298px;height: 310px;

    border-collapse: collapse;font-size: 12px;display: block;float: left;border: 1px solid #F5f5f5;border-top:none;}

.header_content_web_title span{display: block;width: 298px;height: 40px;color:#FC581E;font-size: 18px;text-align: left;padding:0px 10px;}

.header_content_web_item{display: block;width: 298px;height: 30px;}

.header_content_web_item ul{border: 0px;;display: none;position: absolute;padding: 0px 7px;}

.header_content_web_item ul li{float: left;width: 41px;height: 26px;line-height: 26px;text-align: center;color: #3C3C3C;padding:0px; border-radius: 2px;margin:2px 30px 2px 0px; }

.header_content_web_item ul li:hover{background: #FF5000;color: white; }



总结：在完成某些类型排版的下拉菜单时，需多注意position和float的使用，注意在使用过程中因为设置的通用样式导致的某些局部标签的出现空白填充，需要重新设置padding和margin属性值，防止出现实现展示效果不如意的情况。


批改老师：灭绝师太批改时间：2018-12-24 18:01:34
老师总结：完成的不错！其余地方：带有二级下拉菜单的导航不建议使用a链接嵌套奥！

发布手记

热门词条

php中文网：公益在线php培训，帮助PHP学习者快速成长！ 增值电信业务经营许可证：苏B2-20210495

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved 湘ICP备2023035733号 关于我们免责申明