【发布时间】：2015-06-10 04:55:03
【问题描述】：
body {
margin: 0px;
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;
padding: 0;
}
a,visited {
color: black;
padding: 0;
}
#nav {
position: relative;
background-color: brown;
float: left;
width: 11%;
height: 830px;
margin-top: 70px;
margin-bottom: 10px;
}
#nav_wrapper {
width: 100%;
margin: 0px auto;
text-align: left;
z-index: 1;
}
#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;
padding: 15px;
text-decoration: none;
display: block;
}
#nav ul a:hover {
color: #099;
text-decoration: none;
padding: auto;
display: block;
}
#nav ul li:hover ul {
display: block;
width: 100%;
margin: 0 auto;
}
#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;
margin: 0;
}
li:hover #Board_Games {
background: #999;
border: #099 solid;
border-width: 1px;
display: block;
position: absolute;
left: 219.2px;
top: 3px;
}
li:hover .sub_navi {
background: #999;
border: #099 solid;
border-width: 1px;
display: block;
position: absolute;
left: 290px;
top: 100px;
}
.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;
clear: both;
padding: 0px;
bottom: 0px;
}
#footer p {
margin-top: 10px;
margin-left: 400px;
text-shadow: 1px 1px 1px black;
color: brown;
}<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<title></title>
</head>
<body>
<div id=header>
<p id="name">Hang Li</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 id="Board_Games">
<li><a href="https://boardgamegeek.com/thread/536444/cosmodex-20-encyclopedia-cosmic-encounter">Cosmic Encounter</a></li>
<li><a href="https://boardgamegeek.com/thread/536444/cosmodex-20-encyclopedia-cosmic-encounter">Agricola</a></li>
<li><a href="https://boardgamegeek.com/thread/536444/cosmodex-20-encyclopedia-cosmic-encounter">Trajan</a></li>
</ul>
</li>
<li><a href="#">League of Legends</a>
<ul class="sub_navi">
<li><a href="https://boardgamegeek.com/thread/536444/cosmodex-20-encyclopedia-cosmic-encounter">Orianna</a></li>
<li><a href="https://boardgamegeek.com/thread/536444/cosmodex-20-encyclopedia-cosmic-encounter">Kalista</a></li>
<li><a href="https://boardgamegeek.com/thread/536444/cosmodex-20-encyclopedia-cosmic-encounter">Annie</a></li>
</ul>
</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.flickr.com/photos/56661116@N02/sets/72157642714119143/">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>
</div>
<div id="footer">
<p>Copyright (c) 2010 mysite.com All rights reserved</p>
</div>
</body>
</html>嗨一整天都被困在这个问题上。
我的问题是
问题 1：当您将鼠标悬停在“关于我”上时，会出现下拉菜单，并且棋盘游戏和英雄联盟的下拉菜单也会出现，但我没有。我在；只有当我将鼠标悬停在棋盘游戏上时，它们才会弹出。 问题2：英雄联盟的下拉菜单没有消失，棋盘游戏的下拉菜单位于英雄联盟的菜单后面。
【问题讨论】：
标签： html css drop-down-menu navigation navigationbar