Question

这是一个令人讨厌的人，真的很抱歉，因为我希望它可能很简单，但我已经搜索和搜索过，我得到的一切都与我的问题完全不同。

我使用无序的HTML列表制作菜单栏，但我列表中的前三项不起作用。我无法点击它们并且悬停没有触发a：悬停突出显示。其他三个确实有效。我已经浏览了我的HTML和CSS，但我不确定是什么问题。

我的代码如下;

＆＃13;

html { }

body { 
	font-family: Georgia, Times, Arial;
	background: #fff; 
}

.container { 
	height: 100%;
	width: 100%;
	float: left; 
}

.menu {
	float: left; 
	clear: left;
	width: 100%;
	background: #cfcfcf; 
	overflow:hidden; 
}

.content { 
	width: 100%;
	float: left; 
	right: 9%; 
	position:relative;
	}

.menuProper { 
	width: 22%; 
	position: relative;
	font-weight: bold;
	float: left; 
	background: #fff; 
	height: 100%; 
	left: 15%;
}

.logoProper { 
	width: 375px; 
	height: 269px; 
	background: url("https://dl.dropboxusercontent.com/u/172663886/Community%20Club%20Logo.png");
	margin: 0 auto;
}

.contentProper { 
	width: 75%; 
 	left: 16%; 
	position: relative;
}

h1 {
	font-size: 40px; 
	font-weight: bold; 
}

h2 { 
	font-size: 35px;
}
h3 { 
	font-size: 30px; 
}

ul#nav { 
	list-style: none; 
	list-style-type: none; 
}

ul#nav a { 
	text-decoration: none; 
	padding: 3%; 
	color: #000;
	font-size: 30px; 
	line-height: 50px;
}

ul#nav a:hover { 
	background: #e9def6; 
}

＆＃13;

<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>

＆＃13;

Answer 1

向z-index class

添加一些menuProper

您的div互相重叠。 contentProper重叠menuProper，因此某些链接无法点击。

我添加了z-index: 100;，它对我有用。

Answer 2

您的班级.contentProper存在问题。给出如下的风格

.contentProper{
    float:left; // Add float.
    width:60%; // decrease the width as you want. for me 60% is working in my screen.
    position:relative;
    left:16%;
}

无法单击的无序菜单项

2 个答案: