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.
Related
How do I keep the text in the parent button in the main menu indented when I hover over child menu options?
Here is my work in progress: http://sr.hi-speedinter.net/
The rollover state for the top level button in the main menu has a blue tab behind the button which requires some padding to be added when hovered over. In the off state, the menu wording has to vertically line up with content below it. In other words, the first child (labelled 'Staging') has to move horizontally depending on the state.
I have managed to keep the blue tabs applies when hovering over a child, but I just can't seem to affect the word in the first-child only.
I would have thought
.primary-navigation li:first-child:focus:active > a
would be correct, but it doesn't do what I expect.
I've done quite a bit of research and several times thought I had the answer..but no joy. Can someone tell me how to do this?
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.
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.
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.