我已使用此方法集中对齐我的菜单：http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
我的选择器虽然存在问题。我用来显示子菜单和样式链接的选择器适用于所有嵌套标签。
我已阅读+运算符选择下一个兄弟，但我尝试了#menu-main-menu-container li:hover a + ul之类的内容，但它不起作用。悬停选择器让我有点困惑。
我在下面添加了代码段。有人可以告诉我如何选择悬停在li上时显示的第一个匹配项吗？
我也有第二个嵌套子菜单没有正确对齐的问题，但我认为这可能是由于我将菜单集中在一起并且不确定它是否可以修复。
任何帮助表示感谢。
#menu-main-menu-container {
width: 100%;
position: relative;
font: 300 16px/16px Lato, Arial; }
#menu-main-menu-container ul {
position: relative;
text-align: center;
float: left;
left: 50%;
margin: 0;
padding: 0; }
#menu-main-menu-container ul ul {
position: absolute;
display: none;
margin-top: 15px; }
#menu-main-menu-container ul ul ul {
right: 0; }
#menu-main-menu-container ul li {
right: 50%;
background-color: #f4f4f4; }
#menu-main-menu-container li {
list-style: none;
position: relative;
float: left;
padding: 15px;
margin: 0;
text-transform: uppercase; }
#menu-main-menu-container li:hover ul {
display: block; }
#menu-main-menu-container a {
white-space: nowrap;
text-decoration: none;
color: blue; }
#menu-main-menu-container li:hover {
background-color: blue;
transition: 1s; }
#menu-main-menu-container li:hover a {
color: white; }<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="top-nav-menu.css">
</head>
<body>
<div id="menu-main-menu-container">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Sub Item 1</a>
<ul>
<li><a href="#">Hidden Sub Item 1</a></li>
<li><a href="#">Hidden Sub Item 2</a></li>
<li><a href="#">Hidden Sub Item 3</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
</body>
</html>
答案 0 :(得分：1)
可能与：
#menu-main-menu-container li:hover > ul
> 如果您使用>运算符，请确保ul必须是li:hover的直接子代。