Why does the paragraph always cover the div that is shown when you hover over link 1 in this example? I have tried changing the z-index of both the paragraph and the list, but nothing works. The thing that really makes me not understand is the fact that during the transition, the list appears over the paragraph. Then, after the transition, the paragraph seems to change z-index. Any help would be great.
div {
background-color: #BFBFBF;
height: 50px;
width: 100%;
z-index: 1;
}
.NavList {
list-style: none;
margin: 0;
padding: 0;
}
.NavListItem {
display: inline-block;
text-align: center;
float: left;
}
.NavListItem:Hover .NavLink {
display: block;
padding-top: 10px;
padding-bottom: 10px;
width: 100px;
color: #BFBFBF;
text-decoration: none;
background-color: #7F7F7F;
transition: background-color .5s;
}
.NavLink {
display: block;
padding-top: 10px;
padding-bottom: 10px;
width: 100px;
color: #BFBFBF;
text-decoration: none;
background-color: #404040;
transition: background-color .5s;
}
.NavListItem:Hover .SubNavList {
display: block;
list-style: none;
margin: 0;
padding: 0;
opacity: 1;
z-index: 100;
transition: opacity 5s;
}
.NavListItem:Hover .SubNavListItem {
display: block;
text-align: center;
}
.NavListItem:Hover .SubNavLink {
display: block;
padding-top: 10px;
padding-bottom: 10px;
width: 100px;
color: #BFBFBF;
text-decoration: none;
background-color: #7F7F7F;
transition: background-color .5s;
}
.NavListItem:Hover .SubNavLink:Hover {
display: block;
padding-top: 10px;
padding-bottom: 10px;
width: 100px;
color: #BFBFBF;
text-decoration: none;
background-color: #404040;
transition: background-color .5s;
}
.SubNavList {
display: block;
width: 0px;
height: 0px;
opacity: 0;
transition: opacity 5s;
z-index: 100;
}
.SubNavListItem {
display: none;
}
p {
z-index: -1;
}
<body>
<div>
<ul class="NavList">
<li class="NavListItem">
Home
</li>
<li class="NavListItem">
Link 1
<ul class="SubNavList">
<li class="SubNavListItem">
SubLink 1
</li>
<li class="SubNavListItem">
SubLink 2
</li>
</ul>
</li>
<li class="NavListItem">
Link 2
<ul class="SubNavList">
<li class="SubNavListItem">
SubLink 3
</li>
<li class="SubNavListItem">
SubLink 4
</li>
</ul>
</li>
<li class="NavListItem">
Link3
</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet</p>
</body>
Z-index depends on the element having "positioning." Give your div and you p position like so:
div,p {
position: relative;
}
Fiddle example: http://jsfiddle.net/9dp7p5LL/
Just do this:
p {
display: block;
position: absolute;
z-index: -1;
}
See the updated fiddle here
z-index applies to positioned elements.
source
In your example you don't need negative z-index to p elements. You can just apply position: relative with a high z-index to .NavListItem:Hover .SubNavLink:hover like:
div {
background-color: #BFBFBF;
height: 50px;
width: 100%;
z-index: 1;
}
.NavList {
list-style: none;
margin: 0;
padding: 0;
}
.NavListItem {
display: inline-block;
text-align: center;
float: left;
}
.NavListItem:Hover .NavLink {
display: block;
padding-top: 10px;
padding-bottom: 10px;
width: 100px;
color: #BFBFBF;
text-decoration: none;
background-color: #7F7F7F;
transition: background-color .5s;
}
.NavLink {
display: block;
padding-top: 10px;
padding-bottom: 10px;
width: 100px;
color: #BFBFBF;
text-decoration: none;
background-color: #404040;
transition: background-color .5s;
}
.NavListItem:Hover .SubNavList {
display: block;
list-style: none;
margin: 0;
padding: 0;
opacity: 1;
z-index: 100;
transition: opacity 5s;
}
.NavListItem:Hover .SubNavListItem {
display: block;
text-align: center;
}
.NavListItem:Hover .SubNavLink {
display: block;
padding-top: 10px;
padding-bottom: 10px;
width: 100px;
color: #BFBFBF;
text-decoration: none;
background-color: #7F7F7F;
transition: background-color .5s;
}
.NavListItem:Hover .SubNavLink:Hover {
display: block;
position: relative;
z-index: 10;
padding-top: 10px;
padding-bottom: 10px;
width: 100px;
color: #BFBFBF;
text-decoration: none;
background-color: #404040;
transition: background-color .5s;
}
.SubNavList {
display: block;
width: 0px;
height: 0px;
opacity: 0;
transition: opacity 5s;
z-index: 100;
}
.SubNavListItem {
display: none;
}
<body>
<div>
<ul class="NavList">
<li class="NavListItem">
Home
</li>
<li class="NavListItem">
Link 1
<ul class="SubNavList">
<li class="SubNavListItem">
SubLink 1
</li>
<li class="SubNavListItem">
SubLink 2
</li>
</ul>
</li>
<li class="NavListItem">
Link 2
<ul class="SubNavList">
<li class="SubNavListItem">
SubLink 3
</li>
<li class="SubNavListItem">
SubLink 4
</li>
</ul>
</li>
<li class="NavListItem">
Link3
</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet</p>
</body>
Related
I created a dropdown using CSS. The dropdown pops up when the elements of nav-bar are hovered. There is no error in the code. However, I need help with the styling of the nav-bar. I want all the elements in sub-menu to be in the same line, i.e, I want to elements of drop-down to be in same position while changing the information based on the element hovered in nav-bar. Reference can be drop-down on lululemon website.
nav {
display: inline-flex;
width: 100%;
}
.nav-list {
display: flex;
width: 100%;
margin-top: .7rem;
padding-left: 1.1rem;
}
.nav-list li {
position: relative;
}
.nav-list>li>a {
color: black;
display: block;
font-size: 1rem;
padding: 1.3rem 1rem;
text-transform: uppercase;
transition: color 300ms;
}
.sub-menu a {
position: relative;
top: 2rem;
color: #ffffff;
font-size: 1.1rem;
font-weight: 200;
padding: 0 40px 0 40px;
}
.sub-menu {
display: flex;
position: absolute;
box-sizing: border-box;
background-color: black;
visibility: hidden;
box-sizing: border-box;
width: 50rem;
height: 15rem;
}
.nav-list li:hover>.sub-menu {
top: 3.85em;
visibility: visible;
opacity: 1;
}
<nav>
<ul class="nav-list">
<li>
Men
<ul class="sub-menu">
<li>
Mens shirts
</li>
<li>
Mens Shorts
</li>
<li>
Mens Accessories
</li>
</ul>
</li>
<li>
Women
<ul class="sub-menu">
<li>
Womens shirts
</li>
<li>
Womens Shorts
</li>
<li>
Womens Accessories
</li>
</ul>
</nav>
nav {
display: inline-flex;
width: 100%;
}
.nav-list {
display: flex;
width: 100%;
margin-top: .7rem;
padding-left: 1.1rem;
position: relative;
}
.nav-list li {
position: relative;
}
.nav-list>li>a {
color: black;
display: block;
font-size: 1rem;
padding: 1.3rem 1rem;
text-transform: uppercase;
transition: color 300ms;
}
.sub-menu a {
color: #ffffff;
font-size: 1.1rem;
font-weight: 200;
padding: 0 40px 0 40px;
}
.sub-menu {
display: flex;
position: fixed;
box-sizing: border-box;
background-color: black;
visibility: hidden;
width: 50rem;
height: 15rem;
left: 20px;
top: 0;
}
.nav-list li:hover>.sub-menu {
top: 3.85em;
visibility: visible;
opacity: 1;
}
<nav>
<ul class="nav-list">
<li>
Men
<ul class="sub-menu">
<li>
Mens shirts
</li>
<li>
Mens Shorts
</li>
<li>
Mens Accessories
</li>
</ul>
</li>
<li>
Women
<ul class="sub-menu">
<li>
Womens shirts
</li>
<li>
Womens Shorts
</li>
<li>
Womens Accessories
</li>
</ul>
</nav>
I made some changes to your code...basically position: fixed did the job. You can set the left value according to your need.
Is this what you needed?
The problem was that the position:relative was at the wrong place, it must be applied to the .nav-list, since its the parent of .sub-menu and you need it to be aligned according to it.
nav {
display: inline-flex;
width: 100%;
}
.nav-list {
display: flex;
position:relative;
width: 100%;
margin-top: .7rem;
padding-left: 1.1rem;
}
.nav-list>li>a {
color: black;
display: block;
font-size: 1rem;
padding: 1.3rem 1rem;
text-transform: uppercase;
transition: color 300ms;
}
.sub-menu a {
position: relative;
color: #ffffff;
font-size: 1.1rem;
font-weight: 200;
padding: 0 40px 0 40px;
}
.sub-menu {
display: flex;
align-items:center;
position: absolute;
left:0px;
box-sizing: border-box;
background-color: black;
visibility: hidden;
box-sizing: border-box;
width: 50rem;
height: fit-content;
}
.nav-list li:hover >.sub-menu {
top: 3.85em;
visibility: visible;
opacity: 1;
}
I have done this simple dropdown menu purely in CSS and I would like to avoid JS if possible to keep thing simple.
So, I would like to keep this animated line width: 100%; when the dropdown menu is opened. At the moment when I move the mouse over the menu animations returns to initial width:0; state.
This works ok when .line-anim class is moved over to <li> element, so next to .dropdown-menu-hook class, but this is not what I want, well the effect is exactly what I want but I would like to keep the animated line within the <a> tag (TESTIMONIALS tab)
/* Main Structure Styling */
.header {
width: 100%;
}
.header ul {
display: flex;
gap: 20px;
justify-items:center;
}
.header ul li {
padding: 10px;
}
a {
text-decoration: none;
color: #000;
font-size: 20px;
}
li {
list-style: none;
}
/* Dropdown Menu Styling*/
.dropdown-menu-hook {
position: relative;
}
.dropdown-menu {
width: 120px;
height: auto;
background-color: #fff;
border-radius: 10px;
padding: 1rem;
position: absolute;
top: 45.5px;
left: 0;
visibility: hidden;
pointer-events: all;
opacity: 0;
color: #000;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
}
.items {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.item1,
.item2,
.item3,
.item4 {
line-height: 1.2;
color:#000;
font-weight: 500;
padding: 10px;
transition: .3s;
}
.dropdown-menu-hook:hover > .dropdown-menu {
visibility: visible;
pointer-events: all;
opacity: .9;
}
.dropdown-menu {
transition: opacity .5s;
}
/* Line Animation */
.line-anim {
position: relative;
width: fit-content;
}
.line-anim:after {
content: "";
background-color: #000;
height: 1px;
width: 0;
left: 0px;
top: -5px;
transition: 0.4s ease-out;
position: absolute;
}
.line-anim:hover:after {
width: 100%;
}
a:hover > .line-anim {
display: block;
}
<nav class="header">
<ul>
<li>ABOUT</li>
<li class="dropdown-menu-hook">
TESTIMONIALS
<div class="dropdown-menu">
<div class="items">
<a class="item1" href="#">Item 1</a>
<a class="item2" href="#">Item 2</a>
<a class="item3" href="#">Item 3</a>
<a class="item4" href="#">Item 4</a>
</div>
</div>
</li>
<li >CONTACT</li>
</ul>
</nav>
I've seen many examples here but without animation, this is easy to make the line 100% width when the menu is opened like this:
.line-anim:after {
width: 100%!important;
transition: all .9s;
}
But I would like the transition to be visible, then when the line width is 100% I would like it to stay like this until the mouse is out of the dropdown menu.
Below example shows the effect I'm looking for but it only works when the line is moved from the <a> tag to the <li> tag and this is not what I want :( Is there any way to achieve this without JS please?
/* Main Structure Styling */
.header {
width: 100%;
}
.header ul {
display: flex;
gap: 20px;
justify-items:center;
}
.header ul li {
padding: 10px;
}
a {
text-decoration: none;
color: #000;
font-size: 20px;
}
li {
list-style: none;
}
/* Dropdown Menu Styling*/
.dropdown-menu-hook {
position: relative;
}
.dropdown-menu {
width: 120px;
height: auto;
background-color: #fff;
border-radius: 10px;
padding: 1rem;
position: absolute;
top: 45.5px;
left: 0;
visibility: hidden;
pointer-events: all;
opacity: 0;
color: #000;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
}
.items {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.item1,
.item2,
.item3,
.item4 {
line-height: 1.2;
color:#000;
font-weight: 500;
padding: 10px;
transition: .3s;
}
.dropdown-menu-hook:hover > .dropdown-menu {
visibility: visible;
pointer-events: all;
opacity: .9;
}
.dropdown-menu {
transition: opacity .5s;
}
/* Line Animation */
.line-anim {
position: relative;
width: fit-content;
}
.line-anim:after {
content: "";
background-color: #000;
height: 1px;
width: 0;
left: 0px;
top: -5px;
transition: 0.4s ease-out;
position: absolute;
}
.line-anim:hover:after {
width: 100%;
}
a:hover > .line-anim {
display: block;
}
<nav class="header">
<ul>
<li>ABOUT</li>
<li class="dropdown-menu-hook line-anim">
TESTIMONIALS
<div class="dropdown-menu">
<div class="items">
<a class="item1" href="#">Item 1</a>
<a class="item2" href="#">Item 2</a>
<a class="item3" href="#">Item 3</a>
<a class="item4" href="#">Item 4</a>
</div>
</div>
</li>
<li >CONTACT</li>
</ul>
</nav>
Try
.dropdown-menu-hook:hover > .line-anim:after {
width: 100%;
}
It's not a good idea, to show menus only on hover. You could get some problems on touch devices, so active menus or some with js-toggled classes are a good choice.
nav{
display: block;
text-align: center;
}
.theme_tabs{
list-style: none;
padding-left: 0;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.theme_tab_item.active{
border-top-color: #0069ff;
}
.theme_tab_item{
display: block;
border-top: 2px solid #e5e8ed;
padding: 16px;
transition: border-left-color .25s linear;
float: left;
}
.theme_tab_item.active a{
color: #031b4e;
cursor: default;
}
.theme_tab_item a{
color: rgba(3,27,78,.5);
font-size: 18px;
transition: color .25s linear;
}
<nav>
<ul class="theme_tabs small_margin">
<li class="theme_tab_item active">
<a>Example1</a>
</li>
<li class="theme_tab_item">
<a>Example2</a>
</li>
<li class="theme_tab_item">
<a>Example3</a>
</li>
</ul>
</nav>
Anyone can please help me How can I horizontally center navigation bar? I tried margin 0 auto but that was not working anyone can please tell me any alter way to achieve this result?
Just add display: inline-block to your .theme-tabs class and remove width: 100%.
.theme_tabs{
list-style: none;
padding-left: 0;
display: inline-block;
max-width: 1200px;
margin: 0 auto;
}
Add the following style
.theme_tabs{
display: flex;
justify-content: center;
}
nav{
display: block;
text-align: center;
}
.theme_tabs{
display: flex;
justify-content: center;
list-style: none;
padding-left: 0;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.theme_tab_item.active{
border-top-color: #0069ff;
}
.theme_tab_item{
display: block;
border-top: 2px solid #e5e8ed;
padding: 16px;
transition: border-left-color .25s linear;
float: left;
}
.theme_tab_item.active a{
color: #031b4e;
cursor: default;
}
.theme_tab_item a{
color: rgba(3,27,78,.5);
font-size: 18px;
transition: color .25s linear;
}
<nav>
<ul class="theme_tabs small_margin">
<li class="theme_tab_item active">
<a>Example1</a>
</li>
<li class="theme_tab_item">
<a>Example2</a>
</li>
<li class="theme_tab_item">
<a>Example3</a>
</li>
</ul>
</nav>
try setting its position: relative
its left: 50%
and try playing around with transform so you can center it.
nav{
display: block;
text-align: center;
}
.theme_tabs{
list-style: none;
padding-left: 0;
width: 100%;
max-width: 1200px;
transform: translate(-25%, 0);
position: relative;
left: 50%;
display: inline-block;
}
.theme_tab_item.active{
border-top-color: #0069ff;
}
.theme_tab_item{
display: block;
border-top: 2px solid #e5e8ed;
padding: 16px;
transition: border-left-color .25s linear;
float: left;
}
.theme_tab_item.active a{
color: #031b4e;
cursor: default;
}
.theme_tab_item a{
color: rgba(3,27,78,.5);
font-size: 18px;
transition: color .25s linear;
}
<nav>
<ul class="theme_tabs small_margin">
<li class="theme_tab_item active">
<a>Example1</a>
</li>
<li class="theme_tab_item">
<a>Example2</a>
</li>
<li class="theme_tab_item">
<a>Example3</a>
</li>
</ul>
</nav>
Method A)
.theme_tab_item {
display: block;<--------change to inline-block
float: left;<-----------remove
//other codes
}
nav{
display: block;
text-align: center;
}
.theme_tabs{
list-style: none;
padding-left: 0;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.theme_tab_item.active{
border-top-color: #0069ff;
}
.theme_tab_item{
display: inline-block;
border-top: 2px solid #e5e8ed;
padding: 16px;
transition: border-left-color .25s linear;
}
.theme_tab_item.active a{
color: #031b4e;
cursor: default;
}
.theme_tab_item a{
color: rgba(3,27,78,.5);
font-size: 18px;
transition: color .25s linear;
}
<nav>
<ul class="theme_tabs small_margin">
<li class="theme_tab_item active"><a>Example1</a></li>
<li class="theme_tab_item"><a>Example2</a></li>
<li class="theme_tab_item"><a>Example3</a></li>
</ul>
</nav>
Method B)
.theme_tabs{
width: 100%;<-----remove
display: inline-block;<----add
//Other codes...
}
nav{
display: block;
text-align: center;
}
.theme_tabs{
list-style: none;
padding-left: 0;
display: inline-block;
max-width: 1200px;
margin: 0 auto;
}
.theme_tab_item.active{
border-top-color: #0069ff;
}
.theme_tab_item {
display: block;
border-top: 2px solid #e5e8ed;
padding: 16px;
transition: border-left-color .25s linear;
float: left;
}
.theme_tab_item.active a{
color: #031b4e;
cursor: default;
}
.theme_tab_item a {
color: rgba(3,27,78,.5);
font-size: 18px;
transition: color .25s linear;
}
<nav>
<ul class="theme_tabs small_margin">
<li class="theme_tab_item active"><a>Example1</a></li>
<li class="theme_tab_item"><a>Example2</a></li>
<li class="theme_tab_item"><a>Example3</a></li>
</ul>
</nav>
I am currently designing the navigation bar for my website and I've come across a problem in firefox. I have my logo to the left and my navigation content to the right, but the entire navigation content is being pushed out of the nav div (only on Firefox). What can I do to fix it?
Firefox:
http://i.cubeupload.com/OoAJIe.png
Chrome:
http://i.cubeupload.com/QXo2KS.png
Here is my HTML:
<div class="nav" id="nav">
<div class="nav_content">
<ul>
<li class="logo"><img src="images/Spendr.png" /></li>
<li class="tab btn"><button>Kurv: 0</button></li>
<li class="tab txt">Nye varer</li>
<li class="tab txt">Udsalg</li>
<li class="tab txt" id="kategorierMenu"><a>Kategorier</a></li>
</ul>
</div>
</div>
Here is my CSS:
.nav {
width: 100%;
background: #262626;
transition: background 0.5s, border 0.5s, color 0.5s, height 0.5s, padding-top 0.3s, opacity 0.5s;
position: fixed /*fixed*/;
z-index: 999;
height: 71px;
float: left;
}
.nav_content {
max-width: 1150px;
width: 90%;
height: 100%;
background: none;
margin: 0 auto;
white-space: nowrap;
}
.nav ul li, .nav ul li a {
list-style: none;
text-decoration: none;
display: inline-block;
} .nav .tab{
float: right;
font-family: DroidSans, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
transition: color 0.3s;
}
.txt a {
float: right;
font-family: DroidSans, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
transition: color 0.3s;
height: 100%;
padding-top: 26px;
box-sizing: border-box;
transition: background 0.3s;
}
.txt a:hover {
cursor: pointer;
background: #1A1A1A;
}
.nav .tab { border-radius: 3px; }
.nav .txt a {
padding-left:18px;
padding-right: 18px;
}
.logo img {
height: 36px;
width: auto;
margin-top: 18px;
float: left;
}
Since you're floating the .tab elements right, add .logo { float: left; } and that will make the list items all float on either side of the menu.
.nav {
width: 100%;
background: #262626;
transition: background 0.5s, border 0.5s, color 0.5s, height 0.5s, padding-top 0.3s, opacity 0.5s;
position: fixed/*fixed*/
;
z-index: 999;
height: 71px;
float: left;
}
.nav_content {
max-width: 1150px;
width: 90%;
height: 100%;
background: none;
margin: 0 auto;
white-space: nowrap;
}
.nav ul li,
.nav ul li a {
list-style: none;
text-decoration: none;
display: inline-block;
}
.nav .tab {
float: right;
font-family: DroidSans, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
transition: color 0.3s;
}
.txt a {
float: right;
font-family: DroidSans, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
transition: color 0.3s;
height: 100%;
padding-top: 26px;
box-sizing: border-box;
transition: background 0.3s;
}
.txt a:hover {
cursor: pointer;
background: #1A1A1A;
}
.nav .tab {
border-radius: 3px;
}
.nav .txt a {
padding-left: 18px;
padding-right: 18px;
}
.logo img {
height: 36px;
width: auto;
margin-top: 18px;
float: left;
}
.logo {
float: left;
}
<div class="nav" id="nav">
<div class="nav_content">
<ul>
<li class="logo">
<img src="images/Spendr.png" />
</li>
<li class="tab btn"><button>Kurv: 0</button></li>
<li class="tab txt">Nye varer</li>
<li class="tab txt">Udsalg</li>
<li class="tab txt" id="kategorierMenu"><a>Kategorier</a></li>
</ul>
</div>
</div>
You could also change the menu to a flex layout and use an auto margin on .logo to separate the elements.
.nav {
width: 100%;
background: #262626;
transition: background 0.5s, border 0.5s, color 0.5s, height 0.5s, padding-top 0.3s, opacity 0.5s;
position: fixed/*fixed*/
;
z-index: 999;
height: 71px;
float: left;
}
.nav_content {
max-width: 1150px;
width: 90%;
height: 100%;
background: none;
margin: 0 auto;
white-space: nowrap;
}
.nav ul li,
.nav ul li a {
list-style: none;
text-decoration: none;
display: inline-block;
}
.nav .tab {
float: right;
font-family: DroidSans, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
transition: color 0.3s;
}
.txt a {
float: right;
font-family: DroidSans, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
transition: color 0.3s;
height: 100%;
padding-top: 26px;
box-sizing: border-box;
transition: background 0.3s;
}
.txt a:hover {
cursor: pointer;
background: #1A1A1A;
}
.nav .tab {
border-radius: 3px;
}
.nav .txt a {
padding-left: 18px;
padding-right: 18px;
}
.logo img {
height: 36px;
width: auto;
margin-top: 18px;
float: left;
}
.nav ul {
display: flex;
}
.logo {
margin-right: auto;
}
<div class="nav" id="nav">
<div class="nav_content">
<ul>
<li class="logo">
<img src="images/Spendr.png" />
</li>
<li class="tab btn"><button>Kurv: 0</button></li>
<li class="tab txt">Nye varer</li>
<li class="tab txt">Udsalg</li>
<li class="tab txt" id="kategorierMenu"><a>Kategorier</a></li>
</ul>
</div>
</div>
Using pure css, I have a menu image that when :hover, the background-color changes as expected. When the user clicks, a menu pop out opens and so now, that initial menu image should be active. However, it is not staying the color needed even with my styling set for :active or :focus.
Image as when hover:
When the cursor moves off that image and to the menu items, that background-color does not stay the intended cover. That image:
My code for the html and css is:
#menu {
position: relative;
}
#menu_img:hover,
#menu_img:active,
#menu_img:focus {
background-color: #008272;
cursor: pointer;
}
#menu_items {
position: absolute;
top: 0%;
opacity: 0;
transition: all 0.5s;
display: none;
background-color: #002F33;
color: #ffffff;
height: 600px;
width: 18%;
z-index: 2;
left: 0px;
}
#menu_items > a {
font-size: 18px;
color: #ffffff;
margin-top: 15px;
margin-bottom: 15px;
padding-left: 20px;
}
#menu_items > a:hover {
text-decoration: none;
}
#menu_items.menu_items_toggle {
opacity: 1;
top: 100%;
display: inline-block;
}
<div id="menu" style="background-color: #002F33; height:50px;">
<span id="span_img_container" class="navIcon" style="width: 50px;"><img id="menu_img" src="assets/images/icon_hamburger.png"></span>
<div id="menu_items">
Moneyball Website
<br>
Moneyball Tool
<br>
Moneyball Stream Channel
<br>
</div>
<span style="color: #ffffff; font-size: 22px; padding-left:15px; padding-top: 26px; position: relative; top: 5px; left: -5px;">Moneyball Tool</span>>
</div>
Any ideas on this? Much appreciated!
I suggest it's because the icon is outside menu_items. You can try something like this:
nav {
background: #333;
color: white;
min-height: 2.75em;
position: relative;
}
nav h1 {
line-height: 2.75rem;
margin: 0 0 0 3.5rem;
}
nav menu {
line-height: 2.75;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 2.75em;
}
nav menu:before {
box-shadow: 11px 0 0 -10px rgba(255, 255, 255, 0.6);
content: "☰";
display: block;
line-height: 2.75;
text-align: center;
transition: backround-color 200ms;
width: 2.75em;
}
nav menu li {
background: #333;
list-style: none;
max-height: 0;
overflow: hidden;
padding: 0 1em;
transition: max-height 200ms;
}
nav menu li:hover {
background-color: black;
}
nav menu:hover {
width: auto;
}
nav menu:hover:before {
background-color: green;
box-shadow: none;
}
nav menu:hover li {
max-height: 2.75em;
}
<nav>
<menu>
<li>
<a>First menu link</a>
</li>
<li>
<a>Second menu link</a>
</li>
<li>
<a>Third menu link</a>
</li>
<li>
<a>Fourth menu link</a>
</li>
</menu>
<h1>Page title</h1>
</nav>