我在CSS滑动菜单方面遇到了一些问题。
我看过很多教程,但是有很多不必要的代码,而且我很难区分哪些是必需的代码,哪些只是其他CSS。
我想要一个仅使用CSS的悬停菜单,因为我正在工作的网站有很多用户故意禁用脚本(JavaScript)。
我不明白,在CSS中,当用户悬停在父列表项上时,如何使“子菜单”出现在其父列表项下方。 请问有人可以帮助我理解CSS中这是如何实现的吗?
以下是我所指的图像:
以下基本形式可以正常工作,但样式可以根据自己的喜好进行调整(位置、边框、颜色等):
<ul>
<li>Simple List item
<ul>
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
</ul>
</li>
</ul>
使用以下CSS:
ul li {
position: relative;
}
ul ul {
position: absolute;
top: 1em;
left: 0;
display: none;
}
ul > li:hover ul {
display: block;
}
li
上设置position: relative;
;position: absolute
元素相对于第一个具有非static
定位的祖先元素(我想),否则相对于body
元素定位。 - David Thomas