This seems like a fairly straightforward thing but can't find any tutorial on it.
I have a top menu that changes background colour then one of the menu items is selected. The CSS looks like this:
.nav > li > a:hover,
.nav > li > a.selected {
background-color: #F7A379;
}
However some pages have a side menu, with a class .left-nav and when I click on those links the background styling disappears from the parent nav. Is it possible to keep the styling above when the child page is selected? If so, what would the CSS need to be?
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 have my nav working almost exactly how I want it. The only issue left I can't seem to figure out is this little arrow image I use on a subnav which indicates it contains another level subnav.
ul#css3menu ul span {
background-image: url("images/arrowsub.png");
padding-right: 28px;
}
ul#css3menu ul span:hover {
background-image: url("images/arrowsubhover.png");
padding-right: 28px;
}
When you hover over each subnav with an arrow, it loads a different color arrow image to maintain contrast with the background color that changes on hover.
Problem is when you hover over the next level subnav, the arrow switches back while the background color remains changed (as it should).
Why does the background color of the parent li not lose its hover rules but the arrow does?
you can see the behavior and code with this js fiddle
In your case it is better to assign the hover state on the main container of the list item rather than just target the specific element within your menu list item. In your case change your line 196 on js fiddle to .submenu li:hover span . Even if you move a level deep to access the child menu item, you are by default still hovering over the parent element.
Plus it is good practice not to use IDs when styling. IDs are usually reserved for Javascript.
It looks like the rule that affects the background color on hover is ul#css3menu ul li:hover>a
Since ul#css3menu ul li:hover detects hovering over any li element that is a child of ul#css3menu ul, and the 2nd-level submenu also consists of lis, the hover state for the 1st-level li is maintained when you hover over the 2nd-level li because the original rule is still in effect (since it is active when you hover over any child li, including the 2nd-level lis).
When ul#css3menu ul li:hover is true the CSS style is subsequently applied to the direct child a (rather than applied to the lis) to give you the full rule of ul#css3menu ul li:hover>a. This confused me too for a while because the detection happens separately from the application of the styles. Hope this helps.
I've got a nav menu that each LI has different background bottom border. Then I want each submenu to contain that background border upon hover. The problem is that I'm assigning background colors based on the number of listItems. And this is carrying over to the submenu, which I don't want. If you see, some of the submenus that have more LI's than the main menu, they have the correct background color after they've gone through the same number that main menu has. I hope all this makes sense.
Anyone have an idea on how I can get each submenu to have their own background hover?
Starting point: http://jsfiddle.net/trevoray/BgMAj/
.nav li:first-child + li:hover > a {
background: #0f2992;
color: white;
}
Simply add > a the ID hover css:
#sub-members li:hover > a {}
Updated Fiddle
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.
I have a drop down menu in only CSS and no JAVASCRIPT and I'm having a problem keeping the top (main menu item) highlighted when I move the cursor over the sub menu items. You can see the menu here http://www.codedecks.com/cssnav.html.
If you hover over "Kids" and move your cursor down, as soon as your over "Girls" the top "Kids" looses the highlight.
Any suggestion would be greatly appreciated! Thanks in advance
Change #nav > li a:hover to #nav > li:hover a in your CSS.
Since you have the hidden second-level ul being shown when the top-level li is hovered, it makes sense to have the top-level a get the hover style at the same time. When you move your mouse over the second-level menu links, the a still looks active. li:hover applies even when you mouse over the child elements of the li, even if they're positioned so that they look like they're outside of the li's box.
For me it worked like this, without the >:
#navigation li:hover a {
background-color:#012A5E;
color:#F1F1F1;
}
You're currently setting the hover state on the A tag, you need to (also) set it on the LI tag. When you are over a child UL, you are no longer over the A, but you are still over the LI. Try this:
#nav li hover {
background-color:#F4F4F4;
color:#543056;