http://jsfiddle.net/kvKfr/
Shows the menu as I've got it working. Does anyone know how to keep the LI element in the parent UL from expanding? I want the sub menu to show to the right (as it is) with out causing the parent LI to change sizes. Is this possible?
The basic idea on these is to make the position absolute:
http://jsfiddle.net/kvKfr/1/
Set
ul.myMenu li > ul
to be
position:absolute
Demo at http://jsfiddle.net/gaby/kvKfr/2/
Related
So I'm making a minor button and navigation kit in terms of learning more HTML and CSS responsiveness. Navigation is my weak point and I've come to my first problem that I can't get my head around.
https://jsfiddle.net/ku0wezws/3
If you scroll to the bottom of the CSS, you'll find the subnav implementation and what I'm trying to achieve is to align all the content in the center when you hover over About. You'll notice that it has just aligned one after the other side by side. My aim is to center all of that normally, going all the way down. Like this: http://www.w3schools.com/howto/howto_js_dropdown.asp
Am I being really stupid? I think I am. What should I adjust in the CSS to make this happen?
Thank you.
Edit:
Edited the JSFiddle
Add this to prevent the li items of that submenu to float next to each other:
.jkit-subnav li {
float:none;
}
https://jsfiddle.net/yhkuv138/
Just clear the float from .jkit-nav-inverse ul li ul li.
Add below code to the end of your CSS.
.jkit-nav-inverse ul li ul li{
clear: both;
}
Updated fiddle
I came across this site http://northerly.com.au/ and I am wondering how it is possible to make an top menu li active while hovering over it's submenu. In this case it seems like there is no js script to add active class. How it is done then? Thank you
In fact, that's not the top menu li which is active when you're hovering on the sub menu. There is a sibling SPAN before submenu element, as a result of hovering to sub menu, you are also hovering the container li element.
top li has two elements:
a SPAN has top menu title
a Sub Menu
Use a CSS selector like this:
li:hover span {/*span is active!*/ }
See a simple demo here.
I have an annoying problem, my li's dont want to display side by side with a padding of 10px between them.
when i add a submenu with a submenu the li's dont want to inline-block. Here is an example:
http://jsfiddle.net/3EQPU/3/
Hover on diving and the 2 sub menu items are NOT inline-block..
Why is this? Can you help?
remove
clear:both;
in
#new-menu-lower ul li ul li
I have a drop down menu in only CSS and no JAVASCRIPT and I'm having a problem keeping the top (main menu item) highlighted when I move the cursor over the sub menu items. You can see the menu here http://www.codedecks.com/cssnav.html.
If you hover over "Kids" and move your cursor down, as soon as your over "Girls" the top "Kids" looses the highlight.
Any suggestion would be greatly appreciated! Thanks in advance
Change #nav > li a:hover to #nav > li:hover a in your CSS.
Since you have the hidden second-level ul being shown when the top-level li is hovered, it makes sense to have the top-level a get the hover style at the same time. When you move your mouse over the second-level menu links, the a still looks active. li:hover applies even when you mouse over the child elements of the li, even if they're positioned so that they look like they're outside of the li's box.
For me it worked like this, without the >:
#navigation li:hover a {
background-color:#012A5E;
color:#F1F1F1;
}
You're currently setting the hover state on the A tag, you need to (also) set it on the LI tag. When you are over a child UL, you are no longer over the A, but you are still over the LI. Try this:
#nav li hover {
background-color:#F4F4F4;
color:#543056;
Someone told me once they it is possible to create menu's via CSS only, how can you?
It's done through the selector. You use a pseudo class to specify a particular element to only be displayed when its parent element is being hovered over.
#nav li:hover > ul {
display: block;
}
This will only get the ul to display if its parent element, #nav is being hovered over. The ul now is the drop down menu into which you can place more list items. This will work with however many levels you want your drop down menu to have.
This technique is showcased very nicely in this tutorial: CSS3 Dropdown Menu
I was typing up an answer, but this simple, short page goes over it better than I could say. Basically you do display: hidden on the expanded part, and then add a display: block to the trigger element on its hover state.