下拉菜单子项之间的间隙
[英]Gap between dropdown menu sub items
问题描述
I have tried to find the solution to my issue in other threads, however, none really address my particular problem, at least at such an amateur level. 
我试图在其他线程中找到解决我问题的方法，但是，至少在这样的业余水平上，没有一个能真正解决我的特定问题。 I would really appreciate some help. 我真的很感激一些帮助。
I am having issues with my drop-down menu showing gaps between drop-down items and their sub-elements. 我的下拉菜单显示下拉菜单项及其子元素之间的间隔时出现问题。
The issue is for the following menu item: Restaurants. 问题出在以下菜单项：餐馆。 The submenu for one of the items displays instantly after hovering on the top level restaurant tab, and there is a huge gap between the submenu that appears. 将其中一个项目的子菜单悬停在顶层餐厅选项卡上后立即显示，并且出现的子菜单之间有巨大的空白。
My CSS and HTML: 我的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>
2 个解决方案
解决方案1
0 2016-03-06 16:25:00
Your code was a bit of a mess with a lot of not closed list-items and lists. 您的代码有些混乱，包含许多未关闭的列表项和列表。 That said, you can position the third menu layer with position: relative; 也就是说，您可以将第三菜单层的position: relative; and position: absolute; 和position: absolute; . 。
See the JSFiddle for my solution. 有关我的解决方案，请参见JSFiddle 。
Cleaned up navigation: 清理导航：
<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>
The CSS that does the trick: 达到目的的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 */
}
解决方案2
0 2016-03-06 16:31:36
The problem is that you've put padding to all sides of all the tags. 问题是您已将填充置于所有标签的所有侧面。 You should organize your css code to put padding only to the required elements. 您应该组织CSS代码，以仅将填充元素置于所需元素中。
You want padding on all sides for anchor tags because your menu wants the spaces above and below. 您希望在所有侧面都填充锚标记，因为菜单上需要上方和下方的空格。 However the sub-items in the menu are also anchor tags and the same styling is applied to them too. 但是，菜单中的子项目也是锚标记，并且对它们应用相同的样式。 Hence the extra gap between the sub-items of menu. 因此，菜单子项之间存在额外的间隙。
You can create divs with class names and put the required padding to the classes. 您可以使用类名称创建div，然后将所需的填充物放入类中。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.