VeryGG
Reputation: 3
How to get a drop-down menu to overlay other Item
I am creating drop-down menu. However when I hover on it, the menu push all content down. I just want to overlay all content below.
When I try set position: absolute; for the sub-menu, seem work but it remove all style, color.. of control.
Please help me to get this.
Here is the code:
@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>Upvotes: 0
Views: 2144
Answers (2)
Anonymous
Reputation: 3
This will surely work try it once, if more modification is needed feel free to comment down. :)
Just remove these line they are of no use -
.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;
}
And edit
.menu > ol .sub-menu li {
font-size: 0.9em;
}
as (change color accordingly)
.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;
}
Upvotes: 0
Becky
Reputation: 5585
Remove your inline styles in your 2nd <table> tag and try adding the below to your css. For better understanding I have given an ID to each tr so you can understand the styling below
HTML structure
<table>
<tr id="menu-items-wrapper">
<td>
Menu Items
</td>
</tr>
<tr id="content-wrapper">
<td>
Other Item
</td>
</tr>
</table>
Added styling
#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>Upvotes: 1
Related Questions
- How to make a dropdown menu appear on top of another div
- CSS Dropdown menu behind content
- CSS - overlay always on top of menu
- CSS menu overlay other content on open
- Overlaying a drop down menu over a floated image
- How to show menu dropdown above any div
- Drop down menu overlapping other menu
- Dropdown menu to display over DIV
- How to get a drop-down menu to overlay other elements
- How do I adjust a dropdown menu to appear over the content?