CSS下拉框对齐问题
我正在处理一个纯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>
相关CSS
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移到右边，并检查了边距和填充设置为0。同样在我的例子中，子项目在悬停时向右移动，在“隐藏”时似乎保持良好。
共有2个答案
我建议你使用软件Web菜单制作器
http://www.easymenumaker.com/
在CSS文件的第94行，更改display:inherit
用于显示：块
。inherit属性将下拉菜单显示为内联块。
-
问题内容： 将单选按钮/复选框与文本正确对齐的最干净方法是什么？到目前为止，我一直使用的唯一可靠的解决方案是基于表的： 有些人可能会对此表示不满。我刚刚花了一些时间（再次）研究无表解决方案，但失败了。我尝试了浮动，绝对/相对定位和类似方法的各种组合。它们不仅主要默默地依赖于单选按钮/复选框的估计高度，而且在不同的浏览器中的行为也有所不同。理想情况下，我想找到一种不假设大小或浏览器特殊问题的解决方案
-
问题内容： 我在浮动div中有一个img，但我不知道如何垂直居中。 垂直对齐：当然中间不起作用。 问题答案： 要在父元素中垂直对齐文本，并谨记的是一个内联元素等行为 类似 文本，你可以简单地设置到父元素： 。
-
各种大小的下拉框 <div class="row"> <div class="field-label">mini</div> <div class="select-size" data-skin="mini"></div> </div> <div class="row"> <div class="field-label">tiny</div> <div class=
-
本文向大家介绍CSS对齐导航栏，包括了CSS对齐导航栏的使用技巧和注意事项，需要的朋友参考一下 示例 水平对齐的导航（菜单）栏包含一些应该对齐的项目。容器中的第一个（左）项目没有左边距，容器中的最后一个（右）项目没有右边距。项目之间的距离是相等的，与单个项目的宽度无关。 的HTML 的CSS 笔记 的nav，ul并且li标签被选择为他们的“导航（菜单）项的列表”语义。当然也可以使用其他标签。 所述
-
问题内容： 我正在尝试制作一个简单的CSS下拉菜单，当您将鼠标悬停在链接上时，将显示子菜单。当您将鼠标悬停在li上时，我已经设法实现了这一点，但无法弄清楚如何使用链接来实现。 我之所以尝试使用链接而不是li来执行此操作，是因为我的菜单宽度为100％，并且li所占的面积比链接大，因此，如果将鼠标悬停在该区域上，则不显示该子菜单不想。 我的CSS如下： 问题答案： 如果可能的话，我会避免使用JS。这不
-
.dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown:hover .dropbtn {