我试图在其他线程中找到我的问题的解决方案，但是，没有一个真正解决我的特定问题，至少在这样的业余级别。我真的很感激一些帮助。
我的下拉菜单出现问题，显示下拉项目及其子元素之间的差距。
问题出在以下菜单项：餐馆。其中一个项目的子菜单在悬停在顶级餐厅标签上后立即显示，并且出现的子菜单之间存在巨大差距。
我的CSS和HTML：
body {
font-family: verdana, sans-serif;
font-size: 100%;
}
#siteWrapper {
background-color: yellow;
width: 65%;
margin: 0 auto;
}
footer {
font-size: small;
color: white;
background-color: grey;
}
aside {
background-color: green;
border-style: solid;
}
article {
border-style: solid;
background-color: green;
}
section {}
/* TABLE */
table,
th,
td {
border: 1px solid black;
text-align: center;
}
/* END OF TABLE */
/* HEADINGS */
h1 {
text-align: center;
font-size: 250%;
}
h2 {
text-align: center;
font-size: 175%;
}
h3 {
text-align: center;
font-size: 125%;
}
/* END OF HEADINGS */
/* Overall menu area */
.nav {
background-color: pink;
text-align: center;
}
/* Unordered lists within nav */
.nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
/* Unordered lists within nav that have list elements (links) */
.nav ul li {
display: inline-block;
}
/* Hover properties for the top menu links */
.nav ul li:hover {
background-color: yellow;
}
/* Normal Link properties */
.nav ul li a,
visited {
color: purple;
padding: 20px 10px 20px 10px;
display: block;
text-decoration: none;
}
/* Hover links are block */
.nav ul li:hover ul {
display: block;
}
/* Drop-down menus properties */
.nav ul ul {
position: absolute;
text-align: left;
display: none;
background-color: red;
}
/* Drop-downs are blocks */
.nav ul ul li {
display: block;
}
/* Padding properties for the hyperlinks */
.nav ul ul li a,
visited {
padding: 15px 10px 15px 10px;
}
/* Drop-down hover colours */
.nav ul ul li:hover {
background-color: yellow;
}
.nav ul ul ul {
min-width: 175px;
background-color: #ADC9F0;
margin: -48px 0 0 160px;
}
/* */
.imageBanner {
border-style: solid;
background-color: orange;
height: 200px;
overflow: hidden;
background-image: url(porsche.gif);
background-repeat: no-repeat;
background-size: cover;
}
.imageBanner h2 {
color: #624791;
text-align: left;
}
.imageBanner img {
width: 100%;
}
/* All code below is controlling only the form elements on the website */
legend {
font-size: 20px;
}
form {
background: -webkit-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
background: linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
margin: auto;
position: relative;
width: 550px;
height: 700px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
line-height: 24px;
font-weight: bold;
color: #09C;
text-decoration: none;
border-radius: 10px;
padding: 10px;
border: 1px solid #999;
border: inset 1px solid #333;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
input {
width: 375px;
display: block;
border: 1px solid #999;
height: 25px;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
textarea {
width: 500px;
height: 200px;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="favicon.ico" type="image/gif" />
<link rel="stylesheet" type="text/css" href="maincopy.css" />
<meta charset="utf-8" />
<title>Universal</title>
<!-- the code below is for the background pattern on the site -->
<style type='text/css'>
body {
background-image: url(128-174.jpg);
background-repeat: repeat;
}
</style>
</head>
<body>
<div id="siteWrapper">
<div class="nav">
<ul>
<li><a href="#">Index</a>
</li>
<li>
<li><a href="#">Parks</a>
<!-- Code below: creates a new layer onto the lists -->
<ul>
<!-- Code below: makes a dropdown menu for the above menu item -->
<li><a href="disneyland.html">Disney Land</a>
<li><a href="universal.html">Universal</a>
</li>
<li><a href="buschgardens.html">Busch Gardens</a>
</li>
<!-- Code below: reverts the following contents of the list to a higher tier -->
</ul>
<li>
<a href="#">Restaurants</a>
<ul>
<li><a href="logans.html">Logans</a>
</li>
<li><a href="outback.html">Outback</a>
</li>
<ul>
<li><a href="#">Test Restaurant</a>
</li>
</ul>
<li><a href="perkins.html">Perkins</a>
</li>
</ul>
<li>
<a href="statistics.html">Statistics</a>
</ul>
</div>
<article>
ARTICLE
</article>
<aside>
<div class="disneyImage1">
</aside>
<footer>
© Billy 2015. Disclaimer: all expressions on this site are strictly personal opinions and preferences and may not actually reflect the locations, businesses, etc. factually.
</footer>
</div>
</body>
</html>
答案 0 :(得分：0)
你的代码有点乱，有很多未关闭的列表项和列表。也就是说，您可以使用position: relative;和position: absolute;定位第三个菜单图层。
请参阅JSFiddle了解我的解决方案。
清理导航：
<div class="nav">
<ul>
<li><a href="#">Index</a></li>
<li><a href="#">Parks</a>
<ul>
<li><a href="disneyland.html">Disney Land</a></li>
<li><a href="universal.html">Universal</a></li>
<li><a href="buschgardens.html">Busch Gardens</a></li>
</ul>
</li>
<li><a href="#">Restaurants</a>
<ul>
<li><a href="logans.html">Logans</a></li>
<li><a href="outback.html">Outback</a>
<ul>
<li><a href="#">Test Restaurant</a></li>
</ul>
</li>
<li><a href="perkins.html">Perkins</a>
</ul>
</li>
<li><a href="statistics.html">Statistics</a></li>
</ul>
</div>
实现这一诀窍的CSS：
.nav ul ul li {
position: relative;
}
.nav ul ul ul {
min-width: 175px;
background-color: #ADC9F0;
position: absolute; /* Positioning the third layer */
left: 100%; /* Positioning the third layer */
top: 0; /* Positioning the third layer */
}
答案 1 :(得分：0)
问题在于您已将填充添加到所有标记的所有边。您应该组织您的css代码，仅将填充放入所需的元素。
您希望所有边都填充锚标记，因为您的菜单需要上方和下方的空格。但是，菜单中的子项也是锚标记，并且同样的样式也应用于它们。因此，菜单子项之间存在额外差距。
您可以使用类名创建div并将所需的填充放入类中。