这是我的代码：
<!DOCTYPE HTML SYSTEM>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"></link>
</head>
<body>
<div class="header">
<img id="circle" src="circle.png" alt="circle"/>
<div class="menu">
<ul class="menu">
<a href="#">
<li id="menu" style="margin-left: 39%;">Home</li>
</a>
<a href="#">
<li id="menu" style="margin-left: 46%;">About</li>
</a>
<a href="#">
<li id="menu" style="margin-left: 53%;">Contact</li>
</a>
</ul>
</div>
<a href="http://www.google.com"><img id="src" style="margin-right: 6%" src="src.png" /></a>
<img id="ham" src="ham.png" style="margin-right: 2%" alt="ham"/>
<img id="smpline" src="smpline.png" style="margin-left: 5%;" alt="smpline"/>
<div class="welcome">
<p id="big">Web Design</p>
<p id="sml">
Fusce dapibus, tellus ac cursus commodo, tortor mauris <br />
condimentum , ut fermentum massa justo sit amet <br />
erat a ante venenatis dapibus posuere velit <br />
</p>
</div>
</div>
<img id="lowerfoto" src="lower.png" alt="lower"/>
<div class="head">
<img id="fteweit" src="fterwit.png" alt="white"/>
<ul class="head">
<li id="head" style="padding-left: 10%;">FOLLOW US</li>
<li id="head" style="padding-left: 30%;">GET TO KNOW US</li>
<li id="head" style="padding-left: 50%;">LOCATIONS</li>
<li id="head" style="padding-left: 70%;">OUR MISSION</li>
</ul>
<ul class="under">
<li id="under" style="padding-left: 10%;">
<a href="http://twitter.com">Twitter</a> <br />
<a href="http://facebook.com">Faceboook</a> <br />
<a href="http://linkedin.com">Linkedin</a> <br />
<a href="http://pinterest.com">Pinterest</a> <br />
<a href="http://youtube.com">YouTube</a> <br />
</li>
<li id="under" style="padding-left: 30%;">
<a href="http://twitter.com">About</a> <br />
<a href="http://facebook.com">Policies</a> <br />
<a href="http://linkedin.com">Careers</a> <br />
<a href="http://pinterest.com">Press</a> <br />
<a href="http://youtube.com">Developers</a> <br />
</li>
<li id="under" style="padding-left: 50%;">
<a href="http://twitter.com">Detroit</a> <br />
<a href="http://facebook.com">London</a> <br />
<a href="http://linkedin.com">Florida</a> <br />
<a href="http://pinterest.com">Las Vegas</a> <br />
<a href="http://youtube.com">California</a> <br />
</li>
<li id="under" style="padding-left: 70%;">
Fusce dapibus, tellus ac cursus commodo, tortor mauris <br />
condimentum nibh, ut fermentum massa justo sit amet <br />
risus. Integer posuere erat a ante venenatis dapibus <br />
posuere velit aliquet. Praesent commodo cursus magna, <br />
vel scelerisque nisl consectetur et. Sed posuere consectetur <br />
</li>
</ul>
<img id="fterblk" src="fterblk.png" alt="black" />
<p style="text-align: center center; position: absolute; top: 285%; left: 50%;color:white; transform: translate(-50%, -50%);">Copyright 2015-2016 @renkj</p>
</div>
</body>
</html>
这是CSS：
html{
min-height: 100%; margin: 0;
}
body { min-height: 100%; margin: 0; padding: 0; }
.menu li {
display: inline-block;
color: #fff;
text-align: center;
position: absolute;
top: 5.3%;
}
.header {
background: url("bghero.png") no-repeat;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
font-family: Montserrat;
height: 200%;
width: 100%;
font-size: 70%;
src: url('Montserrat-bold.otf') format('truetype');
}
#circle{
text-align: center;
position: absolute;
left: 2%;
top: 4%;
}
#big{
text-align: center;
position: absolute;
font-family: Times New Roman;
font-size: 900%;
top: 40%;
color: white;
left: 0%;
width: 100%;
}
#sml{
text-align: center;
position: absolute;
font-family: Times New Roman;
font-size: 150%;
top: 73%;
color: white;
left: 0%;
width: 100%;
}
#smpline{
text-align: center;
position: absolute;
top: 20%;
height: 0.2%;
width: 90%;
}
#ham{
text-align: center;
position: absolute;
top: 6%;
right:0%;
}
#src{
text-align: center;
position: absolute;
top: 5.8%;
right:0%;
}
#menu1{
text-align: center;
color: white;
right: 0%;
position: absolute;
top: 5.3%;
width: 100%;
margin: 0%;
}
#menu2{
text-align: center;
color: white;
top: 5.3%;
width: 100%;
margin: 0%;
position: absolute;
}
#menu3{
text-align: center;
color: white;
position: absolute;
right: 0%;
top: 5.3%;
width: 100%;
margin: 0%;
}
#lowerfoto{
height: 40%;
width: 100%;
z-index: -1;
}
#fteweit{
height: 40%;
width: 100%;
position: relative;
z-index: -1;
}
#fterblk{
height: 10%;
width: 100%;
}
h2 {
display: inline-block;
color: #000;
text-align: center;
font-size: 80%;
font-family: Montserrat;
position: absolute;
top: 245%;
left: 0;
width: 100%;
}
.head li {
display: inline-block;
color: #000;
text-align: left;
font-size: 80%;
font-family: Montserrat;
position: absolute;
top: 248%;
left: 0;
right: 0;
}
.under li {
display: inline-block;
color: #000;
text-align: left;
font-size: 80%;
font-family: Georgia;
font-style: italic;
position: absolute;
top: 255%;
left: 0;
right: 0;
font-style: none;
color: #565656;
z-index: auto;
}
/* unvisited link */
a:link {
color: #565656;
text-decoration: none;
}
/* visited link */
a:visited {
color: #565656;
text-decoration: none;
}
/* mouse over link */
a:hover {
color: #565656;
text-decoration: none;
}
/* selected link */
a:active {
color: #565656;
text-decoration: none;
}
（不要介意picutres。他们没有出现，因为他们不在jsfiddle。只要看看跟随我们及以下的部分，了解我们及以下，地点和下面以及我们的使命和下面。
问题是，网络下半部分的文字无法选择，我无法点击链接，因为它因某些原因无法正常工作。
有关我应该做什么的任何建议？ 谢谢！
答案 0 :(得分：2)
您的 .under li 元素包含：
padding-left: 70%;
将其更改为
margin-left: 70%;
这是fiddle
使用也不正确：
<li id="under" style="margin-left: 30%;">
...
</li>
<li id="under" style="margin-left: 50%;">
...
</li>
ID - 唯一值，您必须使用非唯一元素的类。