就在那时......我创建了一个工作得很好的菜单，但后来发现我需要添加我所做的下拉菜单，但由于某种原因它水平显示并将其自身向左对齐，而不是垂直并对齐它位于您将鼠标悬停在其上的链接下方。令人烦恼的是，我确实创建了一个在另一个网站上运行得很好的网站，我尝试将上一个网站的编码与这个网站的编码相匹配，但由于它们的样式不同，所以进展不顺利。
菜单的 html 是:
<body>
<div id="header">
<div id="menu_container">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="overview.html">Overview</a></li>
<li><a href="strategy.html">Strategy</a></li>
<li><a href="marketing.html">Marketing</a></li>
<li><a href="team_and_management.html">Team and Management</a></li>
<li><a href="#">Gallery</a>
<ul>
<li><a href="edgbaston.html">Edgbaston</a></li>
<li><a href="hockley.html">Hockley</a></li>
<li><a href="selly_oak.html">Selly Oak</a></li>
</ul>
</li>
<li><a href="contact_us.html">Contact Us</a></li>
</ul>
</nav>
</div>
CSS 是:
nav ul {
list-style: none;
text-align: center;
position: relative;
display: inline-table;
}
nav ul li {
display: inline;
}
nav ul li a:link, nav ul li a:visited {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
font-weight: normal;
width: 800px;
color: #FFFFFF;
line-height: 14px;
margin: 0px 10px;
padding-bottom: 8px;
border-bottom: 1px solid #FFFFFF;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
nav ul li a:hover, nav ul li a:active {
border-color: #f9cf19;
}
nav li ul {
display: none;
z-index: 999;
}
nav li:hover ul {
display: block;
position: absolute;
}
nav li:hover li a:hover {
background: #000000;
}
任何帮助将不胜感激。谢谢大家。
编辑:这是该网站的链接:http://vicarage-support.com/our_hostels.html
该链接仅位于该页面上，一旦我使其工作并且页面完成，我会将其添加到其他页面。
一指 fiddle : http://jsfiddle.net/e7y6U/
最佳答案
SeeTheC 提出了让它垂直对齐的解决方案，但要让它在您悬停的链接下方对齐，您必须将其添加到 ul li:
nav ul li {
display: inline;
position: relative;
float: left;
}
关于html - 下拉菜单未在主菜单下垂直显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21308022/