我有一个关于如何在网页上正确对齐水平子菜单的问题。我达到了这样的程度，即我有一个标题，左侧带有 Logo ，右侧带有菜单。我让我的子菜单显示出来，我将鼠标悬停在主菜单上。但是，我无法让子菜单与页面右侧对齐，并且它继续离开页面。 所以我知道我必须触摸“header nav li:hover ul”，然后我更改为 relative 并临时解决了离开页面的问题。但这只会产生另一个问题，即主菜单会离开其初始位置。 谁能帮我解决这个 CSS 并告诉我如何解决这个问题？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
a {text-decoration:none;color:#000;}
/* header */
header {width:980px;height:100px;margin:0 auto;margin-top:20px;background-color:Ff5f5f5;border-style:solid;}
header #logo {margin-left:10px;float:left;font-size:36px;}
/* menu */
header nav {margin:0;padding:0;float:right;margin-top:40px;display:block;}
header nav ul {list-style:none;}
header nav li {float:left;padding:0 8px;display:inline-block;}
header nav li a {display:inline-block;text-decoration:none;font-weight:700;}
header nav li a:hover {color:#09F;}
header nav li ul{display:none;}
/* submenu */
header nav li:hover ul{display:block;position:absolute;}
header nav li:hover ul li {display:inline-block;float:left}
header nav li:hover ul li a{font-weight:400;}
header nav li ul li a{width:auto;}
</style>
</head>
<body>
<header>
<div id="logo">
<p>LOGO</p>
</div> <!-- end logo -->
<nav>
<ul>
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">SubMenu 1</a></li>
<li><a href="#">SubMenu 2</a></li>
<li><a href="#">SubMenu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">SubMenu 1</a></li>
<li><a href="#">SubMenu 2</a></li>
<li><a href="#">SubMenu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">SubMenu 1</a></li>
<li><a href="#">SubMenu 2</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a>
<ul>
<li><a href="#">SubMenu 1</a></li>
<li><a href="#">SubMenu 2</a></li>
<li><a href="#">SubMenu 3</a></li>
<li><a href="#">SubMenu 4</a></li>
<li><a href="#">SubMenu 5</a></li>
</ul>
</li>
</ul> <!-- end main ul -->
</nav> <!-- end nav -->
</header>
</body>
</html>
最佳答案
我已经努力去理解你想要什么。这是你想要存档的吗？右侧的主菜单和主菜单下方的子菜单？希望对您有所帮助。
a {text-decoration:none;color:#000;}
/* header */
header {width:980px;height:100px;margin:0 auto;margin-top:20px;background-color:Ff5f5f5;border-style:solid;}
header #logo {margin-left:10px;float:left;font-size:36px;}
/* menu */
header > nav {margin:0;padding:0;float:right;margin-top:40px;display:block;}
header > nav > ul {list-style:none; padding-left: 0px;}
header > nav > ul > li {float: left; width: 100px;text-align:right;}
header > nav > ul > li > ul {display: none;list-style:none;padding-left: 0px; background-color: white; border: 1px solid black;}
header > nav > ul > li > ul > li {display: inline-block;}
header > nav > ul > li:hover > ul {display: block;list-style:none;white-space: nowrap; float: right;}<header>
<div id="logo">
<p>LOGO</p>
</div> <!-- end logo -->
<nav>
<ul>
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">SubMenu 1</a></li>
<li><a href="#">SubMenu 2</a></li>
<li><a href="#">SubMenu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">SubMenu 1</a></li>
<li><a href="#">SubMenu 2</a></li>
<li><a href="#">SubMenu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">SubMenu 1</a></li>
<li><a href="#">SubMenu 2</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a>
<ul>
<li><a href="#">SubMenu 1</a></li>
<li><a href="#">SubMenu 2</a></li>
<li><a href="#">SubMenu 3</a></li>
<li><a href="#">SubMenu 4</a></li>
<li><a href="#">SubMenu 5</a></li>
</ul>
</li>
</ul> <!-- end main ul -->
</nav> <!-- end nav -->
</header>关于html5水平子菜单对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35400960/