I have a dropdown menu and a main photo on the index.html of my website. However, when I hover over the dropdown menu, it hides behind the main photo and can be slightly seen only if the window is resized.
Here is the link to my website:
wanghenry79.github.io
The dropdown menu hidden behind the main photo should be seen when hovering over the "Resources" tab.
Thanks in advance for your help!
From .newest-review-cover just remove the position: relative;
.newest-review-cover {
position: relative; // REMOVE THIS LINE
z-index: 0;
display: none;
}
or give av ul li:hover ul a z index:
av ul li:hover ul {
display: block;
z-index: 1;
}
The problem is that the dropdown has a lower z-index than the image's z-index.
Add this to the dropdown menu <ul>:
style="z-index: 9;"
Related
I want to know how to change the position of the second(child) dropdown when overflow the submenu. It now the right side when overflow the menu should be visible in left side.
In this below link visit the identify link before logout under the identify visit identify3 it displays another submenu it should be comes left side, If not overflow it should be in right side only...
http://demos.sanwebcorner.com/matex/
Thanks in advance!!
Put this in your css file:
menu ul ul ul li {
right: 170px;
left: initial !important;
}
just change left:170px to right :170px in my-style.css line 920
menu ul ul ul li {
right: 170px;
}
use this so that the style will be applied to the last second child(position where the overflow occurs):
menu ul ul ul li:nth-last-child(2)
{
right:170px;/* if you want the alignment to be left of the hovered list*?
}
OR
menu ul ul ul li:nth-last-child(2)
{
top:0;/* if you want the alignment to be bottom of the hovered list*/
left:0;/*not neccessary if style aren't used in parent class/elements*/
right:0;
}
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 made a navigation with the help of bootstrap. With css i made a submenu that appears on hover.
Only when i want to click a title in the submenu, the submenu dissapears before i can click it.
I have read on other threads that i have to add the following to the css:
.dropdown:hover > .dropdown-menu {
display: block;
}
I added it, but it's still not working. What am i doing wrong?
This is the fiddle: http://jsfiddle.net/robin2609/buw4wc1t/
Gr. Robin
This happens because you have your padding only going down 10px and then your submenu is below the gray. while your padding does not reach the end of the main menu and therefore when the hover comes off the .nav > li > a it is now hovering just .nav which doesn't keep the sub menu open.
Change padding in:
.nav > li > a
to:
.nav > li > a
{
padding: 10px 13px 30px 13px;
}
Working JSFiddle: http://jsfiddle.net/buw4wc1t/3/
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