如何获得覆盖其他项目的下拉菜单

Question

我正在创建下拉菜单。然而，当我将鼠标悬停在它上时，菜单会将所有内容向下推。我只想覆盖下面的所有内容。当我尝试为sub-menu设置position: absolute;时，似乎有效，但它删除了所有样式、颜色。。控制。

请帮我拿这个。

这是代码：

@font-face {
font-family: 'Varela Round';
font-style: normal;
font-weight: 400;
src: local('Varela Round Regular'), local('VarelaRound-Regular'), url(https://fonts.gstatic.com/s/varelaround/v13/w8gdH283Tvk__Lua32TysjIfp8uK.ttf) format('truetype');
}
* {
box-sizing: border-box;
}
:root {
--accent-color: #45494e;
--gradient-color: #fbfbfb;
}
a:focus {
outline: none;
position: relative;
}
a:focus:after {
width: 50px;
}
a:after {
content: "";
background: #fbfbfb;
position: absolute;
bottom: 5px;
left: 15px;
height: 3px;
width: 0;
transition: 0.5s;
transition-delay: 0.2s;
}
body {
background: #45494e;
font-family: "Varela Round", Nunito, Montserrat, sans-serif;
margin: 0;
padding: 0;
text-transform: capitalize;
}
.menu {
margin: 15px;
position: relative;
display: block;
}
.menu > ol {
list-style: none;
margin: 30px 0;
padding: 0;
}
.menu > ol > li {
background: #3c3c3c;
border-left: 5px solid var(--gradient-color);
margin-bottom: 1px;
position: relative;
transition: 0.5s;
}
.menu > ol > li:nth-child(1) {
--accent-color: #fda085;
--gradient-color: #f6d365;
}
.menu > ol > li:nth-child(2) {
--accent-color: #bff098;
--gradient-color: #6fd6ff;
}
.menu > ol > li:nth-child(3) {
--accent-color: #ea8d8d;
--gradient-color: #a890fe;
}
.menu > ol > li:nth-child(4) {
--accent-color: #d8b5ff;
--gradient-color: #1eae98;
}
.menu > ol > li:nth-child(5) {
--accent-color: #c6ea8d;
--gradient-color: #fe90af;
}
.menu > ol > li a {
color: #fbfbfb;
display: block;
padding: 15px;
position: relative;
text-decoration: none;
z-index: 1;
}
.menu > ol > li a:not(:last-child):before {
content: "f078";
font-family: fontAwesome;
font-size: 0.75em;
line-height: 50px;
position: absolute;
right: 25px;
top: 0;
bottom: 0;
margin: auto;
transition: 0.5s;
}
.menu > ol > li:focus,
.menu > ol > li:focus-within,
.menu > ol > li:hover {
z-index: 100;
}
.menu > ol > li:focus:after,
.menu > ol > li:focus-within:after,
.menu > ol > li:hover:after {
max-width: 800px;
}
.menu > ol > li:focus .sub-menu,
.menu > ol > li:focus-within .sub-menu {
max-height: 500px;
}
.menu > ol > li:focus a:before,
.menu > ol > li:focus-within a:before {
transform: rotate(-180deg);
}
.menu > ol > li:after {
background: #3c3c3c;
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
transition: 0.5s;
max-width: 0;
overflow: hidden;
}
.menu > ol .menu-item {
position: relative;
}
.menu > ol .sub-menu {
border-left: 1px solid #fbfbfb;
margin-left: 22.5px;
list-style: none;
max-height: 0px;
overflow: hidden;
padding-left: 7.5px;
position: relative;
transition: 0.5s;
z-index: 1;
}
.menu > ol .sub-menu li {
font-size: 0.9em;
}
.menu > ol .sub-menu li:hover,
.menu > ol .sub-menu li a:focus {
background: rgba(60, 60, 60, 0.3);
}
.menu > ol .sub-menu li a:after {
bottom: 5px;
height: 1px;
}
.menu > ol .sub-menu li a:hover:after,
.menu > ol .sub-menu li a:focus:after {
width: 15px;
}
@media (min-width: 600px) {
a:focus,
a:hover {
position: relative;
}
a:focus:after,
a:hover:after {
width: 50px;
}
a:after {
left: 0;
right: 0;
margin: auto;
}
.menu {
margin: 0;
margin-top: 0vh;
}
.menu > ol {
display: block;
max-width: none;
text-align: center;
}
.menu > ol > li {
border-top: 5px solid var(--accent-color);
border-left: 0;
display: inline-block;
margin-left: -5px;
vertical-align: top;
width: 120px;
}
.menu > ol > li:hover:after,
.menu > ol > li:focus:after,
.menu > ol > li:focus-within:after {
border-radius: 3px;
top: -15px;
bottom: -15px;
left: -15px;
right: -15px;
}
.menu > ol > li:hover .sub-menu,
.menu > ol > li:focus .sub-menu,
.menu > ol > li:focus-within .sub-menu {
max-height: 750px;
}
.menu > ol > li a:not(:last-child):before {
right: 12.5px;
}
.menu > ol > li:hover a:before {
transform: rotate(-180deg);
}
.menu > ol .sub-menu {
border-left: 0;
margin: 15px -15px -15px;
padding-left: 0;
}
}
@media (min-width: 775px) {
.menu > ol > li {
width: 150px;
}
.menu > ol > li a:not(:last-child):before {
right: 25px;
}
}

<table>
<tr>
<td>
<table style="height: 100%; border:solid;
vertical-align: top; ">
<tr>
<td>
<nav class="menu">
<ol>
<li class="menu-item"><a href="#0">Home</a></li>
<li class="menu-item"><a href="#0">About</a></li>
<li class="menu-item">
<a href="#0">Widgets</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">Big Widgets</a></li>
<li class="menu-item"><a href="#0">Bigger Widgets</a></li>
<li class="menu-item"><a href="#0">Huge Widgets</a></li>
</ol>
</li>
<li class="menu-item">
<a href="#0">Kabobs</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">Shishkabobs</a></li>
<li class="menu-item"><a href="#0">BBQ kabobs</a></li>
<li class="menu-item"><a href="#0">Summer kabobs</a></li>
</ol>
</li>
<li class="menu-item"><a href="#0">Contact</a></li>
</ol>
</nav>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
Other Item
</td>
</tr>
</table>

Answer 1

删除第二个<table>标记中的内联样式，并尝试将下面的样式添加到css中。为了更好地理解，我给了每个tr一个ID，这样你就可以理解下面的样式

HTML结构

<table>
<tr id="menu-items-wrapper">
<td>
Menu Items
</td>
</tr>
<tr id="content-wrapper">
<td>
Other Item
</td>
</tr>
</table>

添加样式

#menu-items-wrapper {
position: absolute;
display: flex;
border: solid;
height: 130px;
}
#content-wrapper {
position: absolute;
top: 135px; /*change according to your media breakpoint*/
}

