I'm trying to get a bar to transition in when the li is hovered over however the hover seems to be ignored and nothing happens. If I instead put 'nav ul:hover', it works but the bar pops in under all the li's.
<nav>
<ul>
<li class="nav-li">All Departments</li>
<li class="nav-li">Shop by Room</li>
<li class="nav-li">DIY Projects & Ideas</li>
<li class="nav-li">Home Services</li>
<li class="nav-li">Speacials & Offers</li>
<li class="nav-li">Local Ad</li>
</ul>
</nav>
CSS
.nav-li {
margin-right: 40px;
display: inline-block;
padding-bottom: 2em;
transition: all .5s ease;
cursor: pointer;
position: relative;
}
.nav-li::after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
transition: width .5s ease;
}
.nav-li:hover .nav-li::after {
background-color: #f96302;
width: 100%;
}
The .nav-li:hover .nav-li::after should be .nav-li:hover::after
.nav-li {
margin-right: 40px;
display: inline-block;
padding-bottom: 2em;
transition: all .5s ease;
cursor: pointer;
position: relative;
}
.nav-li::after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
transition: width .5s ease;
}
.nav-li:hover::after {
background-color: #f96302;
width: 100%;
}
<nav>
<ul>
<li class="nav-li">All Departments</li>
<li class="nav-li">Shop by Room</li>
<li class="nav-li">DIY Projects & Ideas</li>
<li class="nav-li">Home Services</li>
<li class="nav-li">Speacials & Offers</li>
<li class="nav-li">Local Ad</li>
</ul>
</nav>
Try combining the two.
.nav-li:hover::after
Example: https://jsfiddle.net/pc26LnLz/1/
Related
I need to create a hover affect for an element that would basically look like how this looks:
https://codepen.io/martinwolf/pen/eNNdme
HTML:
<ul>
<li><a class="cool-link" href="#">A cool link</a></li>
<li><a class="cool-link" href="#">A cool link</a></li>
<li><a class="cool-link" href="#">A cool link</a></li>
</ul>
CSS:
li {
margin-bottom: 10px;
}
.cool-link {
display: inline-block;
color: #000;
text-decoration: none;
}
.cool-link::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #000;
transition: width .3s;
}
.cool-link:hover::after {
width: 100%;
}
But, instead of the border minimizing back to where it came from, it should minimize to the other side. So basically, it should look like the border came from the left on hover and disappeared to the right when no hovered anymore.
Can't figure out what could cause that affect.
After 2 hours of trying, I found a solution. If I understand what you mean, the code snippet below is what you want:
li {
margin-bottom: 10px;
}
.cool-link {
display: inline-block;
color: #000;
text-decoration: none;
}
.cool-link::after {
content: '';
display: block;
height: 2px;
background: #002;
transition: all 0.3s linear;
transform: scaleX(0);
transform-origin: left;
}
.cool-link:hover::after {
transition: all 0.3s linear;
transform: scaleX(1);
transform-origin: right;
}
<ul>
<li><a class="cool-link" href="#">A cool link</a></li>
</ul>
Using a CSS animation on the pseudo element you have lots of flexibility on how the line looks. Here's a simple example of it growing from left to right then disappearing from left to right. You could have it repeating, or reversing order and so on. I set the overall effect to 1 second just to make it more noticeable.
li {
margin-bottom: 10px;
}
.cool-link {
position: relative;
display: inline-block;
color: #000;
text-decoration: none;
}
.cool-link::after {
content: '';
display: block;
width: 0;
height: 2px;
background: black;
}
.cool-link:hover::after {
position: relative;
width: 0;
animation: underline 1s;
}
#keyframes underline {
0% {
width: 0;
left:0;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
<ul>
<li><a class="cool-link" href="#">A cool link</a></li>
<li><a class="cool-link" href="#">A cool link</a></li>
<li><a class="cool-link" href="#">A cool link</a></li>
</ul>
Every time I try to move the navlinks/navbar down by about 25px, the clickable link stays at the top however the text appears where I move it to therefore the navlinks are no longer clickable.
How can I move the navbar down and ensure that the actual text is clickable?
Note: I've tried using margin and padding so many times. The links aren't clickable at all when I use margin.
UPDATE:The issue is related to the animated background because when I removed the background, the navbar worked fine. I've updated my post with the code for the background.
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
background-color: black;
color: white;
font-size: 20px;
}
.navbar-links ul {
margin: 0;
padding: 0;
display: flex;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
text-decoration: none;
color: white;
padding-left: 1rem;
padding-right: 1em;
padding-top: 1em;
display: block;
}
.navbar-links li:hover {
background: #555;
}
.animation-area {
background: rgb(22,168,194);
background: linear-gradient(0deg, rgba(22,168,194,1) 0%, rgba(27,28,28,1)
100%);
width: 100%;
height: 100vh;
}
.box-area{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 97%;
overflow: hidden;
}
.box-area .box-item{
position: absolute;
display: block;
list-style: none;
width: 25px;
height: 25px;
background: rgba(255, 255, 255, 0.2);
animation: animatedSquares 20s linear infinite;
bottom: -150px;
}
.box-area .box-item:nth-child(1){
left: 86%;
width: 80px;
height: 80px;
animation-delay: 0s
}
.box-area .box-item:nth-child(2){
left: 12%;
width: 30px;
height: 30px;
animation-delay: 1.5s;
animation-duration: 10s;
}
.box-area .box-item:nth-child(3){
left: 70%;
width: 100px;
height: 100px;
animation-duration: 5.5s;
}
#keyframes animatedSquares{
0%{
transform: translateY(0) rotate(0deg);
opacity: 1;
}
100%{
transform: translateY(-800px) rotate(360deg);
opacity: 0;
}
}
<div class="banner-text">
<nav class="navbar">
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li><a class="navlink" href="#">Page 1</a></li>
<li><a class="navlink" href="#">Page 2</a></li>
<li><a class="navlink" href="#">Page 3</a></li>
<li><a class="navlink" href="#">Page 4</a></li>
</ul>
</div>
</nav>
</div>
<div class="animation-area">
<ul class="box-area">
<li class="box-item"></li>
<li class="box-item"></li>
<li class="box-item"></li>
<li class="box-item"></li>
<li class="box-item"></li>
<li class="box-item"></li>
</ul>
</div>
Try this
.navbar-links li {
list-style: none;
margin-top: 1rem;
}
.navbar-links li a {
text-decoration: none;
color: white;
padding: .363rem;
display: block;
}
I've solved the issue! I have an animated background on the home screen and the background had position:absolute; which conflicted with the navbar. I just removed position: absolute; from the background and styled it differently.
I have a little problem with my menu. I intend to do a pulldown menu. As I have the code now, the < li > is displayed , but the idea is by click or by hover "Cambio de centro " unfold the < li > that is inside ... Any idea ?
This is my code:
<div class="verticalaccordionIndex">
<img src="Images/botones/ficheros-btn.png" class="verticalaccordion">
<ul>
<li>
<h3>FICHEROS</h3>
<div class="subverticalaccordionIndex">
<ul>
<li>
<h3><a href="SelectCentro.aspx">Cambio de centro <span>+</span></h3>
<ul class="content-menu">
<li class="content-li">Festivos</li>
<li class="content-li">Áreas de trabajo</li>
<li class="content-li">Centros</li>
<li class="content-li">Actividades</li>
<li class="content-li">Espacio de trabajo</li>
<li class="content-li">Cierre de espacios</li>
<li class="content-li">Trabajadores</li>
<li class="content-li">Convenio</li>
</ul>
</li>
<li>
<h3> Gestión de usuarios</h3></li>
</li>
<li>
<li><h3>Salir</h3></li>
</li>
</ul>
</div>
</li>
</ul>
</div>
--------------------CSS
.verticalaccordionIndex>ul {
padding: 0;
list-style: none;
width: 140px;
float: left;
position: relative;
top: -55px;
border-left: 1px solid;
left: 20px;
}
.verticalaccordionIndex>ul>li {
display: block;
height:30px;
list-style: none;
margin: 0;
overflow: hidden;
padding: 0;
text-align:center;
width: 140px;
background-color:TRANSPARENT;
transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
float: left;
position: absolute;
z-index: 200;
height:40px;
}
.verticalaccordionIndex img{
float: left;
width: 3%;
height: auto;
display: block;
position: absolute;
top: 206px;
left: 63px;
z-index: 30;
}
.verticalaccordionIndex .archiv {
float: right;
width: 3%;
height: auto;
display: block;
position: absolute;
top: 206px;
left: 203px;
z-index: 60;
cursor: pointer;
}
.verticalaccordionIndex>ul>li>h3 {
display: block;
margin-top: 2em;
padding: 0;
top: -27px;
position: relative;
color: #000;
cursor: pointer;
font-family: 'Forum', sans-serif;
font-size:18px;
text-decoration:none;
background: TRANSPARENT;
width: 140px;
text-align: center;
}
.verticalaccordionIndex>ul>li>div {
margin: 0;
width: 220px;
position: relative;
left: -10px;
top: -40px;
}
.verticalaccordionIndex>ul>li:hover, .verticalaccordionIndex>ul>li:focus {
height: auto;
width: 200px;
}
.verticalaccordionIndex:hover>ul>li:hover>h3 {
color: #000;
background: #000;
height: 0;
top: -28px;
}
.verticalaccordionIndex>ul>li>h3:hover {
cursor:pointer;
}
.subverticalaccordionIndex>ul>li { /* definimos cada item de la lista */
height:40px; /* la altura de las pestañas */
list-style: none;
margin: 0;
overflow: hidden;
padding: 0;
text-align:left;
width: 220px;
background-color: #9a8d84;
transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
position: relative;
left: -31px;
color: white;
height: auto;
}
.subverticalaccordionIndex>ul>li>div { /* el contenido oculto */
margin: 0;
overflow: auto;
padding: 10px;
float: left;
}
.subverticalaccordionIndex>ul{
position: relative;
top: 19px;
}
.subverticalaccordionIndex>ul>li:hover { /* que se despliega al poner el cursor del ratón encima */
height: auto;
display: block;
position: relative;
}
.content-li{
list-style: none;
color: white;
border-bottom: 1px solid white;
width: 100%;
position: relative;
left: -30px;
cursor: pointer;
font-family: 'Forum', sans-serif;
font-size: 1em;
}
.content-li a{
color: white;
text-decoration: none;
}
.content-li:hover, .content-li:focus{
background-color: #DCCCC1;
color: #e86308;
}
.subverticalaccordionIndex>ul>li>h3{
margin-bottom: 0.3em;
margin-left: .5em;
}
.subverticalaccordionIndex>ul>li>h3>a{
width: auto;
cursor: pointer;
font-size: 1.1em;
font-family: 'Forum', sans-serif;
width: 140px;
background-color: #9a8d84;
color:#DCCCC1;
width: auto;
}
.subverticalaccordionIndex>ul>li>h3>a:hover{
display: block;
color: #655448
}
.subverticalaccordionIndex>ul>li>a>h3 span{
float: left;
margin-right: 0;
}
.subverticalaccordionIndex>ul>li>h3:hover{
color:#fff;
background-color: #9a8d84;
}
.subverticalaccordionIndex>ul>li>h3>ul {
width: 75%;
}
subverticalaccordionIndex>ul>li>h3>ul.content-menu{
width: 90%;
}
subverticalaccordionIndex>ul>li>h3:hover{
display: block;
height: auto;
}
here is a demo illustrating menu dropdown on parent element hover. Please note this is not possible for onclick using pure css and without javascript.
css
.subverticalaccordionIndex .content-menu { display: none; }
.subverticalaccordionIndex li:hover .content-menu { background:red; display: block; }
<div class="verticalaccordionIndex">
<img src="Images/botones/ficheros-btn.png" class="verticalaccordion">
<ul>
<li>
<h3>FICHEROS</h3>
<div class="subverticalaccordionIndex">
<ul>
<li>
<h3>Cambio de centro <span>+</span></h3>
<ul class="content-menu">
<li class="content-li">Festivos</li>
<li class="content-li">Áreas de trabajo</li>
<li class="content-li">Centros</li>
<li class="content-li">Actividades</li>
<li class="content-li">Espacio de trabajo</li>
<li class="content-li">Cierre de espacios</li>
<li class="content-li">Trabajadores</li>
<li class="content-li">Convenio</li>
</ul>
</li>
<li>
<h3> Gestión de usuarios</h3>
</li>
<li>
<h3>Salir</h3>
</li>
</ul>
</div>
</li>
</ul>
</div>
I tried your code but it is wrong.
You have to know that each <ul> can only contains <li>. But each <li> can contains <ul>
Example :
<ul>
<li>
Company
<ul>
<li>Our team</li>
<li>About</li>
</ul>
</li>
</ul>
You forgot to close some markers or you have opened too many.
I think your problem is here.
Because of that I don't know what you want to do. Like "Sai Deepak" said on your post, provide us any fiddle, because it is hard to understand.
But first, try to correct your code.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I want to make effect on :before element when the mouse hover on first-child of the list item so the code would be
li:first-child:hover ul:before { Code here }
To make it more clearly see the code from here or see below
( i want to make the effect on .sub1-ul:before )
* {
box-sizing: border-box;
text-decoration: none;
list-style-type: none
}
nav.nav-menu {
width:100%;
margin: 0 auto;
z-index: 2000;
}
ul.menu-wrapper {
position: relative;
width: 770px;
height: 90px;
padding-left: 100px;
padding-top: 15px;
margin: 0px auto;
z-index: 2000;
}
li.nav-item {
position: relative;
float: left;
margin-left: 30px
}
li.nav-item > a {
display: inline-block;
width: 150px;
height: 50px;
padding-top: 11px;
background-color: #3498DB;
color: #fff;
text-align: center;
font-weight: 600;
font-size: 19px;
border: 1px solid #5aabe1;
-webkit-transition: background-color 400ms, color 700ms ease-out;
-moz-transition: background-color 400ms, color 700ms ease-out;
transition: background-color 400ms, color 700ms ease-out
}
li.nav-item:hover > a {
background-color: #fffffc;
color: #3498db
}
/* ========== START SUB1 ========== */
.sub1-ul:before {
content: "";
display: inline-block;
position: relative;
width: 0px;
top: 15px;
left: 30px;
border-width: 0px 15px 15px 0px;
border-color: #0f0 #0F8FD3 transparent #000;
border-style: solid solid solid solid;
transform: rotate(-45deg)
}
.sub1-ul li:first-child:hover .sub1-ul:before {
content: "";
display: inline-block;
position: relative;
width: 0px;
top: 15px;
left: 3px;
border-width: 0px 15px 15px 0px;
border-color: #0f0 #000 transparent #000;
border-style: solid solid solid solid;
transform: rotate(-45deg)
}
.sub1-ul {
position: absolute;
top: 50px;
width: 100%;
height: 0;
margin-top:-10px ;
visibility: hidden;
overflow: hidden;
opacity: 0;
z-index: 9999;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all .2s linear
}
li.nav-item:hover .sub1-ul {
height: auto;
visibility: visible;
overflow: visible;
opacity: 1
}
.sub1-item {
position: relative;
top: -1px;
left: -36%;
width: 150px;
margin-top: 3px;
-webkit-transition:margin-left 200ms linear;
-moz-transition:margin-left 200ms linear;
transition:margin-left 200ms linear
}
.sub1-item:hover {
margin-left: 4px;
}
.sub1-item .sub1-a {
display: inline-block;
width: 150px;
height: 50px;
padding-top: 15px;
background-color: #0F8FD3;
text-align: center;
color: #fff;
font-size: 17px;
border-left: 6px solid #4C4C4C;
-webkit-transition: background-color 400ms,
border-left-color 400ms,
padding-left 200ms linear;
-moz-transition: background-color 400ms,
border-left-color 400ms,
padding-left 200ms linear;
transition: background-color 400ms,
border-left-color 400ms,
padding-left 500ms linear
}
.sub1-item:hover .sub1-a {
padding-left: 6px;
border-left-color: #e67e22;
}
/* ========== START SUB2 ========== */
.sub2-ul {
position: absolute;
top: 0px;
left: 100%;
width: 150px;
padding: 0;
margin: 0;
visibility: hidden;
overflow: hidden;
opacity: 0;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
transition: all 400ms ease
}
.sub1-item:hover .sub2-ul {
height: auto;
visibility: visible;
overflow: visible;
opacity: 1
}
.sub2-item {
position: relative;
margin-bottom:2px;
}
.sub2-item:hover {
border-left-color: #4c4c4c
}
.sub2-item .sub2-a {
display: inline-block;
width:150px;
height:50px;
margin-left: 1px;
padding-top:15px;
background-color: #3498DB;
color: #fff;
text-align: center;
font-size: 17px;
font-weight: normal;
border-left: 5px solid #e67e22;
-webkit-transition:all 200ms ease-in-out;
-moz-transition:all 200ms ease-in-out;
transition: all 200ms ease-in
}
.sub2-item:hover .sub2-a {
border-left-color: #4c4c4c
}
<nav id="sec-nav" class="nav-menu">
<ul class="menu-wrapper">
<li class="nav-item"> Menu1
<ul class="sub1-ul">
<!-- ===== Want to move before with this list item when mouseover on it =====-->
<li class="sub1-item">
<a class="sub1-a" href="#"> sub menu </a>
<ul class="sub2-ul">
<li class="sub2-item"><a class="sub2-a" href="#"> sub menu2 </a>
</li>
<li class="sub2-item"><a class="sub2-a" href="#"> sub menu2 </a>
</li>
<li class="sub2-item"><a class="sub2-a" href="#"> sub menu2 </a>
</li>
<li class="sub2-item"><a class="sub2-a" href="#"> sub menu2 </a>
</li>
</ul>
</li>
<!--================ Ens of the list item ======================== -->
<li class="sub1-item">
<a class="sub1-a" href="#"> sub menu </a>
<ul class="sub2-ul">
<li class="sub2-item"><a class="sub2-a" href="#"> sub menu2 </a>
</li>
<li class="sub2-item"><a class="sub2-a" href="#"> sub menu2 </a>
</li>
<li class="sub2-item"><a class="sub2-a" href="#"> sub menu2 </a>
</li>
<li class="sub2-item"><a class="sub2-a" href="#"> sub menu2 </a>
</li>
</ul>
</li>
<li class="sub1-item"><a class="sub1-a" href="#"> sub menu </a>
</li>
<li class="sub1-item"><a class="sub1-a" href="#"> sub menu </a>
</li>
<li class="sub1-item"><a class="sub1-a" href="#"> sub menu </a>
</li>
</ul>
</li>
<li class="nav-item"> Menu2
</li>
<li class="nav-item"> Menu3
</li>
</ul>
</nav>
You need to adjust the CSS selector to be .sub1-ul > li:first-child:before because you want the pseudo-element to be on the first-child so that it moves with the secondary menu.
You then have to adjust
.sub1-ul > li:first-child .sub2-ul {
top: 20px;
}
so that the top has the right number of pixels to keep it lined up with the top edge of the the first sub-menu.
Slightly hard to explain, but it works.
* {
box-sizing: border-box;
text-decoration: none;
list-style-type: none
}
nav.nav-menu {
width: 100%;
margin: 0 auto;
z-index: 2000;
}
ul.menu-wrapper {
position: relative;
width: 770px;
height: 90px;
padding-left: 100px;
padding-top: 15px;
margin: 0px auto;
z-index: 2000;
}
li.nav-item {
position: relative;
float: left;
margin-left: 30px
}
li.nav-item > a {
display: inline-block;
width: 150px;
height: 50px;
padding-top: 11px;
background-color: #3498DB;
color: #fff;
text-align: center;
font-weight: 600;
font-size: 19px;
border: 1px solid #5aabe1;
-webkit-transition: background-color 400ms, color 700ms ease-out;
-moz-transition: background-color 400ms, color 700ms ease-out;
transition: background-color 400ms, color 700ms ease-out
}
li.nav-item:hover > a {
background-color: #fffffc;
color: #3498db
}
/* ========== START SUB1 ========== */
.sub1-ul > li:first-child:before {
content: "";
display: inline-block;
position: relative;
width: 0px;
top: 15px;
left: 65px;
border-width: 0px 15px 15px 0px;
border-color: #0f0 #0F8FD3 transparent #000;
border-style: solid solid solid solid;
transform: rotate(-45deg);
transition: left 200ms linear
}
.sub1-ul {
position: absolute;
top: 50px;
width: 100%;
height: 0;
margin-top: -10px;
visibility: hidden;
overflow: hidden;
opacity: 0;
z-index: 9999;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all .2s linear;
border: 1px dotted blue;
}
li.nav-item:hover .sub1-ul {
height: auto;
visibility: visible;
overflow: visible;
opacity: 1
}
.sub1-item {
position: relative;
top: -1px;
left: -36%;
width: 150px;
margin-top: 3px;
-webkit-transition: margin-left 200ms linear;
-moz-transition: margin-left 200ms linear;
transition: margin-left 200ms linear
}
.sub1-item:hover {
margin-left: 4px;
}
.sub1-item .sub1-a {
display: inline-block;
width: 150px;
height: 50px;
padding-top: 15px;
background-color: #0F8FD3;
text-align: center;
color: #fff;
font-size: 17px;
border-left: 6px solid #4C4C4C;
-webkit-transition: background-color 400ms, border-left-color 400ms, padding-left 200ms linear;
-moz-transition: background-color 400ms, border-left-color 400ms, padding-left 200ms linear;
transition: background-color 400ms, border-left-color 400ms, padding-left 500ms linear
}
.sub1-item:hover .sub1-a {
padding-left: 6px;
border-left-color: #e67e22;
}
/* ========== START SUB2 ========== */
.sub2-ul {
position: absolute;
top: 0px;
left: 100%;
width: 150px;
padding: 0;
margin: 0;
visibility: hidden;
overflow: hidden;
opacity: 0;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
transition: all 400ms ease
}
.sub1-ul > li:first-child .sub2-ul {
top: 20px;
}
.sub1-item:hover .sub2-ul {
height: auto;
visibility: visible;
overflow: visible;
opacity: 1
}
.sub2-item {
position: relative;
margin-bottom: 2px;
}
.sub2-item:hover {
border-left-color: #4c4c4c
}
.sub2-item .sub2-a {
display: inline-block;
width: 150px;
height: 50px;
margin-left: 1px;
padding-top: 15px;
background-color: #3498DB;
color: #fff;
text-align: center;
font-size: 17px;
font-weight: normal;
border-left: 5px solid #e67e22;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
transition: all 200ms ease-in
}
.sub2-item:hover .sub2-a {
border-left-color: #4c4c4c
}
<nav id="sec-nav" class="nav-menu">
<ul class="menu-wrapper">
<li class="nav-item"> Menu1
<ul class="sub1-ul">
<li class="sub1-item">
<a class="sub1-a" href="#"> sub menu </a>
<ul class="sub2-ul">
<li class="sub2-item"><a class="sub2-a" href="#"> sub menu2 </a>
</li>
<li class="sub2-item"><a class="sub2-a" href="#"> sub menu2 </a>
</li>
<li class="sub2-item"><a class="sub2-a" href="#"> sub menu2 </a>
</li>
<li class="sub2-item"><a class="sub2-a" href="#"> sub menu2 </a>
</li>
</ul>
</li>
<li class="sub1-item">
<a class="sub1-a" href="#"> sub menu </a>
<ul class="sub2-ul">
<li class="sub2-item"><a class="sub2-a" href="#"> sub menu2 </a>
</li>
<li class="sub2-item"><a class="sub2-a" href="#"> sub menu2 </a>
</li>
<li class="sub2-item"><a class="sub2-a" href="#"> sub menu2 </a>
</li>
<li class="sub2-item"><a class="sub2-a" href="#"> sub menu2 </a>
</li>
</ul>
</li>
<li class="sub1-item"><a class="sub1-a" href="#"> sub menu </a>
</li>
<li class="sub1-item"><a class="sub1-a" href="#"> sub menu </a>
</li>
<li class="sub1-item"><a class="sub1-a" href="#"> sub menu </a>
</li>
</ul>
</li>
<li class="nav-item"> Menu2
</li>
<li class="nav-item"> Menu3
</li>
</ul>
</nav>
I have a standard pure CSS dropdown menu that needs to be supported back to ye olde IE7. My bug is that the submenu will disappear as the user moves their mouse down the links.
GIF illustration
I have been reading about IE7 stacking contexts and it is my understanding that I should be able to set { position: relative; z-index: (something large); } on the parent element of my menu to deal with the disappearing submenu.
This has not worked for me, and I can't find anything in my page content that would have a higher z-index than the menu anyway. (For one thing, nothing actually gets painted over the menu.) Got any clues? Here is my markup (or see Codepen):
<div class="mainmenu">
<div class="row">
<a href="/" class="pull-left">
<img src="logo.png" class="logo">
</a>
<ul class="nav-main">
<li>Item 1</li>
<li>Item 2</li>
<li><a class="dropdown">Item 3 </a>
<ul class="nav-sub">
<li>Sub-Item 1</li>
<li>Sub-Item 2</li>
<li>Sub-Item 3</li>
</ul>
</li>
<li><a class="dropdown">Item 4 </a>
<ul class="nav-sub">
<li>Sub-Item 1</li>
<li>Sub-Item 2</li>
<li>Sub-Item 3</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="content">
<!-- Then some page content -->
</div>
The CSS (colors removed):
.mainmenu {
position: relative;
top: 0;
z-index: 597;
width: 100%;
height: 66px;
margin: 0;
padding: 0 22px;
}
.mainmenu .logo {
height: 39px;
margin: 16.5px 0;
vertical-align: middle;
}
ul.nav-main {
margin: 0;
float: right;
padding: 0 20px;
position: relative;
top: 0;
}
ul.nav-main a,
ul.nav-main li {
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}
ul.nav-main li {
list-style-type: none;
padding: 22px 8px;
float: left;
}
ul.nav-main li a,
ul.nav-main li span {
display: block;
}
ul.nav-main li:hover ul {
visibility: visible;
opacity: 1;
}
ul.nav-main ul.nav-sub {
visibility: hidden;
opacity: 0;
position: absolute;
padding: 0;
margin: 0;
top: 66px;
}
ul.nav-main ul.nav-sub li {
display: block;
float: none;
padding: 0;
outline: 1px solid #aaa;
}
ul.nav-main ul.nav-sub li a,
ul.nav-main ul.nav-sub li span {
display: block;
padding: 11px;
}
Any help would be appreciated.
ul.nav-main ul.nav-sub {
visibility: hidden;
opacity: 0;
position: absolute;
padding: 0;
margin: 0;
top: 100%;
}
it works for me perfectly in IE7
codepen