Jump to content
Please Use CODE Tags

Newbie in CSS Needs Help!

Peeeeeeeeeeynk
By Peeeeeeeeeeynk
in Programming
 Share
Posted

So I want to use the pseudo class :hover in my anchor tags but it seems not to be working. I'm using the BRACKETS as a text editor and tried opening it in notepad++ if that helps anything. 

------------------------------HTML------------------------------------

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="menu">
<ul>
<a href="#"><li>Home</li></a>
<a href="#"><li>About</li></a>
<a href="#"><li>Contact</li></a>
<a href="#"><li>Coming Soon</li></a>
</ul>
</div>
</body>
</html>
--------------------------------------------------------------------------
-------------------------------CSS-------------------------------------
.menu ul li
{
list-style: none;
display: inline-block;
}
 
.menu
{
padding-top: 20xp;
height: 30px;
width:100%;
margin-top:30px;
}
 
a
{
text-decoration: none;
border: 2px solid white;
padding: 10px;
color: white;
margin-left: 15px;
}
 
.menu ul li a:hover
{
color:orange;
}
------------------------------------------------------------------------

 

Link to comment
https://linustechtips.com/topic/181143-newbie-in-css-needs-help/
Share on other sites
Link to post
Share on other sites
Posted

use the code tag, please

 

this selector

.menu ul li a:hover

means "the hover of anchors inside LI inside UL inside an element of class menu"

the problem is that

<a href="#"><li>Contact</li></a>

the LI is inside the anchor, and not vice versa (as it should be)

you just need to swap them

Link to comment
https://linustechtips.com/topic/181143-newbie-in-css-needs-help/#findComment-2432614
Share on other sites
Link to post
Share on other sites
Posted
  • Author

use the code tag, please

 

this selector

.menu ul li a:hover

means "the hover of anchors inside LI inside UL inside an element of class menu"

the problem is that

<a href="#"><li>Contact</li></a>

the LI is inside the anchor, and not vice versa (as it should be)

you just need to swap them

THANK YOU SOOOOOOOOO MUCH!! Spent so much time figuring out whats the problem>.> 

Link to comment
https://linustechtips.com/topic/181143-newbie-in-css-needs-help/#findComment-2432697
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×