What in my CSS is covering up the sub-menus for my drop down menu? Here is my template. Hovering over "Bar" is supposed to produce a sub-menu.
http://dl.dropbox.com/u/1531353/Misc/menuBarCovered/index.html
I tried altering the z-index of the submenus to no avail.
No need to use overflow:hidden on every element.
If you remove this property from the header css declaration you'll be able to see the submenu on hover.
By using overflow:hidden, you are clipping and making invisible anything that falls below the boundaries of your element.
agreeing with #Pablo - quick fix - remove overflow:hidden from header.
Related
I have a CSS menu here
http://www.salvationarmyqc.org/
When I hover the mouse over the menu, it shifts but only the first time a hover event occurs.
After that, it doesn't move.
I can't figure out why this is happening.
Are you able to post your css?
By the looks of it, you are setting a border width on hover which pushes the menu item down. You might try using absolute positioning, and adjusting the top height by -1 or a similar value.
for example your css might look something like.
#listContainer{position:relative;}
.listItem{position:absolute;top:0;}
.listItem:hover{top:-1;}
Im not sure why the entire navigation menu moves down in chrome without seeing your css.
your #navigation is jumping from a height of 34 to 36px. you could statically set it to 34pixels or put padding and margin to 0 for all of the li's.
On a website I am creating I have a navigational bar across the top of the page which I want to expand/animate vertically when hovered on. I am also using the :after pseudo element to create a ribbon effect. The problem is that I can't seem to make the "Ribbon part" move down when the menu item is hovered over. I have played about with it for a while now and I know it's something simple but I just can't figure it out.
I have the code on pastebin here: http://pastebin.com/FTf4pBEi
I increased the hover height and the ribbon seems to work. I'm not sure exactly what you're after since there are no submenu items.
http://jsfiddle.net/Kts5y/3/
.menu_item:hover {
height:150px;
}
I'm experimenting with jquery.scrolling-parallax.js for parallax backgrounds.
The background elements has z-index 333.
On all elements on the site i can make the backround be behind or in front of the elements by using z-indexes below or over this.
But i have problems with my header.
I have a header with fixed position and z-index 232 to have the backgrounds be seen over it.
However, in the header div i have two other divs containing logo and menu. These are position:relative and have z-index:999 since i dont want the background to be on top of them. But this does not work!
If i switch the whole header div to z-index over 333 it works fine, the background appears behind it. But i only want it to go behind those child divs!
Appreciate your help
If I understand your problem correctly, I think the problem is that your logo and menu should not be using position:relative. Try either using a different type of positioning or placing their div outside of the header div.
By using relative the child is probably taking the header divs z-index.
I have created a Css drop down menu but when i hover over a link i can still see the content beneath.
http://ljessett.hndcomputing.net/lewis/
I have tried editing the z-index but that hasnt work any ideas?
z-index will work but it only works on positioned elements. So you need to position your dropdown menus either by declaring the position property to be either absolute, fixed or relative. In this case I'd suggest going for relative.
Further reading on z-index: http://www.w3schools.com/css/pr_pos_z-index.asp
I have implemented a YUI split button with a menu. The button with menu appears in a scrolling div between header and a footer divs. When exposing the menu near the footer div, the menu appears behind the div.
I have tried positioning the footer div with a z-index of -1. I have tried positioning the div (within the scrolling div) containing the button with menu using a z-index of 500. The menu always appears behind the footer div.
I am not using a YUI layout. Yet. If I did would it help?>
In addition to setting the z-index property, you also have to change the position property. The easiest thing to change it to is position:relative.
Try setting both of those properties.
I don't think YUI layout will assist you in this particular problem.
I started using YUI layout and my issues no longer exist.