@font-face {
font-family: 'Varela Round';
font-style: normal;
font-weight: 400;
src: local('Varela Round Regular'), local('VarelaRound-Regular'), url(https://fonts.gstatic.com/s/varelaround/v13/w8gdH283Tvk__Lua32TysjIfp8uK.ttf) format('truetype');
}
* {
box-sizing: border-box;
}
:root {
--accent-color: #45494e;
--gradient-color: #fbfbfb;
}
a:focus {
outline: none;
position: relative;
}
a:focus:after {
width: 50px;
}
a:after {
content: "";
background: #fbfbfb;
position: absolute;
bottom: 5px;
left: 15px;
height: 3px;
width: 0;
transition: 0.5s;
transition-delay: 0.2s;
}
body {
background: #45494e;
font-family: "Varela Round", Nunito, Montserrat, sans-serif;
margin: 0;
padding: 0;
text-transform: capitalize;
}
.menu {
margin: 15px;
position: relative;
display: block;
}
.menu>ol {
list-style: none;
margin: 30px 0;
padding: 0;
}
.menu>ol>li {
background: #3c3c3c;
border-left: 5px solid var(--gradient-color);
margin-bottom: 1px;
position: relative;
transition: 0.5s;
}
.menu>ol>li:nth-child(1) {
--accent-color: #fda085;
--gradient-color: #f6d365;
}
.menu>ol>li:nth-child(2) {
--accent-color: #bff098;
--gradient-color: #6fd6ff;
}
.menu>ol>li:nth-child(3) {
--accent-color: #ea8d8d;
--gradient-color: #a890fe;
}
.menu>ol>li:nth-child(4) {
--accent-color: #d8b5ff;
--gradient-color: #1eae98;
}
.menu>ol>li:nth-child(5) {
--accent-color: #c6ea8d;
--gradient-color: #fe90af;
}
.menu>ol>li a {
color: #fbfbfb;
display: block;
padding: 15px;
position: relative;
text-decoration: none;
z-index: 1;
}
.menu>ol>li a:not(:last-child):before {
content: "f078";
font-family: fontAwesome;
font-size: 0.75em;
line-height: 50px;
position: absolute;
right: 25px;
top: 0;
bottom: 0;
margin: auto;
transition: 0.5s;
}
.menu>ol>li:focus,
.menu>ol>li:focus-within,
.menu>ol>li:hover {
z-index: 100;
}
.menu>ol>li:focus:after,
.menu>ol>li:focus-within:after,
.menu>ol>li:hover:after {
background: linear-gradient(to left, var(--accent-color), var(--gradient-color));
max-width: 800px;
}
.menu>ol>li:focus .sub-menu,
.menu>ol>li:focus-within .sub-menu {
max-height: 500px;
}
.menu>ol>li:focus a:before,
.menu>ol>li:focus-within a:before {
transform: rotate(-180deg);
}
.menu>ol>li:after {
background: #3c3c3c;
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
transition: 0.5s;
max-width: 0;
overflow: hidden;
}
.menu>ol .menu-item {
position: relative;
}
.menu>ol .sub-menu {
border-left: 1px solid #fbfbfb;
margin-left: 22.5px;
list-style: none;
max-height: 0px;
overflow: hidden;
padding-left: 7.5px;
position: relative;
transition: 0.5s;
z-index: 1;
}
.menu>ol .sub-menu li {
font-size: 0.9em;
}
.menu>ol .sub-menu li:hover,
.menu>ol .sub-menu li a:focus {
background: rgba(60, 60, 60, 0.3);
}
.menu>ol .sub-menu li a:after {
bottom: 5px;
height: 1px;
}
.menu>ol .sub-menu li a:hover:after,
.menu>ol .sub-menu li a:focus:after {
width: 15px;
}
@media (min-width: 600px) {
a:focus,
a:hover {
position: relative;
}
a:focus:after,
a:hover:after {
width: 50px;
}
a:after {
left: 0;
right: 0;
margin: auto;
}
.menu {
margin: 0;
margin-top: 0vh;
}
.menu>ol {
display: block;
max-width: none;
text-align: center;
}
.menu>ol>li {
border-top: 5px solid var(--accent-color);
border-left: 0;
display: inline-block;
margin-left: -5px;
vertical-align: top;
width: 120px;
}
.menu>ol>li:hover:after,
.menu>ol>li:focus:after,
.menu>ol>li:focus-within:after {
background: linear-gradient(to bottom, var(--accent-color), var(--gradient-color));
border-radius: 3px;
top: -15px;
bottom: -15px;
left: -15px;
right: -15px;
}
.menu>ol>li:hover .sub-menu,
.menu>ol>li:focus .sub-menu,
.menu>ol>li:focus-within .sub-menu {
max-height: 750px;
}
.menu>ol>li a:not(:last-child):before {
right: 12.5px;
}
.menu>ol>li:hover a:before {
transform: rotate(-180deg);
}
.menu>ol .sub-menu {
border-left: 0;
margin: 15px -15px -15px;
padding-left: 0;
}
}
@media (min-width: 775px) {
.menu>ol>li {
width: 150px;
}
.menu>ol>li a:not(:last-child):before {
right: 25px;
}
}
#menu-items-wrapper {
position: absolute;
display: flex;
border: solid;
height: 130px;
}
#content-wrapper {
position: absolute;
top: 135px;
/*change according to your media breakpoint*/
}

