我正在开发一个纯CSS下拉菜单，但遇到了一些对齐问题。
具体来说：将鼠标悬停在各自的菜单项上时，子菜单项会向右移动。这是小提琴：https://jsfiddle.net/fhakjnhe/5/
.HTML
<body>
<header>
<div id="menustrip">
<div id="logo_container">
<h1>LOGO</h1>
</div>
<div id="menu">
<nav>
<ul>
<li><a id="active-page" href="#">AAA</a></li
><li><a href="#">BBB</a>
<ul>
<li style="background-color:red;">A</li>
<li>B</li>
</ul>
</li
><li><a href="#">CCC</a></li
><li><a href="#">DDD</a></li
><li><a href="#">EEE</a>
<ul>
<li style="background-color:blue;">A2</li>
<li>B2</li>
</ul>
</li
><li><a href="#">FFF</a></li
><li><a id="quote-page" href="#">GGG</a></li>
</ul>
</nav>
</div>
</div>
相关云集
header #menustrip #menu nav ul
{
list-style: none;
position: relative;
}
header #menustrip #menu nav ul li
{
display: inline-block;
}
header #menustrip #menu nav a
{
display: block;
color: #1d120c;
font-weight: bold;
font-size: 18px;
padding: 0 /*15px*/10px;
margin: 0;
border: 2px solid transparent;
}
header #menustrip #menu nav a:hover
{
border-left: 2px solid #97bc14;
border-right: 2px solid #97bc14;
color: #97bc14
}
header #menustrip #menu nav a#active-page
{
color: #97bc14
}
header #menustrip #menu nav a#quote-page
{
margin-left: 15px;
border: 2px solid #97bc14;
color: #97bc14
}
header #menustrip #menu nav a#quote-page:hover
{
border: 2px solid #97bc14;
background-color: #97bc14;
color: #fcffff;
}
header #menustrip #menu nav ul li ul
{
/*display: none;*/
position: absolute;
padding-left: 0;
}
header #menustrip #menu nav ul li:hover > ul
{
display: inherit;
}
header #menustrip #menu nav ul li ul li
{
/*left: -100%;*/
min-width: 100px;
float: none;
display: list-item;
position: relative;
}
我检查了一个类似的问题CSS下拉菜单：nav ul ul li向右移动并检查margin和padding是否设置为0。同样在我的情况下，子项目在悬停时向右移动，在"隐藏"时似乎保持正常。
在 CSS 文件的第 94 行，更改 display: block; 的display: inherit;。inherit 属性将下拉菜单显示为内联块。
我建议你使用软件Web菜单制作器和按钮制作器该软件可让您使用Java脚本或仅CSS创建专业而美观的菜单和按钮。
http://www.easymenumaker.com/