0
這是一個惱人的，真的很抱歉，因爲我期望它可能很簡單，但我搜索和搜索，我得到的一切都不是什麼我的問題。無序的菜單項無法點擊
我正在使用無序的HTML列表製作一個菜單欄，但我列表的前三項不起作用。我不能點擊它們，懸停不會觸發a：懸停突出顯示。其他三個工作。我已經去了我的HTML和CSS，但我不知道什麼是錯的。
我的代碼如下;
html { }
body {
\t font-family: Georgia, Times, Arial;
\t background: #fff;
}
.container {
\t height: 100%;
\t width: 100%;
\t float: left;
}
.menu {
\t float: left;
\t clear: left;
\t width: 100%;
\t background: #cfcfcf;
\t overflow:hidden;
}
.content {
\t width: 100%;
\t float: left;
\t right: 9%;
\t position:relative;
\t }
.menuProper {
\t width: 22%;
\t position: relative;
\t font-weight: bold;
\t float: left;
\t background: #fff;
\t height: 100%;
\t left: 15%;
}
.logoProper {
\t width: 375px;
\t height: 269px;
\t background: url("https://dl.dropboxusercontent.com/u/172663886/Community%20Club%20Logo.png");
\t margin: 0 auto;
}
.contentProper {
\t width: 75%;
\t left: 16%;
\t position: relative;
}
h1 {
\t font-size: 40px;
\t font-weight: bold;
}
h2 {
\t font-size: 35px;
}
h3 {
\t font-size: 30px;
}
ul#nav {
\t list-style: none;
\t list-style-type: none;
}
ul#nav a {
\t text-decoration: none;
\t padding: 3%;
\t color: #000;
\t font-size: 30px;
\t line-height: 50px;
}
ul#nav a:hover {
\t background: #e9def6;
}<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tasmanian Community Poultry Society - Home</title>
<meta name="description" content="The Tasmanian Community Poultry Society is a group of poultry keepers working together to learn new skills, assist each other and connect the poultry community."/>
<meta name="keywords" content="poultry, community, tasmania, society, club, local organisation"/>
<link rel="stylesheet" href="main.css"/>
<head profile="http://www.w3.org/2005/10/profile"/>
</head>
<body>
<div class="container">
<div class="logo">
<div class="content">
<div class="menu">
<div class="menuProper">
<div class="logoProper"></div>
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Meetings</a></li>
<li><a href="">Online Community</a></li>
<li><a href="">Advice & Info</a></li>
<li><a href="">Etc</a></li>
</ul>
</div>
<div class="contentProper">
<p>Lorem ipsum dolor sit amet, a tortor id taciti vel purus augue, ac vel donec vestibulum phasellus, eu sagittis venenatis turpis quis enim, luctus sed, laoreet ullamcorper. Amet dapibus faucibus purus nonummy ac, vitae et pede. Duis magna tincidunt lacus vitae magna, vitae malesuada. Ipsum elementum metus, sed orci lectus, suspendisse scelerisque commodo nec quis vulputate. Wisi id ullamcorper voluptatem lacus et dictumst, lectus class non, metus eu, ullamcorper ut sollicitudin orci enim erat, magna mollis hymenaeos gravida nunc diam. Volutpat quis consectetuer tellus elit, ac pretium. Turpis vitae metus id nullam sem, laboris aliquam lectus omnis at tellus. Vestibulum eget elit placerat, elit pretium ultricies at neque orci, dolor vel etiam felis nullam sed, ac nunc dapibus mi tellus nulla.</p>
<p>Potenti duis duis sed sapien. Imperdiet orci enim venenatis sodales, suspendisse sem sed pulvinar proin ultrices nunc, est vivamus quam tempus fusce urna, sed nisl lacus vitae, mauris condimentum mi mi vehicula. Leo orci erat turpis penatibus ridiculus, massa quisque convallis sit, sollicitudin velit enim sagittis posuere dolor, rutrum egestas mi ultricies. Ligula nibh neque, erat varius tincidunt quam morbi ipsum wisi. Luctus felis, condimentum odio dui nullam.</p>
<p>Praesent faucibus. Malesuada neque viverra velit lacus, auctor dolor, placerat vel maecenas ultricies et morbi ad. Libero tristique mauris etiam eros in, fermentum etiam amet ut, nec laoreet viverra, nibh libero posuere magna, tincidunt cras et sodales arcu ut. Tincidunt phasellus integer, egestas quis erat eu, lorem nec sapien hendrerit ullamcorper euismod aliquet, porttitor vestibulum in diam vitae varius, quis nihil metus maecenas ut. Et luctus egestas lacinia aliquam, posuere accumsan blandit, diam amet pede turpis laoreet pede vitae. Sollicitudin et, donec lacus, quis vel, mus natoque sed in adipiscing gravida tincidunt, tristique mauris semper in. Vivamus officia mauris lorem velit curabitur, fringilla semper nulla donec vitae in.</p>
<p>Vel non, amet vestibulum elit mauris nulla a dolor, eget aliquet maecenas, augue nascetur eu. Tincidunt suspendisse sed et sit fringilla, consequat vestibulum viverra, erat vel venenatis at nec. Eu ornare sit. Suspendisse sodales, curabitur sociosqu donec malesuada, velit mattis nisi quis vivamus, laoreet congue. Sodales sed enim, eos sit velit, pede euismod in rhoncus justo pede metus, sagittis auctor, egestas rutrum at. Faucibus duis fusce bibendum purus, pharetra arcu. Libero maecenas at ante, dictum sapien sem eget, quis a pellentesque maecenas justo dui.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我不確定你的網頁是什麼意圖，但它實際上並不是前3項 - 它就是*你的*顯示器。這些項目正在由'p'標籤內容覆蓋，因爲您已經浮動了導航。這就是爲什麼圖像在頂部也覆蓋文字的原因，在較小的顯示器上。 –
@JeremyMiller - 哎呀。沒有意識到，因爲我正在使用這麼大的顯示器。我試圖讓它動態調整大小，但標誌已經讓我感到困惑。 – Kingborough