1
リンクテキストの上にカーソルを置くとリンクはクリックできませんが、カーソルをテキストの少し下に置くとクリック可能になります。私は今学んでいるので、なぜそれがそれをやっているのか、それを修正する方法を私に説明してください。ナビゲーションバーが正しく動作しない
HTML
<!DOCTYPE html>
<html Lang="en">
<head>
<meta charset="utf-8">
<title>Welcome!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
*{
margin: 0;
padding: 0;
}
header{
width: 1024px;
margin: 0 auto;
background-color: #81D4FA;
height: 50px;
}
header h1{
color: white;
position: relative;
left: 100px;
top: 5px;
}
nav{
margin-top: -20px;
margin-right: 100px;
}
nav ul{
float: right;
margin: 0;
padding: 0;
}
nav ul li{
list-style-type: none;
display: inline-block;
}
nav ul li a{
text-decoration: none;
color: white;
padding: 16px 20px;
}
a:hover{
background-color: #84FFFF;
}
.main{
width: 1024px;
margin-left: auto;
margin-right: auto;
}
.laptop{
width: 1024px;
}
.title{
background-color: #0D23FD;
height: 50px;
width: 300px;
position: relative;
top: -650px;
left: -10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}
.title h3{
color: white;
text-align: center;
position: relative;
top: 13px;
} <header>
<h1>Jack Smith</h1>
<nav>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">My Work</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
</header>
<div class="main">
<img class="laptop" src="images/laptop.jpg">
<div class="title">
<h3>Front-End Web developer</h3>
</div>
</div>