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
Related
I'm sure my title is not the easiest to understand. I'll try and explain what I am trying to do.
If you go to this URL (http://buffalo.demo.libguides.com) and rollover over the global navigation (Find Library Materials, My Account, Get Help, etc) you'll see the hover is blue. But when you rollover the dropdown menu it goes back to grey. I want it to stay blue while hovering on the dropdown.
I had this working with an old version of Bootstrap, but I'm having trouble with this one. Any help would be appreciated.
Here is a URL with the old version that works. http://library.buffalo.edu
Try:
.content-block .navbar-nav > li:hover a {
color: #fff;
background-color: #062198;
}
Right now .content-block .navbar-nav > li > a:hover on line 1466 of style-gudes.css is controlling the background color of the navigation item. Since you're using a hover state on the anchor element which doesn't wrap the nested ul that forms the dropdown, it will not remain blue and revert to the default color once the cursor moves off that element.
Hook into the hover state of the li that wraps the dropdown ul. Target the anchor element when that li is being hovered, li:hover a. Now, whenever the the dropdown's parent li is hovered, the a will also be styled when that li is hovered.
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;}
I created a dropdown menu and made it drop on hover, but the problem is that I need to make a space between the toggle and the dropdown-menu as:
<http://jsfiddle.net/yabasha/nbbjm/1/>
When hover it displays the dropdown-menu but the problem when I want to select the menu it disappears.
Please advice,
Your problem is there is a gap between the li and the second level menu so when you are hovering, you are no longer on the li when you try to move to your submenu, which causes it to close.
You either need to move your submenu up, or extend the height of your li on hover to cover the space in between the li and the submenu
Adding the following styles to your fiddle seems to fix the problem:
.dropdown:hover {padding-bottom:20px;}
.dropdown-menu {top:auto;}
http://jsfiddle.net/nbbjm/8/
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.
On a submenu on a website (lainegabriel.net), I have bottom borders that disappear on some of the links in the submenu under "Buy". This only appears in Chrome; Firefox and Safari render it properly. I believe the anchor tag is somehow overlapping over elements in the unordered list. But I simply cannot figure out what is happening.
And the problem goes away if you navigate to a page inside the submenu. Otherwise, some of the borders disappear.
Any ideas?
Thanks!
ul.sub-menu li{
float:none}
replace this with ul.sub-menu li{
display:block;
width:100%;}