I am trying to find a way so when a user hovers over an li element it changes the background color of the <li> taking up the whole width of the dropdown and not just the <a> area. This is what I tried so far.
Markup
<ul class="dropdown">
<li>Visit the castle</li>
<li>Dancing Building</li>
<li>Nightlife</li>
<li>Museums</li>
</ul>
CSS
.dropdown{display:block; position:absolute; background-color:black; margin-left:65px; height:190px;}
.dropdown li:hover{background-color:#333; padding:0px;}
.dropdown li a{display:block;}
Adding display:block; to your ".dropdown li" may be a solution, but it is dependent on your particular case....
Do you have a live demo somewhere?
Related
http://jsfiddle.net/5DZSy/
I have the main menu links colored and fading the way I want, but the child menu links.. I am trying to make those Black and fade to a different color.. Im a complete newb with css.. and cant figure it out. Ive tried adding and changing classes, and gotten myself lost..
How could I change it so the main links stay like they are, but the child menus have a different color scheme?
The link above to jsfiddle has the html and css..
I appreciate any help and input! I know this is probably simple and something im overlooking, but thats why im here!
<ul id="menu">
<li>
Home
<li>
<hr class="menuhr">
<li>
Link #1
<ul>
<li>
Child A
</li>
<li>
Child B
</li>
</ul>
</ul>
css is on the jsfiddle link.. couldnt get it to paste and display right here, sorry!
Please add following styles at bottom:
ul#menu li > ul li a {
color: #000; /*your submenu link color*/
}
ul#menu li > ul li a:hover {
color: #555; /*your submenu link hover color*/
}
Look at here fiddle
Is this what you are looking for
http://jsfiddle.net/cancerian73/5DZSy/1/
#menu li ul li a{color:green}
I have read a few solutions for this issue, but none of the answers help with my particular problem. I have a menu with a dropdown here on a site I'm developing in the What's On section.
http://www.staging.alexanderdzine.com.au/golden-sands-tavern-V2/
I want the arrow bg to stay active when I hover onto the dropdown li but can't figure it out.
HTML
<div class="Weekday">
<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Monday</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul>
<li><img src="../images/backgrounds/test.jpg" width="230" height="280" alt="" title="" /></li>
</ul>
</dd>
</dl>
</div> <!-- end Weekday div -->
CSS
.dropdown {float:left;}
.dropdown dt{width:114px;padding:0;font-weight:bold;cursor:pointer;line-height:50px;text-align:center;color:#193540;font-size:14px;letter-spacing:1px;text-transform:uppercase;}
.dropdown dt:hover {background:url(../images/backgrounds/bkg_nav-dropdown.png) center no-repeat;}
.dropdown dd {position:relative;left:-135px;overflow:hidden;width:250px;display:none;z-index:200;opacity:0;right:0;}
.dropdown ul {width:250px;list-style:none;}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited{display:block;background:#6ab7d3;width:250px !important;height:300px !important;}
.dropdown img{background:#6ab7d3;padding:10px;}
this might be impossible to achieve in CSS, most people use jQuery for this type of things, but maybe you could try adding hover functionality to .Weekday, as its hover state will persist while you're hovering over submenus..
In case you'd like to achieve your desired functionality with jQuery, I suggest you read answers to this post: change background of parent div on hover
Also, this page uses the first method I mentioned - without any jQuery.
I'm having a little trouble figuring out which selector or selector hierarchy I should use with my CSS to get a 'sub menu' to display.
I want to have the sub-menu appear based on the hovering of a:link within a completely separate <nav> within a <ul>.
I'm just not sure how to write the CSS in order to obtain that effect
HTML
<div class="row">
<nav id="nav" class="nav-holder">
<ul id="nav" class="menu">
<li>Links!</li>
<li>Links!</li>
<li>Links!</li>
<li>Links!</li>
<li>Links!</li>
<li>Links!</li>
</ul>
</nav>
</div>
<div class="cleared"></div>
<div class="row">
<div class="submenunav"></div>
</div>
The wrong CSS
.submenunav { display:none;}
#nav ul#nav li a:hover .submenunav {
position:absolute;
z-index:500;
display:block;
margin:0px;
padding:0px;
width:940px;
height:200px;
background:#E9EAEE;
border-bottom:9px #67B7E1 solid;
box-shadow:0 8px 6px -6px black;
}
My fiddle - http://jsfiddle.net/NVwks/
The desired effect would be for the submenu block to appear based on hovering over any links, although eventually I will be giving the a:links unique classes for unique submenus.
Many thanks SO.
The problem here is that your a:link elements are contained within your nav element, which as you say is completely separate from the sub-menu elements you want to display. This separation in your structure makes it impossible to achieve with :hover and other CSS selectors alone.
There doesn't seem to be much room for restructuring your markup, so you may have to use a script to achieve your desired functionality.
This question already has answers here:
Closed 11 years ago.
Possible Duplicates:
Style parent li on child li:hover.
Is there a CSS parent selector?
I have a nave menu.
On li a:hover the #drop-down-menu appears.
Can I apply a style to the li a while hovering over the drop down menu?
Can you apply a style to the parent element while hovering over the child element?
i.e. I want a border-bottom:2px solid #ffffff; to appear under the li a, while i am hovering over the #drop-down-menu.
Can't figure it out.
If your anchor is - or can be - fullsize (i.e. the size of the list item), then you can use:
li:hover
You would need to use javascript for this. CSS doesn't allow any way to select a parent element.
No. CSS doesn't work that way. You can only go down.
However, if you have your HTML structured properly, you can achieve the effect you're going for.
Assuming the following HTML:
<ul id="main">
<li>A dropdown
<ul class="dropdown">
<li>A submenu</li>
</ul>
</li>
</ul>
You can have the following CSS, and it should work:
#main li:hover a {
border-bottom: 1px solid black;
}
Here's a (very) rough Fiddle.
Considering this code:
<div class="menu">
<ul>
<li class="active">I'm active!</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
My .menu div has a 1px black border, and my .active list element has a white background. Now, I want my .active list element to be "outside" of the div, and overlap with the border, hiding it partially with the white background. How is this achievable?
To illustrate what I want;
This is what I have at the moment, coded up;
http://i.stack.imgur.com/cVZHt.png
And this is what it should look like;
http://i.stack.imgur.com/gp2k2.png
Use relative positioning.
.menu li {
position: relative;
top: 1px;
}
Couple of things to note to make sure that this works:
The fact that this is on all li elements is intentional. If I only put it on the selected one then the selected one would appear shifted down.
This will only work if the blue background is a part of the ul tag and the li tag has a transparent background (other than the image of course). Otherwise you might cover up all of the border from the ul element.
And one more thing (just 'cause). You have this:
<div class="menu">
<ul>
...
</ul>
</div>
The ul tag is perfectly capable of having a class by itself. Unless you have a very good reason not to, just do this:
<ul class="menu">
...
</ul>
Some CSS black magic for you.
Working example below which should work cross browser. Please ask if you would like an explanation how it works.
JSFiddle
Enjoy.
Is it the z-index you're looking for?
div.menu li.active { z-index: 99; ... }
then you could use negative margins to position it "outside", or better yet nest another element that you can position relatively.