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.
Related
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 usually dont have problems with css, and I'm made this nav menu myself but I just can't seem to understand why it will not show my div when I hover over an item ... I create a jsfiddle # http://jsfiddle.net/LuLTM/ with all the code as well ...
#beautyworld #beautyhealth {display:none;}
#beautyworld #beautyhealth:hover {color:black;display:block!important}
I want when hover over div #beautyworld for the div #beautyhealth to appear ... I just dont understand why my css is not working .... Could someone please advise ? Thank You
I think the problem is that you are trying to have fire a hover over something that is currently 'display:none'. Since display none collapses the element, there is nothing to hover. You heed to have it hover at a relative parent level to cause the display of the child.
For example:
#beautyworld > div { display:none; }
#beautyworld:hover > div { color:black; display: block !important; }
Here I've got a jquery menu which is working perfectly. But Ive given it a fixed width of 400px and so what happens is that if I add more than certain number of links to the main ul they will flow in the next line and that is absolutely not desired.
I tried overflow:hidden and line-height to somehow overcome the issue BUT NO RESULT anyway.
Here is the menu : http://jsfiddle.net/b5Wdc/
As you see there, the red color link flows on the next line and that is the problem.
What do should I write to hide the overflown links in this situation?
Thank you all anyway.
From our conversation in the comments on the question, it seems that your menu is completely fixed and any "extra" items should always be hidden and there is no dynamic display or wrapping required. So you can just use CSS to hide all menu items that you know won't fit in. Since a menu item has a width of 99px and the menu is 400px you know you will only ever show 4 items. This purely CSS will hide the rest:
.HeadMenu #nav > li:nth-child(n+5) {
display:none;
}
However it requires a minimum of IE8 for the nth-child CSS selector support.
Since you mentioned jQuery in the question you could accomplish the same in JavaScript if you need to support IE8 with:
$('.HeadMenu #nav > li:nth-child(n+5)').hide()
Alternatively, keep the CSS solution (as it's cleaner) and use selectivizr to bring nth-child selector support to IE8.
if you change your styles to the following i think it may work:
.HeadMenu .HeadMenuMain
{
display:block;
position:relative;
margin:0;
width:400px;
padding:0;
direction:rtl;
height:40px;
white-space:nowrap; //will make elements stay on one row
}
.HeadMenu .HeadMenuMain li
{
display:inline-block; //will make elements stay on one row with the nowrap
list-style:none;
position:relative;
}
http://jsfiddle.net/b5Wdc/2
Adding an overflow:hidden to the navigation menu will do the trick:
.HeadMenu #nav {
overflow: hidden;
}
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.