I'm not sure why, but my dropdown menus refuse to stay on the screen when hovering over them. They work fine when I make them clickable with :focus in the CSS with this:
.dropdown > .link:focus + .dropdown-menu
But, I want them to work on hover. But when I set it to the following, the dropdown disappears as soon as you take the mouse off the menu header:
.dropdown > .link:hover + .dropdown-menu
Here is the code on JSFiddle ---> https://jsfiddle.net/L8u96pbr/
What can I change to make it work?
Your dropdown disappears because as you move your cursor from the class link to the next sibling with class dropdown-menu, it un-hovers the link, causing the dropdown to disappear. To fix this, you can add padding to link, and if you would like it to take up the same amount of space you can add a negative margin of equal value to the padding (e.g. add .link { padding: 10px; margin: -10px; }).
Moreover, your selector .dropdown > .link:hover + .dropdown-menu only affects the class dropdown-menu when class link is hovered. You want this same effect to persist as class dropdown-menu is hovered, so add .dropdown-menu:hover as well.
.dropdown > .link:hover + .dropdown-menu,
.dropdown-menu:hover {
opacity: 1;
transform: translateY(0px);
pointer-events: auto;
}
The dropdown disappears because your CSS tells it to show only when you hover on .link which is your about/product link
Instead of this:
.dropdown > .link:hover + .dropdown-menu {
opacity: 1;
transform: translateY(0px);
pointer-events: auto;
}
Do this:
.dropdown:hover .dropdown-menu {
opacity: 1;
transform: translateY(0px);
pointer-events: auto;
}
Thank you would fix it
Related
First question on Stack Overflow so if I am missing anything you need just ask and I'll do my best to provide it.
Basically I have a set of images that are acting as links to websites, when you hover over them there is an opacity effect (goes to 0.7). This is fine but when you hover and the opacity kicks in a grey box appears in the middle, I am assuming this is due to it being a link with an anchor tag.
My question is how do I get rid of that grey box? See below for images and code:
HTML for images
<div class="col-md-4 centered paddedBottom">
<p class="uppercase">Angela Macaulay Therapies</p>
<a href="http://angelamacaulaytherapies.uk" target="_blank">
<img src="images/angelamacaulaytherapies.png" /></a>
</div>
This is css for images
#our_work img {
width:400px;
height:400px;
display: inline-block;
height: auto;
max-width: 100%;
}
CSS for hover over images
#our_work img:hover {
opacity: 0.7;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
IMAGE BEFORE HOVER - http://i.stack.imgur.com/Yqx8N.png
IMAGE WITH HOVER AND GREY BOX - http://i.stack.imgur.com/VNDjD.png
Anything else you need to help let me know!
So as per my comment above in response to Webber, I found the cause of this (for me) was because when changing the colour of the navbar hover effect I was also targeting all anchor tags. This isn't usually noticeable but with the opacity effect this became visible. I changed my code to the following:
From:
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, a:hover {
background-color:grey !important;
}
To:
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, #main_nav a:hover {
background-color:grey !important;
}
first of all sorry for my english I'm going to try to be as precise as possible, here is my problem:
In my css I created a div displayed with none, and when I hover on a link in the nav I changed the display with display block it is a simple sub-nav pattern. But here is my problem, once i'm hovering my link when I leave it my sub menu disappears automatically, so how do I keep my sub menu in display block even if i'm not hovering the trigger anymore and all of that in pure css (it is an exercice for me):
here is my repo on github : https://github.com/MehdiAlouafi/Int-gration-Briefing-2
I think you made a couple of mistakes.
/* First of all it's better to have your list-item relative. */
nav ul > li {
position:relative;
}
/* Then your .on-hover can have simpler top and left coordinates. */
.on-hover {
height: 150px;
background-color: rgb(243,243,241);
width: 165px;
position: absolute;
left: 0;
top: 0;
display: none;
border-bottom: 1px solid rgba(96, 96, 96, 0.2);
z-index: -1;
}
/* You want the hovering to be over the entire li.*/
nav ul > li:hover .on-hover {
display: block;
}
You had the hover work like this. Which means it stops hovering when you leave the #test being the anchor(<a>) element
#test:hover + .on-hover {
Working jsfiddle: https://jsfiddle.net/3su9jppc/1/
I have currently been working on a project and it's soon to be finished.
The main problem left which I have been scratching my head over is that the sub menus to the left of the "active menu" not showing up.
Including a gif to display the problem here
The URL of the website is: www.su.fi
The problem I had before was that the sub-menu disappeared after hover, but that I solved by adding;
.sub-nav, .sub-nav > ul {
width: 500px !important;
box-shadow: none;
background-color: #FF008C;
display: block;
}
#main-nav .act .sub-nav {
visibility: visible !important;
opacity: 1 !important;
After that I noticed that the menu items left to the active menu did not show up.
Best regards
Thanks!
Would be really happy if someone could give an input to this problem.
The problem i saw is that your
#main-nav .act .sub-nav {
visibility: visible !important;
opacity: 1 !important;
}
its over the li:hover div.sub-nav layer.
A solution maybe play with the z-index:
On your li:over apply z-index: 999; to its children div.sub-nav
I've been having trouble making it so the links I have (which are nested in list elements) rotate when they're hovered over. I've been doing this:
li:hover {
color: #ff0000;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
transform: rotate(15deg);
}
I know the CSS is being applied, because the color changes. I know my syntax is correct, because when I tried the same thing, substituting nav for li, it worked. Is there a reason this won't work with lis in particular for some reason?
You could try changing the li selectors in your css to link selectors, then add
display:inline-block;
see http://jsfiddle.net/xKNrQ/. You could just add the display property to the li selector, but then you'd have to use a separate rule to apply the color change for <a> tags.
Is your li set as a block element?
This works: http://jsfiddle.net/dQNFF/1/
I added this CSS:
li {
display: block;
width: 100px;
height: 20px;
}
if I set visibility:hidden on a nested li element, how do I set it back on hover?
eg.
#menu li ul li {
visibility: hidden;
}
I tried:
#menu li ul li:hover {
visibility: visible;
}
But it doesn't work - so clearly I haven't got the syntax right!
cheers
visibility: hidden hides the element and leaves no hoverable surface, so there will never be a hover event triggered.
Try opacity: 0 (or even opacity: 0.00001, not sure right now whether the surface remains with 0) to get the desired effect. Note that IE < 8 needs special treatment (filter: alpha(opacity=0))
Other browsers need other opacity settings as well, check out #Nick Craver's link for a full list.
Why not add a child wrapper in each <li> like this (could be a p or a div):
<li><p>dadada</p></li>
Then, for styling:
#menu ul li p {
visibility: hidden;
}
#menu ul li:hover p {
visibility: visible;
}