Forums

MBM

I want a fixed width background colour when hovering over my links but no matter what I set the width to the hover is relative to the width of the link. I want the width of the hover the same size as the longest link i.e. Fighter Profiles. It's more confusing than it sounds.

http://mbmitservices.co.uk/MMA/index.html

ul {
position:relative;
list-style-type: none;
margin-top:260px;
margin-left:100px;
font-family: 'MMA';
font-size:30px;
}

ul a:hover {
color:#2864c4;
background-color:#000000;
margin-left:-20px;
padding-left:20px;
padding-right:20px;
width:100px;
}

ChrisxClash

The reason your width isn't doing anything is because anchor elements are inline by default. Try giving display: block; to your anchor tag and see if that helps.

jurotek

This should work


ul {
position:relative;
list-style-type: none;
margin-top:260px;
margin-left:100px;
font-family: 'MMA';
font-size:30px;
}
ul a {display:block;width:200px;}

ul a:hover {
color:#2864c4;
background-color:#000000;
margin-left:-20px;
padding-left:20px;
padding-right:20px;
}

MBM

Perfect! Thank you both for the quick reply. It's funny how you spend 2 hours trying to fix something that it takes someone else only 2 minutes!

treehouse : what would you like to learn today?

Forums

[Solved] Fixed width highlight on hover?