本文章以淘宝的导航栏为例子，希望对代码感兴趣的同学有所帮助，此代码主要面向纯新手小白，
导航栏使用纯html+Css、实现导航栏固定，ul的固定悬浮，hover和display的显示隐藏。
代码简单：div，ul，li，a
Html：
<!DOCTYPE html> <html></html>
<head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="CSS/TBpage-copy.css" /></head><body><header><!--导航栏--><div id="nav"><div id="navigation"><ul id="navigation_l"><li class="NavWorld"><a href="#">全球</a><ul class="NavWorld_dropdown"><li><a href="#">清远</a></li><li><a href="#">广州</a></li><li><a href="#">成都</a></li><li><a href="#">南充</a></li><li><a href="#">...</a></li></ul></li><li><a href="#">登录</a></li><li><a href="#">注册</a></li><li><a href="#">网页无障碍</a></li><li><a href="#">切换企业版</a></li></ul><ul id="navigation_r"><li class="NavPurchase"><a href="#">我的淘宝</a><ul class="NavPurchase_t"><li><a href="#">已买宝贝</a></li><li><a href="#">阅览足迹</a></li></ul></li><li><a href="#">购物车</a></li><li class="NavFavorites"><a href="#">收藏夹</a><ul class="NavFavorites_t"><li><a href="#">收藏的宝贝</a></li><li><a href="#">收藏的店铺</a></li></ul></li><li><a href="#">商品分类</a></li><li class="NavPay"><a href="#">免费开店</a><ul class="NavPay_t"><li><a href="#">对公支付</a></li></ul></li><li><span href="#">l</span></li><li class="NavCenter"><a href="#">千牛卖家中心</a><ul class="NavCenter_t"><li><a href="#">开店入驻</a></li><li><a href="#">已卖出的宝贝</a></li><li><a href="#">出售中的宝贝</a></li><li><a href="#">卖家服务市场</a></li><li><a href="#">卖家培训中心</a></li><li><a href="#">体检中心</a></li><li><a href="#">电商学习中心</a></li></ul></li><li class="NavHelp"><a href="#">帮助中心</a><ul class="NavHelp_t"><li><a href="#">官方客服</a></li><li><a href="#">商家客服</a></li><li><a href="#">消息中心</a></li><li><a href="#">意见反馈</a></li><li><a href="#">举报中心</a></li></ul></li></ul></div></div</header></body>
Css：
- {
padding: 0;
margin: 0;
}
/nav/
#nav {
width: 100%;
height: 22px;
margin: 0px auto;
padding: 5px 0px;
border-bottom: 1px solid gray;
background: gray;
position: fixed;
/background: #ADFF2F;/
}
#nav a {
text-decoration: none;
color: black;
}
#nav a:hover {
color: red;
text-decoration: underline;
-moz-text-decoration-color: red;
}
#navigation {
width: 1390px;
margin-left: 77.5px;
/background: #20B2AA;/
}
#navigation ul {
list-style: none;
display: inline-flex;
}
#navigation ul li {
padding: 0px 12px;
display: inline-flex;
}
#navigation_r {
margin-left: 26%;
}
/ul固定悬浮/
/高度21/格+2px/
#navigation .NavWorld_dropdown,
#navigation .NavPurchase_t,
#navigation .NavFavorites_t,
#navigation .NavPay_t,
#navigation .NavCenter_t,
#navigation .NavHelp_t {
display: block;
z-index: 1;
position: absolute;
text-align: left;
top: 25px;
border: 1px solid gray;
border-top: none;
background: white;
display: none;
}
/全球/
#navigation .NavWorld_dropdown {
width: 75px;
height: 107px;
left: 77px;
}
/购买/
#navigation .NavPurchase_t {
width: 88px;
height: 44px;
left: 819px;
}
/收藏/
#navigation .NavFavorites_t {
width: 105px;
height: 44px;
left: 979px;
}
/收费/
#navigation .NavPay_t {
width: 88px;
height: 21px;
left: 1139px;
}
/中心/
#navigation .NavCenter_t {
width: 120px;
height: 149px;
left: 1255px;
}
/帮助/
#navigation .NavHelp_t {
width: 88px;
height: 107px;
left: 1375px;
}
#navigation .NavWorld:hover .NavWorld_dropdown,
#navigation .NavPurchase:hover .NavPurchase_t,
#navigation .NavFavorites:hover .NavFavorites_t,
#navigation .NavPay:hover .NavPay_t,
#navigation .NavCenter:hover .NavCenter_t,
#navigation .NavHelp:hover .NavHelp_t {
display: block;
}
#nav .NavWorld:hover,
#navigation .NavPurchase:hover,
#navigation .NavFavorites:hover,
#navigation .NavPay:hover,
#navigation .NavCenter:hover,
#navigation .NavHelp:hover {
background: white;
}
版权归原作者 LucKaren 所有， 如有侵权，请联系我们删除。