html - 下拉菜单显示在 li 的右侧而不是下方
问题描述
当我的鼠标位于相应项目上方时,我希望子菜单显示下拉菜单,但是当我将鼠标放在它上面时,子菜单出现在主菜单的右侧,而不是下方。
我尝试通过为菜单上的项目设置固定宽度来做到这一点,但它似乎无法正常工作。
我怎样才能让它按预期的方式工作?
我的 HTML 代码:
nav {
overflow: hidden;
width: 100%;
text-align: center;
align-content: center;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
display: inline-block;
}
nav ul li {
float: left;
}
.elementoMenu a {
float: left;
color: #ff9900;
padding: 14px 16px;
text-decoration: none;
display: block;
font-size: 17px;
}
.elementoMenu a:hover {
color: white;
background-color: #ff9900;
}
.submenu {
display: none;
}
.elementoMenu a:first-child:hover+.submenu, .submenu:hover {
display: inline-block;
position: absolute;
background-color: #663300;
}
<nav>
<ul>
<li class="elementoMenu">
<a href="">Inicio</a>
</li>
<li class="elementoMenu">
<a href="">Carta</a>
<div class="submenu">
<a href="1.html">Platos de Tandoori</a>
<a href="1.html">Platos de Curry</a>
<a href="1.html">Arroces</a>
<a href="1.html">Platos vegetales</a>
</div>
</li>
<li class="elementoMenu">
<a href="">Menú</a>
<div class="submenu">
<a href="1.html">Menú del día</a>
<a href="1.html">Menú degustación</a>
</div>
</li>
<li class="elementoMenu">
<a href="">Restaurante</a>
<div class="submenu">
<a href="1.html">Nuestra historia</a>
<a href="1.html">Cómo llegar</a>
</div>
</li>
<li class="elementoMenu">
<a href="">Reservas</a>
</li>
</ul>
</nav>
解决方案
使用 displayblock
而不是inline-block
:
.elementoMenu a:first-child:hover+.submenu, .submenu:hover {
display: block;
position: absolute;
background-color: #663300;
}
这是完整的代码,请检查:
nav {
overflow: hidden;
width: 100%;
text-align: center;
align-content: center;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
display: inline-block;
}
nav ul li {
display: inline-block;
}
.elementoMenu a {
color: #ff9900;
padding: 14px 16px;
text-decoration: none;
display: block;
font-size: 17px;
}
.elementoMenu a:hover {
color: white;
background-color: #ff9900;
}
.submenu {
display: none;
}
.elementoMenu a:first-child:hover+.submenu, .submenu:hover {
display: block;
position: absolute;
background-color: #663300;
}
<nav>
<ul>
<li class="elementoMenu">
<a href="">Inicio</a>
</li>
<li class="elementoMenu">
<a href="">Carta</a>
<div class="submenu">
<a href="1.html">Platos de Tandoori</a>
<a href="1.html">Platos de Curry</a>
<a href="1.html">Arroces</a>
<a href="1.html">Platos vegetales</a>
</div>
</li>
<li class="elementoMenu">
<a href="">Menú</a>
<div class="submenu">
<a href="1.html">Menú del día</a>
<a href="1.html">Menú degustación</a>
</div>
</li>
<li class="elementoMenu">
<a href="">Restaurante</a>
<div class="submenu">
<a href="1.html">Nuestra historia</a>
<a href="1.html">Cómo llegar</a>
</div>
</li>
<li class="elementoMenu">
<a href="">Reservas</a>
</li>
</ul>
</nav>
推荐阅读
- python - 尝试解压缩 tar.gz 文件并将其保存为文件夹中的多个可读文本文件,然后重新压缩它
- java - 使用递归的数字模式
- c++ - 为什么 operator() 在我的程序中被调用了两次?
- sonarqube - SonarQube WebApi /api/ce/task 调用中“状态”的可能值是什么?
- html - 停止和运行 Docker 容器不会更新
- checksum - Splunk 部署服务器在哪里存储自己的校验和数据?
- javascript - 如何在不加载整个文件的情况下使用 XmlHttpRequest 检查页面是否包含 str?
- python - 如何使用增量 DeltaLake 表提高合并操作的性能?
- c# - 网络错误后 JsonTextReader 搞混了
- python - 在 Raspberry Pi 4 上无法使用 PyAudio 获得音频输出