摘要：首先，先說(shuō)一下這里的下拉菜單布局的思路，主要是用css的hover和display語(yǔ)句來(lái)實(shí)現(xiàn)下拉菜單的顯示。即先使用display把下拉框隱藏起來(lái)，然后再在hover觸發(fā)的時(shí)候，再使用display語(yǔ)句把下拉框顯示出來(lái)。具體代碼如下：<!DOCTYPE html> <html> <head> <title>導(dǎo)航欄常用布局</titl
首先，先說(shuō)一下這里的下拉菜單布局的思路，主要是用css的hover和display語(yǔ)句來(lái)實(shí)現(xiàn)下拉菜單的顯示。即先使用display把下拉框隱藏起來(lái)，然后再在hover觸發(fā)的時(shí)候，再使用display語(yǔ)句把下拉框顯示出來(lái)。具體代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>導(dǎo)航欄常用布局</title>
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
a{text-decoration:none;padding:auto 5px;}
i{border: solid black;border-width: 0 1px 1px 0;display: inline-block;padding: 3px;margin:0 5px 5px 5px;transform: rotate(45deg);-webkit-transform: rotate(45deg);}
body{width: 100%;height:23px;}
nav{width: 1280px;height:23px; margin: auto ;background-color: yellow;}
ul{list-style:none;}
hr{width: 2px;line-height: 10px;color: pink;margin:2px auto;padding:3px 0px ;display: inline;text-align: center;}
.left{width: 40%;line-height:22px;background-color: pink;float: left;}
.left .inlines{display: inline;margin:0;float: left;display: inline-block;}
.right{width: 58%;line-height:22px;float: right;text-align: right;}
.right .inlines{display: inline;margin:0;display: inline-block;}
.inlines a:hover{color:#ff5000;}
.inlines ul{border:1px solid #ff5000;width:100px;display: none;border-top: none;}
/*.list-select a{border:1px solid #ff5000;width: 100%;}*/
.inlines:hover ul{color: red;width: 100px;display:block;position: absolute;}
.inlines ul li:hover{}
.inlines ul li{color: yellow;}
.clear{clear: both;}
</style>
<body>
<nav>
<ul class="left">
<li class="inlines"><a href="#">中國(guó)大陸 <i></i>
<ul>
<li><a href="#">中國(guó)香港</a></li>
<li><a href="#">中國(guó)澳門(mén)</a></li>
<li><a href="#">中國(guó)臺(tái)灣</a></li>
</ul>
</a></li>
<li class="inlines"><a href="#">親，請(qǐng)登錄</a> </li>
<li class="inlines"><a href="#">免費(fèi)注冊(cè)</a> </li>
<li class="inlines"><a href="#">手機(jī)逛淘寶</a></li>
</ul>
<ul class="right">
<li class="inlines"><a href="#">我的淘寶<i></i>
<ul>
<li><a href="#">已買(mǎi)到的寶貝</a></li>
<li><a href="#">我的足跡</a></li>
</ul>
</a></li>
<li class="inlines"><a href="#">購(gòu)物車(chē)<i></i>
<ul>
<li><span>您的購(gòu)物車(chē)?yán)餂](méi)有任何寶貝！</span><a href="#">查看我的購(gòu)物車(chē)</a></li>
</ul>
</a></li>
<li class="inlines"><a href="#">收藏夾<i></i>
<ul>
<li><a href="#">收藏的寶貝</a></li>
<li><a href="#">收藏的店鋪</a></li>
</ul>
</a></li>
<li class="inlines"><a href="#">商品分類(lèi)</a></li>
<li class="inlines"> <hr> </li>
<li class="inlines"><a href="#">賣(mài)家中心<i></i>
<ul>
<li><a href="#">免費(fèi)開(kāi)店</a></li>
<li><a href="#">已售出的寶貝</a></li>
<li><a href="#">出售中的寶貝</a></li>
</ul>
</a></li>
<li class="inlines"><a href="#">聯(lián)系客服<i></i>
<ul>
<li><a href="#">消費(fèi)者客服</a></li>
<li><a href="#">賣(mài)家客服</a></li>
<li><a href="#">中國(guó)臺(tái)灣</a></li>
</ul>
</a></li>
<li class="inlines"><a href="#">網(wǎng)站導(dǎo)航<i></i>
<ul>
<li><a href="#">主題市場(chǎng)</a></li>
<li><a href="#">特色市場(chǎng)</a></li>
<li><a href="#">阿里APP</a></li>
</ul>
</a></li>
</ul>
</nav>
<div class="clear"></div>
</body>
</html>以上就是用css語(yǔ)句實(shí)現(xiàn)下拉菜單布局的內(nèi)容。
注：這里的下拉菜單是一個(gè)純靜態(tài)--無(wú)數(shù)據(jù)交互的下拉框，有數(shù)據(jù)交互的下拉框一般均使用js實(shí)現(xiàn)。
批改老師：查無(wú)此人批改時(shí)間：2019-07-11 13:30:03
老師總結(jié)：完成的不錯(cuò)，常用的css樣式可以寫(xiě)到公用文件里，每個(gè)項(xiàng)目都可以加載這一個(gè)公用文件。繼續(xù)加油。