                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /形形色色的下拉菜單

我沒用老師的那個padding方法我自己給li設(shè)置了一個寬度這樣可行嗎

*{
	list-style:none;????/*去掉li前邊的小點*/
	padding:0?0?0?0;????????/*瀏覽器默認(rèn)有margin和padding的值?取消掉頁面上的默認(rèn)邊距就沒有了*/
	margin:0?0?0?0;
}

a{
	text-decoration:none;?color:#000;????????????/*把a(bǔ)標(biāo)簽的默認(rèn)樣式改了*/
	display:block;?????????????????????/*變成塊級元素?這樣就會顯示一個豎行的背景*/
	width:92px;??????????????????????/*沒有用老師的padding方法?自己定了一個寬度*/
	
}?
a:hover{
	color:red;???????????????????????/*鼠標(biāo)移上去變成紅色*/
	background:#666;
}
.nav{
	height:40px;
	width:552px;
	background:#eee;
	margin:0?auto;?????????/*讓div在頁面水平居中*/
	text-align:center;??????????????????????????????????????/*讓文字在li中居中*/
}	

.nav>ul>li{
	float:left;
	height:40px;
	/*padding:0?30px;???????????????不設(shè)置寬度?這樣元素超過寬度也不會自動換行到下一行*/
	line-height:40px;
	/*position:relative;??????????????????進(jìn)行相對定位???取消了好像也沒事*/??????
	
}

.nav>ul{
	margin:0?0?0?0;
	padding:0;
}

.nav>ul>li>ul>li{
	background:#eee;
	display:none;?????????????????????/*設(shè)置2級菜單隱藏*/
}

.nav>ul>li>ul{
	/*position:absolute;?????????????????進(jìn)行絕對定位*/
}

.nav>ul>li>ul>li>a:hover{??????????????????/*設(shè)置二級菜單的樣式*/
	background:#06f;
}
.nav?ul?li:hover?li{
	display:block;?????????????????????????/*設(shè)置2級菜單鼠標(biāo)移上去顯示*/
}

<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">
<link?rel="stylesheet"?type="text/css"?href="style.css"?/>?
<script?type="text/javascript"?src="script.js"></script>
</head>
<body>
	<div?class="nav">
		<ul>
			<li><a?href="#">首頁</a>
			<li><a?href="#">首頁</a>
				<ul>
					<li><a?href="#">javaScript</a></li>
					<li><a?href="#">jQuery</a></li>
				</ul>
			</li>
			<li><a?href="#">首頁</a>
				<ul>
					<li><a?href="#">javaScript</a></li>
					<li><a?href="#">jQuery</a></li>
				</ul>
			</li>
			<li><a?href="#">首頁</a></li>
			<li><a?href="#">首頁</a></li>
			<li><a?href="#">首頁</a></li>
		</ul>
	
	</div>
</body>
</html>

沒用padding方法直接給a了一個寬度這樣也沒用絕對定位和相對定位直接二級菜單就在一級菜單下面了真正項目中一般是padding來設(shè)置寬度還是直接把寬度定死但是把寬度定死不好就是內(nèi)容長度不能超過寬度要不會自動換行到下一行。

21:46

慕移動7208282

2017-09-18

源自：形形色色的下拉菜單 1-1

關(guān)注問題我要回答

2170

操作

收起

5 回答

此去經(jīng)年01 回答被采納 +2 積分
2017-09-19

一般寬度給他設(shè)置成跟父元素的百分比多少多少的，導(dǎo)航一般來講是不允許內(nèi)容超過寬度的，超過的話也是溢出隱藏或者省略。

沒有設(shè)置定位沒有任何關(guān)系，你要知道二級導(dǎo)航本身就是在上級li里面的，而你的上級li里面放了一個a標(biāo)簽，還給設(shè)置了display：block ；當(dāng)然會把二級菜單擠出去。你沒仔細(xì)看么？<首頁>下面的二級導(dǎo)航都被擠到課程大廳下面了。而ul li都是塊級元素，你有設(shè)置了top，所以他就按照豎列排在<首頁>下一個導(dǎo)航的下面。想要弄好可以給二級導(dǎo)航margin-left:-二級導(dǎo)航的寬度；或者給上級li相對定位，給二級導(dǎo)航絕對定位。第二種穩(wěn)妥點。