我创建了一个导航菜单，其中有许多元素，我让它水平滚动，以获得更多的用户体验。菜单位于适合浏览器屏幕的容器内。现在，在菜单项上，有子菜单悬停，下拉元素显示在导航容器内，即使我增加了z-index，也不在它的顶部。如何修复我的代码？
这是我的实际代码：
<html>
<head>
<style>
.custom-container {
width: 100%;
overflow-x: auto;
position: relative;
z-index: 1;
}
ul {
display: flex;
list-style-type: none;
margin: 0;
overflow-y: none;
padding: 0;
background-color: #333;
white-space: nowrap;
position: relative;
z-index: 2;
}
li {
flex: 0 0 auto;
background-color: #333;
position: relative;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #04aa6d;
}
.submenu {
display: none;
position: absolute;
background-color: #333;
width: 200px;
z-index: 3;
left: 0;
top: calc(100% + 10px);
}
li:hover .submenu {
display: block;
}
.submenu a {
padding: 8px 16px;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgb(255 255 255);
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #00ce9d;
}
::-webkit-scrollbar:horizontal {
height: 5px;
background-color: white;
}
::-webkit-scrollbar-thumb:horizontal {
border-radius: 5px;
background: #00ce9d;
}
</style>
</head>
<body>
<div class="custom-container">
<ul>
<li>
<a href="#home">Home</a>
<div class="submenu">
<a href="#">Submenu Item 1</a>
<a href="#">Submenu Item 2</a>
<a href="#">Submenu Item 3</a>
</div>
</li>
<li>
<a href="#news">News</a>
<div class="submenu">
<a href="#">Submenu Item 1</a>
<a href="#">Submenu Item 2</a>
<a href="#">Submenu Item 3</a>
</div>
</li>
<li>
<a href="#contact">Contact</a>
<div class="submenu">
<a href="#">Submenu Item 1</a>
<a href="#">Submenu Item 2</a>
<a href="#">Submenu Item 3</a>
</div>
</li>
<li>
<a href="#home">Home</a>
<div class="submenu">
<a href="#">Submenu Item 1</a>
<a href="#">Submenu Item 2</a>
<a href="#">Submenu Item 3</a>
</div>
</li>
<li>
<a href="#news">News</a>
<div class="submenu">
<a href="#">Submenu Item 1</a>
<a href="#">Submenu Item 2</a>
<a href="#">Submenu Item 3</a>
</div>
</li>
<li>
<a href="#home">Home</a>
<div class="submenu">
<a href="#">Submenu Item 1</a>
<a href="#">Submenu Item 2</a>
<a href="#">Submenu Item 3</a>
</div>
</li>
<li>
<a href="#news">News</a>
<div class="submenu">
<a href="#">Submenu Item 1</a>
<a href="#">Submenu Item 2</a>
<a href="#">Submenu Item 3</a>
</div>
</li>
<li>
<a href="#home">Home</a>
<div class="submenu">
<a href="#">Submenu Item 1</a>
<a href="#">Submenu Item 2</a>
<a href="#">Submenu Item 3</a>
</div>
</li>
<li>
<a href="#news">News</a>
<div class="submenu">
<a href="#">Submenu Item 1</a>
<a href="#">Submenu Item 2</a>
<a href="#">Submenu Item 3</a>
</div>
</li>
<li>
<a href="#contact">Contact</a>
<div class="submenu">
<a href="#">Submenu Item 1</a>
<a href="#">Submenu Item 2</a>
<a href="#">Submenu Item 3</a>
</div>
</li>
<li>
<a href="#home">Home</a>
<div class="submenu">
<a href="#">Submenu Item 1</a>
<a href="#">Submenu Item 2</a>
<a href="#">Submenu Item 3</a>
</div>
</li>
<li>
<a href="#news">News</a>
<div class="submenu">
<a href="#">Submenu Item 1</a>
<a href="#">Submenu Item 2</a>
<a href="#">Submenu Item 3</a>
</div>
</li>
<li>
<a href="#contact">Contact</a>
<div class="submenu">
<a href="#">Submenu Item 1</a>
<a href="#">Submenu Item 2</a>
<a href="#">Submenu Item 3</a>
</div>
</li>
<li>
<a href="#home">Home</a>
<div class="submenu">
<a href="#">Submenu Item 1</a>
<a href="#">Submenu Item 2</a>
<a href="#">Submenu Item 3</a>
</div>
</li>
<li>
<a href="#news">News</a>
<div class="submenu">
<a href="#">Submenu Item 1</a>
<a href="#">Submenu Item 2</a>
<a href="#">Submenu Item 3</a>
</div>
</li>
<li>
<a href="#contact">Contact</a>
<div class="submenu">
<a href="#">Submenu Item 1</a>
<a href="#">Submenu Item 2</a>
<a href="#">Submenu Item 3</a>
</div>
</li>
<li>
<a href="#home">Home</a>
<div class="submenu">
<a href="#">Submenu Item 1</a>
<a href="#">Submenu Item 2</a>
<a href="#">Submenu Item 3</a>
</div>
</li>
<li>
<a href="#news">News</a>
<div class="submenu">
<a href="#">Submenu Item 1</a>
<a href="#">Submenu Item 2</a>
<a href="#">Submenu Item 3</a>
</div>
</li>
<li>
<a href="#contact">Contact</a>
<div class="submenu">
<a href="#">Submenu Item 1</a>
<a href="#">Submenu Item 2</a>
<a href="#">Submenu Item 3</a>
</div>
</li>
</ul>
</div>
</body>
</html>当前行为：
期望行为：
子菜单项必须位于水平滚动条的顶部：
1条答案
按热度按时间68bkxrlz1#
兄弟，实际上有意外的结果，因为父级的css溢出，和z-index属性不能解决这个问题。我只在css中改变2个谎言。请检查这是否适合您。