CODEWITHSUNDEEP
htmlcsshtml-lists
Freddy
Freddy

Reputation: 867

Anchor link in list does span whole of list

I have created a simple vertical nav-bar. On hover, the background colour of the li and a change. When hovering over the right hand side of the li (after the anchor text), everything works fine, but when hovering over the left hand side of the li (before the anchor text) the anchor text becomes invisible (because the anchor text hover style isn't firing).

I have tried to remove .nav-container ul{padding-left:0px;} and instead add display: incline-block to the a themselves, but nothing changes.

Here is a fiddle showing my current approach and demonstrating the problem: https://jsfiddle.net/cf4fe8aL/

Upvotes: 1

Views: 48

Answers (1)

vikrant
vikrant

Reputation: 2287

Replace this css:

.nav-container li a:hover {
color: #333;
}

with:

.nav-container li:hover a{
  color: #333;
}

edit 1:

.nav-container {
	border-right: 0.5px solid #333;
	width: 250px;
	float: left;
	background-color: #333;
	height: 100%;
  
}
.nav-container ul{
	width: 100%;
	padding-left:0px;
}
.nav-container ul li {
	list-style-type: none;
	width: 100%;
}
.atag {
  width : 100%;
	display: block;
	text-align: left;
	color: #fff;
	text-decoration: none;
	margin-left: 0px;
	padding-left:15px;
}
.atag:hover {
	background-color: #fff;
  color:#333;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>
<body>
<nav class="nav-container">
						<ul>
							<a class="atag" href="#"><li class="nav-link active">Home</li></a>
							<a class="atag" href="#"><li class="nav-link active">Blog</li></a>
							<a class="atag" href="#"><li class="nav-link active">Store</li></a>
							<a class="atag" href="#"><li class="nav-link active">Contact</li></a>
						</ul>
					</nav>
</body>
</html>

Upvotes: 1

Related Questions