當我調整我的瀏覽器，我的菜單欄沒有相應調整

-3

我做了一個菜單欄，看起來很好，當我的瀏覽器是最大尺寸，但正如我使其體積更小，那麼我的菜單欄不能相應地調整其大小。這裏是我的CSS代碼當我調整我的瀏覽器，我的菜單欄沒有相應調整

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

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

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

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

來源

2017-07-24 Nasir

https://www.udacity.com/course/responsive-web-design-fundamentals-ud893 – Gerard

是的，因爲它沒有響應。你的菜單的寬度較大，那麼屏幕，以便它歸結。請閱讀有關媒體查詢和響應網頁設計。 – Aslam

如果您使用的絕對位置，然後還定義相對於父元素的位置，然後左：0;右：0 ;並在「百分比」，「禮」的項目，而不是「PX」給寬度。
不使用絕對位置，並給寬度在「百分比」，「禮」的項目，而不是「像素」。

來源

2017-07-25 05:43:08

當我調整我的瀏覽器，我的菜單欄沒有相應調整

回答

相關問題