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
Related
I used a tutorial to build a responsive navigation menu which was working great here:
http://nova.umuc.edu/~ct386b09/giotto/index.html
I added a logo and some other elements and have lost the hover when the media size changes as seen here:
http://nova.umuc.edu/~ct386b09/giotto2/index.html
I have have a feeling it's somewhere here but cant tell what it might be:
HTML:
<ul class="nav hidden">
CSS:
ul.nav
{ list-style-type:none;
margin:0;
padding:0;
position: absolute;}
ul.nav li a:hover + .hidden, .hidden:hover {
display: block;
z-index: 999;}`
I can post the entire HTML/CSS if needed.
The problem is that your #header and #navbar have hardcoded height values and the .nav elements, while the #menu is float:left due to the nav class it has.
You need to set height:auto for the #header and #navbar in the mobile version and also either add overflow:hidden on the #navbar or remove the float:left from the .nav.
So the actual problem was that the .full-width element was overlaid on the open menu and it was intercepting the mouse events.
There is this rule in line 81 of your CSS for width below 759px :
ul.nav {
position: static;
display: none;
}
And there is no hover rule which changes that diplay: none. So you should add this rule directly under the one above:
#navbar:hover ul.nav {
display: block;
}
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 cannot seem to get the sub-menu to appear on this website I built: http://website-test-lab.com/sites/mirandaparsons/
If you use Dev tools/Firebug, and check .sub-menu to display: block; then you can see that the sub-menu does appear, but not in plain sight. I've tried adding z-index to several of the menu areas with no luck.
The odd thing is, that it does appear correctly in FF on Windows?!
I haven't pasted the code here because there would be so much to copy and paste.
Any help would be much appreciated.
Thanks
I think that what you need is a background-color to .sub-menu and position relative to .nav I just tried to set it and you can see the sub menu well :
.navigation .nav {
position:relative;
}
PS : Worked on firefox 33 Mac
You need to add this to your CSS:
.navigation .nav {
position: relative;
}
This would properbly be usefull to read: http://www.w3schools.com/css/css_positioning.asp
Add this css to your stylesheet
#site-navigation.main-navigation{
position:relative;
}
I'm looking to make a horizontal drop down menu much like the main menu from HowStuffWorks: http://home.howstuffworks.com/community-living
Notice how the submenu covers the full width of the horizontal main menu bar, rather than dropping down in vertical lists. And how the currently selected main menu item and sub menu items are highlighted. I would like those features, with the added bonus of showing the other sub menu lists when hovering over the other main menu items, please look at examples below:
Basically I want to combine the effect of showing different submenu lists as you hover over the links as in this one:
http://jsfiddle.net/SKNYC/
And also having the currently selected menu highlighted in a different colour, as in this one:
http://jsfiddle.net/pRT6S/
.full-width {
width: 100%;
}
.normal-width {
width: 1024px;
margin: 0 auto 0 auto;
}
.main-menu > li {
float:left;
list-style-type:none;
padding-right:30px;
}
.sub-menu {
display:none;
}
.sub-menu li {
float:left;
padding-right:30px;
}
.sub-menu li:hover ul {
float:left;
padding-right:30px;
background-color:green;
}
.main-menu li.active {
background-color:blue;
}
.main-menu > li.active .sub-menu {
display:block;
position:absolute;
left:0;
right:0;
background-color:blue;
}
Note that I'm very new to CSS/HTML, it would be nice to get some direction as to how to proceed. :)
The first jfiddle is modified from this code:
https://gist.github.com/jgoyon/3993263
The second and third jfiddle comes from someone's code in this thread:
CSS full-page-width horizontal menu and horizontal submenu
EDIT:
Another code that I spotted that is very similar to my solution is this one:
http://jsfiddle.net/U65eT/
but I'm not sure why when the hover over item1 and item2 doesn't work?
EDIT:
Current revision
http://jsfiddle.net/pRT6S/4/
It is almost correct, just has the problem of not showing the submenu when hovering over item1
How's this? Check the comments I made.
http://jsfiddle.net/pRT6S/3/
The main problem was needing to modify .main-menu, not .sub-menu, as seen below:
/*Not doing this right*/
.main-menu li:hover ul { /* This needs to be .main-menu, not .sub-menu! */
display: block;
/* float:left; */
position: absolute; /* better than float in this case */
padding-right:30px;
background-color:green;
left: 0; /* make sure everything hangs on the left */
}
Update: You can use the code you originally provided (that I wrongfully commented out), but modify it a bit my adding absolute positioning and z-indexes:
http://jsfiddle.net/pRT6S/5/