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.
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 want to make my top level navigation stay on the hover state while I'm hovering on the submenu items. I read that I should apply the hover effect to the li, but there are some transitions that are confusing the situation for me. I can't figure it out. Can someone tell me where I need to adjust this?
my jsfiddle
You're going to want to apply the :hover effect to the li and apply the CSS to the direct a child. Applying the hover to the a won't work because the submenus of the top-level links aren't in the a element.
ul#navigation .topNav:hover > a {
color:#acb453;
padding-top:0;
padding-bottom:10px;
border-bottom: 6px solid #4dbaf2;
}
http://jsfiddle.net/zwVwh/12/
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.)
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;
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.