On this page, when the view port is around 680 pixels wide in Mozilla Firefox responsive design view, the top navigation menu collapses into a 'burger'.
When you open the menu, the menu's background is transparent, meaning you see the page content underneath the LI elements.
I added CSS: .menu, #menu-primary-menu, #mainnav .menu > ul > li {background-color: #FFF;}, and the CSS is recognized, and loaded, but still, I can see through the LI, UL.menu to the content underneath.
I'm not sure what code to include in my question; it is a complicated set up, and I can't see in Firebug what is causing the transparency of the LI, UL.menu elements. I hope you can use the live test page to help diagnose the issue.
Just add z-index: 9; to the li.
#mainnav .menu > ul > li {
background-color: #fff;
z-index: 9;
}
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
Related
I created a CSS menu w/ submenus, using pixel values for dimensions. Now, that I see how stupid of an idea that was, I tried to convert all pixel values into percentages using the formular (size / context) * 100 to make the menu responsive.
The original version looked like this:
After converting everything into percentage values I end up with this:
http://jsfiddle.net/5CK9n/
The main reason is that I am still using px to specefy the height of nav ul li. Whenever I try to specify that height in percent, top menu points (nav ul li) don't change their size at all, and when hovering over one of them to bring out the submenu (nav ul li ul), the top menu point grows in height all over the place.
Could anyone tell me what might be causing this behavior?
First of all, the css that makes that happen is:
nav > ul > li.hasSubMenu:hover + li {
/* this-> */ margin-left: 25%;
}
And this:
nav ul li:hover > ul {
display: block;
position: relative;
/* and this below */
top: -100%;
left: 100%;
}
Remove the top, left and margin-left values. See: jsFiddle.
Second of all, use media-queries to make your navigation responsive. Using just percentages is not effective.
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'm trying to edit the default menu for Wordpress TwentyTwelve theme. So far I have made the sub-menus horizontal but they don't align the same in Firefox than Chrome.
In Ff it looks as I want, but in Chrome, the sub menu align with the Menu item previously clicked, NOT to the far left of the main menu.
basically, I want a horizontal two-lines menu. I can' t get the "position:"" properly.
Here's how it looks in both browsers:
Here's how it looks in both browser:
Chrome:
http://imageshack.us/photo/my-images/248/cssmenuchrome.jpg/
I can't post more links because I need 10 reputation but the second image (menu in Firefox) in there too.
And here's a fiddle of my code so far:
http://jsfiddle.net/ZN9my/
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation .menu-item li {
display: none;
margin-right: 14px !important;
}
Your problem, as you say, is that both browsers seem to be dealing with your position:absolute; differently. position:absolute should be calculated in regards to the most recent parent element with an explicitly set position, which means that it's actually Chrome which is interpreting it right.
In this case, you've given .main-navigation li a position:relative, which means that Chrome is positioning the submenu, li.sub-menu, relative to it. If you remove position-relative from the CSS for .main-navigation li and add it to ul#menu-main, then li.sub-menu will be positioned relative to the main navigation ul, and should behave as you want it to across browsers. You'll probably want to change .main-navigation li ul's top from 100% to something like 37px so it still sits in the right place.
I've made the changes to your jsfiddle as well: http://jsfiddle.net/ZN9my/1/.
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.)