I've implemented a simple CSS dropdown menu that works perfectly in every browser I've tried except for Safari (on Windows). My page can be seen here. Within my primary navigation list items, I have an <li> class called "drop" that is set to position:relative and a div labeled "drop-container" that contains the drop-down menu items and is positioned absolutely with respect to the parent list item. I'm changing visibility on hover-- in this case nav#primary ul li.drop .dropcontainer-- to visible and changing the opacity from 0 to 1 to enable a CSS transition.
I can't figure out for the life of me why this simple menu isn't working in Safari-- any help is greatly appreciated.
Try to operating with display.
nav#primary ul li.drop .dropcontainer {display:none;}
nav#primary ul li.drop:hover .dropcontainer {display:block;}
Related
I came across this site http://northerly.com.au/ and I am wondering how it is possible to make an top menu li active while hovering over it's submenu. In this case it seems like there is no js script to add active class. How it is done then? Thank you
In fact, that's not the top menu li which is active when you're hovering on the sub menu. There is a sibling SPAN before submenu element, as a result of hovering to sub menu, you are also hovering the container li element.
top li has two elements:
a SPAN has top menu title
a Sub Menu
Use a CSS selector like this:
li:hover span {/*span is active!*/ }
See a simple demo here.
http://jsfiddle.net/kvKfr/
Shows the menu as I've got it working. Does anyone know how to keep the LI element in the parent UL from expanding? I want the sub menu to show to the right (as it is) with out causing the parent LI to change sizes. Is this possible?
The basic idea on these is to make the position absolute:
http://jsfiddle.net/kvKfr/1/
Set
ul.myMenu li > ul
to be
position:absolute
Demo at http://jsfiddle.net/gaby/kvKfr/2/
I have a main menu using a list. When the user hovers over an item it moves up to indicate the hover to the user all while changing the background color and displaying its sub-menu.
Link to the website with the issue.
Add debug=true to the query string if you need firebug.
The issue is in IE8 where if a sub-menu is active and the user hovers over any list item in the main level all of the previous items act like they are being hovered over too. This means that those list items move up but the background-color does not change. Depending how the user moves the mouse over the list items, some of the items will even go bellow the start position.
Here is the SASS that I converted to CSS in order to help understand how I move my menu items like that.
#mainmenu ul li:hover,
#mainmenu ul li.active{
margin-top: -15px
}
The only difference in HTML between The sub-menu being active and not is the main level list item has a class subactive which is not used by any css and the active sub list item gets a class active.
I have a feeling that the issue is somewhere between the background-color change and the margin-top negative value.
Usually one would expect the elements after to be affected and not the ones before.
Please avoid any Javascript fixes please.
Thank you!
In IE8, when you adjust the margin-top: -15px, it pushes the UL box top to fit, instead of letting the LI go outside the UL box. So all the other tabs move up to fit the new UL box.
I suggest setting the non-hover LI to margin-top: 15px and hover LIs to margin-top: 0--reverse it.
#mainmenu UL LI
{
margin-top: 15px;
}
#mainmenu UL LI:hover
{
margin-top: 0;
}
(This will still work cross-browser.)
Someone told me once they it is possible to create menu's via CSS only, how can you?
It's done through the selector. You use a pseudo class to specify a particular element to only be displayed when its parent element is being hovered over.
#nav li:hover > ul {
display: block;
}
This will only get the ul to display if its parent element, #nav is being hovered over. The ul now is the drop down menu into which you can place more list items. This will work with however many levels you want your drop down menu to have.
This technique is showcased very nicely in this tutorial: CSS3 Dropdown Menu
I was typing up an answer, but this simple, short page goes over it better than I could say. Basically you do display: hidden on the expanded part, and then add a display: block to the trigger element on its hover state.
I am not sure of how to get this to work, I have a Drop Down Menu that is cross browser compatible and I am trying to have the selected "bread crumb" menus system keep the arrows on the :hover style when I am on child menus. As you can see from the link here:
http://www.seth-duncan.com/Test/TestMenu.html
When I go to child menu items the menu reverts back to the blue arrows, when I need them to keep the hover style white arrows.
Any help ?
Thanks
Move
background:#A5CF8C url(images/DownArrow.png) no-repeat scroll right center;
from
#menu li a.sub:hover
to
#menu li:hover a.sub