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.
Related
I've implemented a simple CSS dropdown menu that works perfectly in every browser I've tried except for Safari (on Windows). My page can be seen here. Within my primary navigation list items, I have an <li> class called "drop" that is set to position:relative and a div labeled "drop-container" that contains the drop-down menu items and is positioned absolutely with respect to the parent list item. I'm changing visibility on hover-- in this case nav#primary ul li.drop .dropcontainer-- to visible and changing the opacity from 0 to 1 to enable a CSS transition.
I can't figure out for the life of me why this simple menu isn't working in Safari-- any help is greatly appreciated.
Try to operating with display.
nav#primary ul li.drop .dropcontainer {display:none;}
nav#primary ul li.drop:hover .dropcontainer {display:block;}
I have my nav working almost exactly how I want it. The only issue left I can't seem to figure out is this little arrow image I use on a subnav which indicates it contains another level subnav.
ul#css3menu ul span {
background-image: url("images/arrowsub.png");
padding-right: 28px;
}
ul#css3menu ul span:hover {
background-image: url("images/arrowsubhover.png");
padding-right: 28px;
}
When you hover over each subnav with an arrow, it loads a different color arrow image to maintain contrast with the background color that changes on hover.
Problem is when you hover over the next level subnav, the arrow switches back while the background color remains changed (as it should).
Why does the background color of the parent li not lose its hover rules but the arrow does?
you can see the behavior and code with this js fiddle
In your case it is better to assign the hover state on the main container of the list item rather than just target the specific element within your menu list item. In your case change your line 196 on js fiddle to .submenu li:hover span . Even if you move a level deep to access the child menu item, you are by default still hovering over the parent element.
Plus it is good practice not to use IDs when styling. IDs are usually reserved for Javascript.
It looks like the rule that affects the background color on hover is ul#css3menu ul li:hover>a
Since ul#css3menu ul li:hover detects hovering over any li element that is a child of ul#css3menu ul, and the 2nd-level submenu also consists of lis, the hover state for the 1st-level li is maintained when you hover over the 2nd-level li because the original rule is still in effect (since it is active when you hover over any child li, including the 2nd-level lis).
When ul#css3menu ul li:hover is true the CSS style is subsequently applied to the direct child a (rather than applied to the lis) to give you the full rule of ul#css3menu ul li:hover>a. This confused me too for a while because the detection happens separately from the application of the styles. Hope this helps.
I'm making a homepage like this: http://jsbin.com/umaguc/1/ and I'm currently working on the dropdown menu. Now what I want is to make an effect like: http://www.script-tutorials.com/demos/249/index.html; I have a div id="lavalamp" which has width, height and background color (looks like a rectangle); when I hover one of #nav ul li element (like Home, Game Offline, Game Online, Esport, Music ...) i want this #lavalamp div to be moved and changed its width so that it will looks like the effect I mentioned above.
This is the idea for my code:
#nav li:nth-of-type(1):hover ~ #lavalamp {
left: 39px;
}
#nav li:nth-of-type(2):hover ~ #lavalamp {
left:110px;
width:110px;
}
but sadly it's just not work. When I hover over an #nav ul li element, nothing changes ! Hope you guys can have me with this problem .. Thanks a lot !
It looks like you've used a general sibling selector to select #lavalamp, but that element never appears as a sibling of your li element.
Unfortunately, I don't believe CSS has a way for you to climb back up the DOM to get to your #lavalamp from the lis. You could use jQuery, or you could think about ways to restructure your markup that would make the element accessible through pure CSS.
For some reason my list items are not sitting within my UL element which is disturbing the flow of the page, and doesn't look right. I have tried every position element under the sun but nothing works. I wondered is it because I'm styling a different div instead of the UL element?
Please see example here
The red border is suppose to hold the list elements and if one list description becomes longer, then the red background should grow as well.
Thanks
Your LI have float in it so you have to clear his parent which is UL. Write like this:
ul{
overflow:hidden;
}
Check this http://jsfiddle.net/Uc5cr/1/
Try this one
ol, ul
{
overflow:auto;
}
See the updated fiddle: http://jsfiddle.net/Uc5cr/8/
What's happening is that the LI elements are floating, and therefor going over the UL outlines. You'd typically solve this by clearing your LI elements with a element using clear: left; property in CSS, when you want to clear the floating.
But since this is in an un-ordered list, it is probably best to use a CSS hack called "clearfix" on your UL-element to solve this. That way the UL element will follow the LI elements in height.
Example: http://jsfiddle.net/mikaelbr/JkGRj/
Note: There are many versions of the clearfix hack. Do a google search to find some, if you are interessted in seeing how they work.
give overflow:hidden to the div erd background in order to contain the ul element
Check this out http://jsfiddle.net/Uc5cr/7/
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;