縮放導航欄 - 響應式設計

我試圖讓我的網站完全響應，並且我在導航欄上磕磕絆絆;我似乎無法讓它響應。我的編碼是如下：縮放導航欄 - 響應式設計

<div class = "navbar" > 
<nav> 
    <ul> 
     <li><a href="#">Collectie</a> 
      <ul> 
       <li><a href="#">Zomercollectie</a></li> 
       <li><a href="#">Wintercollectie</a></li> 
       <li><a href="#">Kerstcollectie</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Over ons</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</nav> 
</div>

而CSS如下：

.navbar 
{ 
height: 50px; 
width: 920px; 
max-width:100%; 
background-color:#2d2d2d; 
margin-left:auto; 
margin-right:auto; 
} 

/* NAVBAR CSS */ 

nav ul ul 
{ 
display: none; 

} 

nav ul li:hover > ul 
{ 
display: block; 
} 
nav ul { 
background:#2d2d2d; 
color:ffffff; 
font-size:30px; 
padding: 0 20px; 
list-style: none; 
position: relative; 
display: inline-table; 
margin-top: 0; 

} 

nav ul:after 
{ 
content: ""; 
clear: both; 
display: block; 
} 

nav ul li 
{ 
float: left; 
} 

nav ul li:hover 
{ 
background: #4b545f; 
} 

nav ul li:hover a 
{ 
color: #fff; 
} 

nav ul li a { 
display: block; 
padding: 7px 93px; 
color: #757575;  
text-decoration: none; 
} 

nav ul ul 
{ 
background: #5f6975; 
padding: 0; 
position: absolute; 
top: 100%; 
} 

nav ul ul li 
{ 
float: none; 
border-top: 1px solid #6b727c; 
border-bottom: 1px solid #575f6a; 
position: relative; 
} 
nav ul ul li a 
{ 
padding: 15px 40px; 
color: #fff; 
} 

nav ul ul li a:hover 
{ 
background: #4b545f; 
} 

/* END of NAVBAR CSS */

我想使它擴展了整個事情，包括字體的時候都太大，並且沒有按鈕疊加垂直。

有什麼想法？

來源

2013-10-26 Spherehunter

我從來沒有聽說過內聯表嗎？顯示錶會做你想做的事，但它不適用於舊版瀏覽器。查看https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries查看字體大小調整問題 –

您的身高：50px;和寬度：920px;這些是固定值。如果你想讓你的網站「響應」，那麼你需要做出這些相對值，即。相對於他們的容器的寬度和高度。 – frenchie

謝謝，我會盡快閱讀。我要去睡覺了！ – Spherehunter

好的，我修好了。它在高度元素。我根本不應該使用它們。

來源

2013-10-29 21:04:59 Spherehunter

縮放導航欄 - 響應式設計

回答

相關問題