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.
Related
So I'm struggling with z-index and position relative/absolute on a website I'm working on.
The issue can be seen when hovering the plus button (on the right) on this link http://bitgamers.co.uk/thebox_test/media/movie/132/fury
If you scroll down to make the popover appear at the bottom, it shows without a problem but if it appears at the top, it is hidden under the banner (which is a background image).
I've done a bit of research and think I figured that it is because those two elements are in different stacking contexts (banner and poster in the header and the tip in a container below that), what can I do to make the tip appear on top?
I've tried giving it all type of z-index and it does't make a difference. I've put a 5 seconds delay before the qtip closes so you can look at the code.
Thanks!
.media_head_holder {position:relative;z-index:100} <-- banner
.media_avatar_holder {position:absolute} <-- poster inside banner
//below
.popover {position:absolute} <--triggered from navbar
I am not sure about that... But i think it's because the z-index of banner is highter than the popover...
I know, you will say that popover has z-index = 9999 and the banner has z-index = 100.. But here we have a trap...
Tha nav you are using (.subnavbarz)(popover's parent) has z-index 50, so all his children will have z-index = 50 (less than 100 of the banner)...
When you say that the popover has z-index = 9999, you are saying that it will have this z-index relative all of the nav.subnavbarz children.. But not more than the z-index 50 of his parent..
I don't know if i am cleary (my english is terrible)
I have an image inside the .nav container with background-positioning property set to right that is set under the hover selector to display. It's working almost perfect except I want to move the image over to the left a bit closer to the actual navigation link. When I try to use inset border thickness or absolute positioning it it either moves the text for the nav link as well (inset border thickness) or its get really messed up when I use absolute positioning for background-position. Any way to move the image without it affecting any things else around it? New to HTML5 and I am using dreamweaver CC and am unfortunately away from my comp at the moment.
Try setting the left property of the background image. In my experience, if you mess with the container then it will mess with everything else. Also, you might have to tinker with the actual image to get it look right.
I have a div (it's a popup for an openlayers map, but it could pretty much be any fixed size div), that contains a jquery ui menu (which is wrapped in a ul). The menu doesn't fit inside the div very well, so I'd like to make the menu float above it so that as the menu grows I don't have to grow the size of the containing div. Is this possible?
The containing div is itself positioned absolutely, I've tried setting the ul that represents the menu to position:absolute;z-index:100 but that doesn't work. I've also tried setting overflow:visible with no joy.
This screenshot shows the issue I have:
I've added a jsfiddle that opens a popup when you click the small orange circle, and you can see that the menu inside there is bigger than the containing div.
If you tell me that my answer is not what you mean I will delete it cause I am not sure what you really need to do. You want this scrolls to disappear and if the text is bigger than the popup just to float over no matter it is going outline ?
If this is what you want you have to remove the overflow: auto from .olFramedCloudPopupContent and again to remove overflow: auto from inline style of the element #chicken_contentDiv (I am not sure that you add it with jQuery).
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;
}
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.