[Solved] I'm going nuts with li ul css !!!!!!

[jtorral]

Ok. I have tried everything i can think of and am not getting what I want

I have the following

<ul class='noindent'>
   <li>line 1</li>
   <li>line 2</li>
   <a href='something'><li>line 3</li></a>
</ul>

If I use the following css:

.noindent li:hover { background:#DDD; }

It sets the background color just as I would expect if I hover over the li. It fills the entire li element top, botom,left,right and all empty space with the background color defined. Wonderful! Love it!

However, I only want to change the background color on an ii element that has a link. So I add this line to css:

.noindent li:hover a { background:#DDDDDD; } and nothing happens!

However, if I change

<a href='something'><li>line 3</li></a>

to

<li><a href='something'>line 3</a></li>

It partially works. But instead of changing color for the entire li element including the space to the right of the words “Line 3” , it only changes the background around the text. And I want the entire area changed to the defined color like in the regular li:hover

Any suggestions would be appreciated.

Thanks!

[shaneisme]

First, you don’t want to structure it how you have it in your original example, but instead to this:

<li><a href='something'>line 3</a></li>

Only an <li> tag should be inside a <ul>.

But it’s working for me…

http://codepen.io/drainpip/pen/Kjnvx

Edit – updated pen example.

[jtorral]

Thank you for the suggestion. But I have done it that way and that is not the result I am looking for.

In your example every li element gets changed to red when hovered upon. I only want to change the li element that has the link in it. Like line 3.

JT

[shaneisme]

OH – sorry, I updated my Codepen.

[jtorral]

Thanks man! That worked. Now I just need to figure out padding around it so it does not change size when I hover. You rock !

have a look here and hover over the link that says Private message. you will see what I mean.

http://www.camerapeddler.com/userprofile.php?userid=1

the rest of my CSS looks like this

`
.noindent {
margin:0;
padding:0;
}

.noindent li {
font-size:14px;
padding-top:4px;
padding-bottom:4px;
padding-left:2px;
padding-right:2px;
margin:0px;
margin-top:3px;
margin-right:2px;
border-bottom:dotted 1px #E1E1E1;
}

`

[shaneisme]

Yeah, any margin or padding you’ll want to make its default, not on hover. So basically think of the <a> having a white (or transparent) background color by default. The hover, you only want to change the one thing that matters.

You should dig into Chrome Dev tools (Firefox has its equivalent), it has a way to see what’s happening on hover (http://stackoverflow.com/questions/4515124/see-hover-state-in-chrome-developer-tools).

[Author]

Posts