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.
Related
I have removed margin and padding from ui element. But it creates problem for me as li's bullets are shifted further to the left from where ui starts. How can I overcome this problem?
Like so...
ul{
margin-top:0;
margin-bottom:0;
padding-left:0;
list-style-position:inside
}
<ul>
<li>Hi</li>
<li>I'm</li>
<li>an</li>
<li>unordered</li>
<li>list</li>
</ul>
by Default list-style-position is outside, list-style-property decides that the list-item markers should appear inside or outside the content flow.
set it to inside
list-style-position: inside;
Reference
I have a dropdown link on a horizontal navigation bar as follows:
<ul>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
The first ul is positioned relatively, and the second ul is positioned absolutely. The second ul has a class, through which I have set a percentage width (about 200% to 250%, I don't remember). However, the li elements within have a rollover background that is as large as the padding set on. What I'm trying to do is to get the padding to span the entire width of the ul, so that when the user rolls over the link, the entire row gets highlighted.
I don't have any example code at this time. Perhaps in several hours I'll edit it in. Hopefully the above is enough to get some ideas rolling.
Following your example and the text you provided I constructed this: fiddle.
Is this close to what you are after? As you can see, the yellow in the second li highlights the full length:
so that when the user rolls over the link, the entire row gets highlighted.
If not perhaps you could fill in the details in the jsfiddle and update it to help us out.
Here is the code. The main trick is to set the display to block on hover:
HTML:
<ul id='firstUl'>
<li>1</li>
<li>2</li>
<li>3
<ul id='secondUl'>
<li><a>3</a></li>
<li><a>4</a></li>
<li><a>5</a></li>
</ul>
</li>
</ul>
css:
#firstUl
{
background-color:green;
position:relative;
}
#secondUl
{
width:200%;
background-color:blue;
position:absolute;
}
.li
{
background-color:red;
}
#secondUl li
{
width:100%
}
#secondUl li:hover a
{
background-color:yellow;
display:block;
}
I have a nested UL structure that represents a folder tree which can grow very deep. I'm stuck at doing a simple :hover effect for the LI elements. The problem is that doing a li:hover won't work as it affects all the parent "li's" aswell. Usually I would have tried to apply the hover effect to a link element or something in the LI, to avoid parents taking the style aswell, but due to circumstances that's not an option now. I have a working solution by using javascript to place a class on the hovered LI and then style this class instead, but i'm really interested in seeing if there's actually a way of accomplishing this through pure css.
I imagine there may be a way of doing a very "hardcoded" css solution but i am more interested in a dynamic and clean one, since the structure can nest indefinitely.
Maybe there's some pseudo selector i'm not aware of? Note that it doesn't have to be IE<8 compatible
<ul>
<li>
This LI should not recieve the hover effect
<ul>
<li>
A li:hover will place the effect on this LI,
but also the parent LI, since that element is
also techincally being hovered.
</li>
</ul>
</li>
</ul>
If you want to use pure CSS then you will need to us parent, child, elements.
For the hover elements:
ul li:hover{
"Style"
}
For the other elements:
ul li ul li{
"Style"
}
UPDATE: I just reread your question, in which you state:
"Usually I would have tried to apply the hover effect to a link
element or something in the LI, to avoid parents taking the style as
well, but due to circumstances that's not an option now."
If that is true, then the solution below is not viable for your circumstance, and you cannot achieve what you desire with pure CSS. I've left my answer, however, as others who want to achieve this but can use a nested element may find it useful.
Pure CSS Only by Adding HTML
The only way you can possibly achieve something of what you seek by pure CSS is to add an extra element (like a span) within the li and perform the hover on that. I assume that whatever folder is being hovered, that folder alone is what you want to highlight. If so, this fiddle illustrates what I am saying, using this code:
HTML
<ul>
<li>
<span>Folder 1</span>
<ul>
<li>
<span>Folder 1.1</span>
<ul>
<li>
<span>Folder 1.1.1</span>
<ul>
<li>
<span>Folder 1.1.1.1</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
li span:hover {
color: red;
background-color: yellow;
}
Now, if you want child folders to also highlight on hover of a parent folder, then perhaps this fiddle illustrates what you want with this code change:
CSS
li span:hover,
li span:hover + ul span {
color: red;
background-color: yellow;
}
They key point is to utilize the extra element to control the hover, whether of the item itself or any later generation elements that the hover should affect.
Not clear at all... but if you want to style nested LI when you are hovered the parent LI without styling the parent one...
Try this:
CSS
ul li ul li {
color: blue
}
ul li:hover ul li {
color: red
}
fiddle example: http://jsfiddle.net/EHp3n/
Your question is not very clear and also it will confuse. Let me explain, when the user hover the city (India / China / UK), style should be applied to State and Country through CSS.
<ul>
<li>India (Apply Style)
<ul>
<li>India State (Apply Style)
<ul>
<li>India City (On Hover)</li>
</ul>
</li>
</ul>
</li>
<li>China
<ul>
<li>China State
<ul>
<li>China City</li>
</ul>
</li>
</ul>
</li>
<li>United Kingdom
<ul>
<li>UK State
<ul>
<li>UK City</li>
</ul>
</li>
</ul>
</li>
</ul>
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?
I'm trying to create a simple image navigation for my site, using CSS to declare the background-image property of a list-item (li). The problem is, when I use text-indent to put the image off-screen, the link is no longer there (off screen as well I presume). Any help would be greatly appreciated. Here is my XHTML:
<div id="nav">
<ul>
<li class="current about">
about
</li>
<li class="contact">
contact
</li>
<li class="networks">
networks
</li>
</ul>
</div>
Here is my CSS:
#nav li {
display: block;
float:left;
background-image: url("images/nav-normal.png");
height:47px;
text-indent: -9999px;
}
I have also set up background-positions for the individual list-items because I'm using image sprites. Thanks in advance!
Apply that style to the #nav li a. Otherwise everything inside the li, including the link, is shifted off screen.