<table>
<tr id="menu-items-wrapper">
<td>
<table>
<tr>
<td>
<nav class="menu">
<ol>
<li class="menu-item"><a href="#0">Home</a></li>
<li class="menu-item"><a href="#0">About</a></li>
<li class="menu-item">
<a href="#0">Widgets</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">Big Widgets</a></li>
<li class="menu-item"><a href="#0">Bigger Widgets</a></li>
<li class="menu-item"><a href="#0">Huge Widgets</a></li>
</ol>
</li>
<li class="menu-item">
<a href="#0">Kabobs</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">Shishkabobs</a></li>
<li class="menu-item"><a href="#0">BBQ kabobs</a></li>
<li class="menu-item"><a href="#0">Summer kabobs</a></li>
</ol>
</li>
<li class="menu-item"><a href="#0">Contact</a></li>
</ol>
</nav>
</td>
</tr>
</table>
</td>
</tr>
<tr id="content-wrapper">
<td>
Other Item
</td>
</tr>
</table>

Answer 2

如果需要更多修改，请随意评论。：(

只需删除这些行，它们就没有用了-

.menu > ol .sub-menu li:hover,
.menu > ol .sub-menu li a:focus {
background: rgba(60, 60, 60, 0.3);
}
.menu > ol .sub-menu li a:hover:after,
.menu > ol .sub-menu li a:focus:after {
width: 15px;
}

并编辑

.menu > ol .sub-menu li {
font-size: 0.9em;
}

作为(相应地改变颜色(

.menu > ol .sub-menu li,
.menu > ol .sub-menu li:hover,
.menu > ol .sub-menu li a:focus {
font-size: 0.9em;
background: rgba(60, 60, 60);
width: 150px;
}