当我调整浏览器大小时，我的菜单栏不会相应调整

Question

当我的浏览器处于最大尺寸时，我创建了一个看起来很好的菜单栏但是，当我将其缩小时，我的菜单栏无法相应地调整其大小。 这是我的css代码

#dropdown ul{
		margin:0;
		padding:0;
		/*width:63%; */
		height:31px;
		list-style-type: none;			
		/*background:black;*/
		position:absolute;				
		}

#dropdown ul li {
		width: 128.83px;
		text-align: center; 
		line-height: 21px;
		float:left;						
		position:relative;				
		border:1px solid;
		}
#dropdown li ul { 							
		display:none;
		}
#dropdown li:hover ul { 					
		display:block; 
		position:absolute;
		}
#dropdown ul li a{ 
        display: block;
        padding: 5px;
        background: skyblue;
        text-decoration: none; 			
		}
#dropdown ul li a:hover{ 
        color: #fff; 			
        background: #939393; 
		}

<div id="dropdown">
	<ul>
		<li><a href="index.html">  Home </a></li>
		<li>
			<a href="admission.html">  Admission &#9662;</a>
		<ul>	
			<li> <a href="admission.html"> Fee Structure </a></li>
			<li><a href="merit.html"> Merit List </a></li>
		</ul>
		</li>
										
			<li><a href="faculty.html">  Faculty </a></li>
			<li><a href="gallery.html">  Photo Gallery</a></li>
			<li><a href="academic.html">  Academic &#9662;</a>
			<ul>	
				<li> <a href="academic.html#bscs"> BS(CS) </a></li>
				<li> <a href="academic.html#bsit"> BS(IT) </a></li>
				<li><a href="academic.html#mcs"> MCS </a></li>
			<li><a href="academic.html#mit"> MIT </a></li>
			</ul>
			</li>	
											
				<li><a href="contact.html">  Contact us </a></li>
	</ul>
	</div>

here is the snap shoot of my menu bar after restore browser

Answer 1

1. 如果你使用的是绝对位置，那么也要为父元素定义相对位置，然后为左边：0;右边：0;并给予＆＃34; li＆＃34; ＆＃34;百分比＆＃34;中的项目而不是＆＃34; px＆＃34;。
2. 不要使用绝对位置，并为＆＃34; li＆＃34; ＆＃34;百分比＆＃34;中的项目而不是＆＃34; px＆＃34;。