CODEWITHSUNDEEP
htmlcss
BenJ30
BenJ30

Reputation: 86

Background Colour width when hovering over text

I'm pretty stuck right now, I'm working on a site and I have the height of the list on my navigation bar sorted but now I want to make the width bigger so when I hover on it the background colour covers a slightly bigger area instead of brushing up against the end of the text.

I've tried padding it but all that seems to do is move the text over slightly and then center the text within that area.

Image (Don't have enough reputation to embed): https://i.sstatic.net/9GoIf.png

This is the CSS I currently have for it. I would appreciate any help with this!

html {
	margin: 0;
}
body {
	padding: 0;
	margin: 0;
	border: 0;
}
.navigation {
	font-family: Arial;
	font-size: 16px;
	font-weight: lighter;
	background-color: #555;
	color: white;
	width: 100%;
	height: 72px;
	background-image: url("images/download.png");
}
.navigation ul {
	list-style-type: none;
	text-decoration: none;
}
.navigation li {
		height: 100%;
		width: 80px;
		display: inline-block;
		padding-top: 25px;
		float: right;
		margin-right: 120px;
}
.navigation li a {
	text-decoration: none;
	color: white;
}
.navigation li a:hover {
	height: 100%;
	padding-top: 25px;
	padding-bottom: 30px;

	width: 80px;
	background-color: #556;
}
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="stylesheet.css" />
	</head>


	<body>
		<div class="navigation">
			<ul>
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
				<li><a href="#">Link 3</a></li>
				<li><a href="#">Link 4</a></li>
			</ul>
		</div>

	</body>
</html>

Upvotes: 2

Views: 3217

Answers (3)

Jason White
Jason White

Reputation: 5813

http://jsfiddle.net/mj8Lh31x/

html {
  margin: 0;
}
body {
  padding: 0;
  margin: 0;
  border: 0;
}
.clearfix {
  clear: both;
}
.navigation {
  font-family: Arial;
  font-size: 16px;
  font-weight: lighter;
  background-color: #555;
  color: white;
  background-image: url("images/download.png");
}
.navigation ul {
  float: right;
  margin: 0px;
  list-style-type: none;
  text-decoration: none;
}
.navigation li {
  padding: 30px 0px;
  display: inline-block;
}
.navigation li a {
  padding: 30px 25px;
  text-decoration: none;
  color: white;
}
.navigation li a:hover {
  background-color: #556;
}
<div class="navigation">
  <ul>
    <li><a href="#">Link 1</a>
    </li>
    <li><a href="#">Link 2</a>
    </li>
    <li><a href="#">Link 3</a>
    </li>
    <li><a href="#">Link 4</a>
    </li>
  </ul>
  <div class="clearfix"></div>
</div>

Upvotes: 0

Circle B
Circle B

Reputation: 1674

You'll need to apply the hover state to the li instead of the a, here's my suggestion:

html {
	margin: 0;
}
body {
	padding: 0;
	margin: 0;
	border: 0;
}
.navigation {
	font-family: Arial;
	font-size: 16px;
	font-weight: lighter;
	background-color: #555;
	color: white;
	width: 100%;
	height: 72px;
	background-image: url("images/download.png");
}
.navigation ul {
	list-style-type: none;
	text-decoration: none;
}
.navigation li {
		height: 100%;
		width: 80px;
		display: inline-block;
		padding-top: 25px;
		float: right;
		padding-left: 25px;
        margin-right: 95px;
}
.navigation li a {
	text-decoration: none;
	color: white;
}
.navigation li:hover {
	height: 100%;
	padding-top: 25px;
	padding-bottom: 30px;

	width: 80px;
	background-color: #556;
}
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="stylesheet.css" />
	</head>


	<body>
		<div class="navigation">
			<ul>
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
				<li><a href="#">Link 3</a></li>
				<li><a href="#">Link 4</a></li>
			</ul>
		</div>

	</body>
</html>

Upvotes: 0

Antonio Smoljan
Antonio Smoljan

Reputation: 2207

Is this what you are looking for.

Solution

We remove the width from the parent and make the links block elements with padding

.navigation li {
  display: inline-block;
  float: right;
  margin-right: 120px;
}

.navigation li a {
  text-decoration: none;
  color: white;
  display: block;
  padding: 26px 30px;
}

.navigation li a:hover {
  background-color: #556;
}

And making the li float right will mess up the order of your links consider floating the parent ul insted.

Upvotes: 1

Related Questions