Hi, Im making a navigation using <ul> lists, and then adding some styling to it using css.
The problem is that the <li> contains a link tag <a href=""></a> that makes the background dark, and the color white.
Now the problem is that the <li> element is the one that changes the background color, while the <a> element changes the color. But the <li> element is much bigger, so the background color changes to dark, and then the text changes to white, only when you hover it...
Here is the code:
HTML
CSS:
So I'm guessing there is something I could do in the CSS, but I'm not able to find out what is it
Thanks in advance!
The problem is that the <li> contains a link tag <a href=""></a> that makes the background dark, and the color white.
Now the problem is that the <li> element is the one that changes the background color, while the <a> element changes the color. But the <li> element is much bigger, so the background color changes to dark, and then the text changes to white, only when you hover it...
Here is the code:
HTML
| Code: |
| <div id="col_left">
<ul id="btns"> <a href="#"><li>btn 1</li></a> <a href="#"><li>btn 2</li></a> <a href="#"><li>btn 3</li></a> <a href="#"><li>btn 4</li></a> </ul> </div> |
CSS:
| Code: |
| #col_left {
background-color:#FFFFFF; width: 200px; } #col_left ul { list-style-type: none; margin: 0; padding: 0; border: none } #col_left li { margin: 0; color:#3b5998; padding: 0.25em 0.5em 0.25em 1em; border-top: 1px solid #E8EFF4; width: 100%; display: block; } #col_left li:hover{ background-color:#3B5998; color:#FFFFFF; } html>body #col_left li { width: auto; } #col_left li:first-child { border: none; } #col_left a:link{ text-decoration:none; } #col_left a:active{ text-decoration:none; } #col_left a:visited{ text-decoration:none; } #col_left a:hover{ text-decoration:underline; } |
So I'm guessing there is something I could do in the CSS, but I'm not able to find out what is it
Thanks in advance!
