Question

我有一个关于如何在网页上正确对齐水平子菜单的问题。我达到了左边有一个标题，右边是菜单的标题。当我将鼠标悬停在主菜单上时，我的子菜单显示出来了。但是，我无法让子菜单与页面右侧对齐，并且它继续离开页面。所以我知道我必须触及“header nav li：hover ul”并且我改为亲戚和临时解决了离开页面的问题。但它只会产生另一个主菜单从其初始位置移开的问题。任何人都可以帮我解决这个问题并告诉我如何解决这个问题吗？

<!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>

Answer 1

我努力了解你想要什么。这是否想要存档？右侧主菜单和主菜单下方的子菜单？希望这对你有所帮助。

＆＃13;

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;}

＆＃13;

<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>

＆＃13;

html5水平子菜单对齐

1 个答案: