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
Related
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
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 am trying to implement multi-level bootstrap menu that is triggered by "hover". The first level works just fine. However for deeper levels the menu throws up everything as "visible". Need help customizing the CSS so that the hover works and makes only the required menu items visible.
.dropdown-menu .sub-menu {
left: 100%;
right: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: 0px;
}
My problem is illustrated in below fiddle. Thanks!
(Tried searching here for similar questions but couldn't find what I'm looking for)
http://jsfiddle.net/M7WHA/
Use an immediate child selector > like:
.dropdown-menu li:hover > .sub-menu {
visibility: visible;
}
Demo: http://jsfiddle.net/IrvinDominin/M7WHA/2/
Ok, i am gonna try to explain this as well as i can. I want to have a dropdown menu and when you hovering over the sub item of the menu item, I want ONLY that menu item to be a different colour but the sub menu items should stay the same.
Using the li:hover method, makes both the sub menu and the menu item change to that color. Is there any way to only change the top menu item when the sub menu is being hovered over?
Thanks in advance
EDIT:
here is my current CSS
.dropdown-horizontal-container
{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
ul.dropdown li ul li
{
border-bottom: #FFF 1px solid;
}
ul.dropdown li
{
position: relative !important;
display: block !important;
}
ul.dropdown li a
{
position: relative !important;
display: block !important;
padding: 10px 15px !important;
}
ul.dropdown li a:hover
{
color:#428bca !important;
}
PS: this is overwriting the css generated by a wordpress plugin. Not quite sure how to post the code it generates...if it helps the plugin is http://wordpress.org/plugins/dropdown-menu-widget/
How about:
ul.dropdown:hover {
background-color:#fff;
}
ul.dropdown li:hover {
background-color:#3e3e3e;
display:block;
}
Since i was short on time, I took the easy way out and removed the background for the hover so i didnt need to change the link color when hovering over the sub menu items. I am going to look into Jquery as some people suggested later on though to see if i cna get it working.
i write an own wordpress theme at the moment and have a problem with the submenu. I want that the submenu appears after hovering over the "Events" link in the example below. In some browser's the submenu is displayed under the "Events" link, with a 5px margin to the left. This is fine. In other browsers (Firefox 17 on Win 7) the submenu is displayed on the right side from the "Events" link and not under the "Events" text like it should be.
Does somebody know why this happens and how i can get rid of it?
Thanks.
Example: http://codepen.io/anon/pen/pqAIy
It is this part of your code that you need to change:
.menu-item:hover .sub-menu {
display: inline-block;
position: absolute;
}
To this:
.menu-item:hover .sub-menu {
display: block;
position: absolute;
}
(so inline-block to block)
Tested and working in IE9+, Mz FF, Chrome & Safari
Now add this code
nav .menu li {
position:relative;
}
nav .menu li:hover .sub-menu {
display:block;
left:0;right:0;top:18px;
position: absolute;
}
Demo
This code is universal Run all Latest and Standard Browser