I have a drop down menu created with CSS. The menu is in Dropdown Menu. The problem is that when I try to access the child element , they are not coming properly. I have given some margin between the parent and the child elements,and when the mouse cursor points to that gap, the drop down menu hides. Is there any way I can maintain a margin and still able to see the child list,like in jquery.
As Morpheus suggested, set the padding on the container div. To get the margin effect, move the background style to the child div.
Related
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).
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.
Hey I wanna do a pure CSS3 dropdown navigation. If you hover the first item it changes the background and opens the dropdown child element. This is okay. But if I hover the dropdown element the changed background resets like its not hovered.
How can I change the style of an element forced by the hover of an other element?
If you really want to stick to pure CSS3 you could put both objects into a container and define the color in this container. Overwrite it in the dropdown child if necessary.
here's a quick CSS only dropdown. the trick to preserve the background is to set the hover style to the main menu item, and not to the submenu item. events like hover, like JS, bubble up. hovering a child will also mean hovering the parent.
I have my menu working the way I want with the exception that menu elements are displayed from the top down as supposed to bottom up. I tried changing the CSS properties, but still can't get it working. I need my DIV container to be align on the bottom of the parent container. I used 'bottom: 0' CSS property but that doesn't have any affect using both 'position: absolute' and 'position: relative'.
How can I align all the elements within the parent DIV be displayed at bottom: 0 (bottom up)?
Then click on the Projects bottom link (refresh if you need to reset the menu items). I need that same behaviour I already have, just the menu items should start from the bottom up and be aligned all the way to the bottom.
Any suggestions?
Thanks,
Partizan
The best way to accomplish this is to either put the divs inside the sought after parent element. Ergo the <li> you want to associate these links with. Give the parent <li> a style of position:relative. The on hover set the position of the child div or li to abosulte and left:0;top:0;. Then from there you can style it closer or farther with margin.
Try using padding-top to push them down with an id or class on each sub menu.
Then if that fails, try using min-height: auto; on each parent.
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.