body {
margin: auto;
max-width: 98%;
overflow-y: scroll;
}
div {
border-radius: 5px;
}
span {
font-weight:bold;
}
#header {
position: absolute;
z-index: 1;
background-color: orange;
height: 70px;
width: 98%;
margin-top: -10px;
margin-bottom: 10px;
}
#name {
float:left;
margin-left: 400px;
margin-top: 10px;
padding-top: 1px;
font-size: 20px;
font-family: Verdana, sans-serif;
color: brown;
}
#contact {
position: absolute;
margin-left: 250px;
margin-top: 30px;
padding-top: -1px;
font-family: Verdana, sans-serif;
color: brown;
}
#email {
position: absolute;
margin-left: 360px;
margin-top: 45px;
padding-top: 1px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: brown;
}
a:hover {
font-weight: bold;
}
a,visited {
color: black;
}
#nav {
position: relative;
background-color: brown;
float: left;
width: 11%;
height: 820px;
margin-top: 70px;
margin-bottom: 10px;
}
#nav_wrapper {
width: 900px;
margin: 0px auto;
text-align: left;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
position: relative;
}
#nav ul li {
display: block;
}
#nav ul li:hover {
background-color: #333;
width: 219px;
}
#nav ul a,visited {
color: #ccc;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul a:hover {
color: #099;
text-decoration: none;
padding: auto;
}
#nav ul li:hover ul {
display: block;
width: 219px;
}
#nav ul ul {
display: none;
position: absolute;
}
#nav ul ul li {
display: block;
padding: 25.5px;
background-color: #222;
}
#nav ul ul li:hover {
color: #099;
width: 168px;
}
#nav ul ul li,visited {
color: #ccc;
}
ul .sub_navi {
display: none;
}
li:hover .sub_navi {
background: #999;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 220px;
top: 4px;
}
.right {
position: static;
background-color: linen;
float: right;
width: 88%;
height: 820px;
margin-top: 70px;
margin-bottom: 10px;
padding: 5px;
}
h4 {
margin-left: 5px;
margin-bottom: 15px;
font-family: Verdana, sans-serif;
text-decoration: underline;
}
.right p {
margin-left: 5px;
margin-right: 5px;
margin-top: -10px;
font-family: Garamond, serif;
color: #000000;
}
#company {
font-family: Garamond, serif;
}
#position {
font-style: italic
}
li {
list-style-type: square;
}
#footer {
height: 40px;
width: 100%;
background-color: orange;
position: relative;
clear: both;
}<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<title></title>
</head>
<body>
<div id=header>
<p id="name">Henry jones</p>
</div>
<div id="nav">
<div id="nav_wrapper">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="#">About Me</a>
<ul>
<li><a href="#">Board Games</a>
<ul class="sub_navi">
<li>Cosmic Encounter</li>
<li>Agricola</li>
<li>Trajan</li>
</ul>
</li>
<li>League of Legends</li>
<li>Sports</li>
</ul>
</li>
<li><a href="#">Travels</a>
<ul>
<li><a href="https://www.google.com">Paris</a></li>
<li><a href="https://www.google.com">Turks and Caicos</a></li>
<li><a href="https://www.google.com">Puerto Rico</a></li>
<li><a href="https://www.google.com">Chicago</a></li>
</ul>
</li>
</li>
<li><a href="resume.html">Resume</a></li>
<li><a href="#">Contact</a>
<ul>
<li>Phone</li>
<li>Email</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="right">
<h4>Welcome</h4>
<p><img src="https://pbs.twimg.com/media/CAY3PIpXEAAkO75.png"></a>
</p>
我创建了下拉菜单但是我遇到了一些麻烦。请帮我这个HTML。问题是当我将光标悬停在导航栏I旁边时，导航栏会一直“闪烁”。我想要一些助手如何更有效地编码。此外，我在哪里放置display：none以使棋盘游戏子navi在突出显示其他内容时消失。谢谢。
答案 0 :(得分：0)
尝试将width: 100%;用于#nav_wrapper。这将解决问题。
答案 1 :(得分：0)
我终于修好了！
更改为
和
更改为