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/
Related
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
Currently I have a set of links with a div over them. I would like the div to disappear on mouseover allowing the links behind to be clickable.
:hover {display: none}
on the covering div causes a flickering effect at it's creating a loop so I can't do that.
:hover {background-color: rgba(0,0,0,0);}
also does not work as the div is still covering the links. I thought that adding a
:hover {pointer-events:none;}
could work but that also creates a flickering loop.
I basically want a div to not be there when I mouse over it, yet making it not there causes the :hover command to not read it as there, making it come back (...and the flickering begins)
This should work:
:hover {
pointer-events: none;
visibility: hidden;
}
The reason is that display: none physically removes the element, meaning you are no longer hovering it. Thus, it adds it back, and now, you're hovering it. That's why you get the flickering effect. visibility: hidden on the other hand, keeps the element exactly where it is, so you'll still technically be hovering it.
I lied, that is not going to work at all.
Here is a real solution:
HTML
<div class="container">
Hello
<div class="overlay"></div>
</div>
CSS
.container {
width: 50px;
height: 50px;
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: black;
}
.container:hover .overlay {
display: none;
}
fiddle: https://jsfiddle.net/zqsn2fym/
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
any idea what am I missing at the link: ** http://jsfiddle.net/AnUZ7/2/ **
I'm trying to make a dropdown like at Zerply
Setting
<ul>
<li>Lorem</li>
<li>Ipsum</li>
</ul>
css here:
ul {
position: absolute;
background: orange;
width: 10em;
left: -999em;
}
a.setting:hover ul {
left: auto;
}
Thanks!
Try replacing a.setting:hover ul {...} to
a.setting:hover + ul,
ul.submenu:hover {...}
Edited fiddle:
http://jsfiddle.net/AnUZ7/4/
The .first + .second selector selects the next element after .first.
The .first ~ .after-first selector select all elements after .first.
These selectors are not working on Internet Explorer 6, but hopefully that is not a big problem in 2011.
Beware the (possible) margin/padding/other gaps between the a and its ul in your actual design! If the mouse pointer falls between them, the menu will disappear.