如何在CSS中調整水平菜單的大小？

Question

縱觀網頁設計，無法正確解釋，但請看一下我創建的頁面。 http://workspa.webs.com/new/web.html#

注意橫幅圖像如何保持100％的寬度，並且在放大和縮小時尺寸似乎沒有增加嗎？ 我希望水平菜單執行相同的操作，但是不知道如何操作。 現在，隨着我放大，它的大小會增加和減小（類似於第二張圖片在我的網站上的顯示方式）。 我使用以下代碼使橫幅的行為類似：HTML：

<div class="container"><img src="head.jpg" /></div><br/>

CSS：

.container {width: 100%; overflow: hidden; }

.container img {寬度：100％;}

但是我不知道如何使用水平菜單。 我應該注意，我在左側創建了一個小菜單，並且我將具有相同顏色的div設置為適合寬度的100％，因為如果將菜單設置為100％，我不知道如何使選項卡停留在左側寬度本身。

這是菜單的內容：HTML：

<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Videos</a></li>
</ul>
</div>

CSS：

* {margin: 0; padding: 0;}
ul { display: table; width: 100%;}
ul li { list-style-type: none; position: relative; float: left;}
ul li a { background: #444444; color: white; display: block;
font-family: Arial, Helvetica, sans-serif;           padding: 10px 20px; text-decoration: none; }
ul li a:hover { background: red; }

#menu { width: 100%; height: auto; background-color: #444444; }

您能幫忙嗎，希望我的解釋不要太混亂。

Answer 1

也許這對您如何嘗試使其有所幫助：

http://jsfiddle.net/w7fLT/

將此添加到您的CSS

#menu {
    width:353px;
    margin:0 auto;
}

@media only screen and (max-width : 400px) {
    ul li { 
        display:block;
        float:none;
    }
}

玩得開心