                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /形形色色的下拉菜單

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

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

a{
	text-decoration:none;?color:#000;????????????/*把a標簽的默認樣式改了*/
	display:block;?????????????????????/*變成塊級元素?這樣就會顯示一個豎行的背景*/
	width:92px;??????????????????????/*沒有用老師的padding方法?自己定了一個寬度*/
	
}?
a:hover{
	color:red;???????????????????????/*鼠標移上去變成紅色*/
	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;???????????????不設置寬度?這樣元素超過寬度也不會自動換行到下一行*/
	line-height:40px;
	/*position:relative;??????????????????進行相對定位???取消了好像也沒事*/??????
	
}

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

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

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

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

<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來設置寬度還是直接把寬度定死但是把寬度定死不好就是內容長度不能超過寬度要不會自動換行到下一行。

21:46

慕移動7208282

2017-09-18

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

關注問題我要回答

2152

操作

收起

5 回答

此去經年01 回答被采納 +2 積分
2017-09-19

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

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