active link in menu bar not working

Question

I am unable to put " a:hover " on my home button in menu bar. even unable to remove the text-decoration. while i was trying my hands on media queries , just got puzzled.

****stack overflow settings is not allowing me to post question unless i add more details*****

body {
	background-image: url("blue-bokeh.jpeg");
	width: 100%;
	height: 100%;
}

.wrap {
	height: auto;
	width: 90%;
	margin: auto;
}

header {
	background: #333;
	color: white;
	height: auto;
	width:100%;
	float: left;
}

header nav {
	width: 100%;
	height: auto;
}

header nav ul {
	list-style: none;
	height: auto;
	width: auto; /* what happens if i change the value to 100% */
	float: right;
	margin-right:30px;
}

header nav ul li {
	display: inline;
	padding: 15px 30px;
	float: left;
	border-radius: 5px;
}

header nav ul li a.active {
    text-decoration: none;
}

header nav ul li:hover {
	background-color: #111;
}

header nav ul li a.active:active {
    background-color: #4caf50;
}

.mainbody {
	/*background: tomato;*/  /* get the code checked , if its repeated in .top class */
	float: left;
	margin-top: 20px;
	border-radius: 10px;
	/*padding: 20px 20px;*/
	height: auto;
	width: 60%;
	margin-right: 2%;
}

.top {
	background: tomato;
	margin-bottom: 10px;
	float: left;
	border-radius: 10px;
	padding: 20px 20px;
}

.top h3 {
	color: darkslategray

}

.bottom {
	background: tomato;
	margin-bottom: 50px;
	float: left;
	border-radius: 10px;
	padding: 20px 20px;
}

.bottom h3 {
	color: darkslategray

}

.sidebar {
	float: left;
	height: auto;
	width: 38%;
	margin-top: 20px;

}

.topside {
	background: orangered;
	margin-bottom: 10px;
	border-radius: 10px;
	padding: 20px 20px;
}

.middleside {
	background: orangered;
	margin-bottom: 10px;
	border-radius: 10px;
	padding: 20px 20px;
}

.bottomside {
	background: orangered;
	margin-bottom: 10px;
	border-radius: 10px;
	padding: 20px 20px;
}

footer {
	background: darkslategray;
	float: left;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

footer p {
	padding-left: 50px;
}


/* ------------------------------------------------------------------------------------------------------------------------------------------
	---------------------------------------------------------------------------------------------------------------------------------------------
	------------------------------------------------------MEDIA QUERY STARTS HERE---------------------------------------------------------------*/

@media screen and (max-width: 700px) {
    body {
    	background-image: url("blue-bokeh.jpeg");
    	width: 100%;
    	height: 100%;
    }
    
    .wrap {
    	height: auto;
    	width: 90%;
    	margin: auto;
    }
    
    header {
    	background: #444;
    	color: white;
    	height: auto;
    	width:100%;
    }
    
    header nav {
    	width: 100%;
    	height: auto;
    }
    
    header nav ul {
    	list-style: none;
    	height: auto;
    	width: 100%; /* what happens if i change the value to 100% */
    	margin: 0;
        padding: 0;
        text-align: center;
       
    }
    
    header nav ul li {
    	display: block;
    	padding: 15px 30px;
        float: none;
    }
    
    header nav ul li:hover {
    	background-color: #111;
    }
    
    header nav ul li a.active:active {
        background-color: #4caf50; 
    }
    
    .mainbody {
    	/*background: tomato;*/  /* get the code checked , if its repeated in .top class */
    	margin-top: 20px;
    	border-radius: 10px;
    	/*padding: 20px 20px;*/
    	height: auto;
    	width: 100%;
    }
    
    .top {
    	background: tomato;
    	margin-bottom: 10px;
    	border-radius: 10px;
    	padding: 20px 20px;
    }
    
    .top h3 {
    	color: darkslategray
    
    }
    
    .bottom {
    	background: tomato;
    	border-radius: 10px;
    	padding: 20px 20px;
    }
    
    .bottom h3 {
    	color: darkslategray
    
    }
    
    .sidebar {
    	height: auto;
    	width: 100%;
    
    }
    
    .topside {
    	background: orangered;
    	margin-bottom: 10px;
    	border-radius: 10px;
    	padding: 20px 20px;
    }
    
    .middleside {
    	background: orangered;
    	margin-bottom: 10px;
    	border-radius: 10px;
    	padding: 20px 20px;
    }
    
    .bottomside {
    	background: orangered;
    	margin-bottom: 10px;
    	border-radius: 10px;
    	padding: 20px 20px;
    }
    
    footer {
    	background: darkslategray;
    	float: left;
    	width: 100%;
    	height: auto;
    	border-radius: 10px;
    }
    
    footer p {
    	padding-left: 50px;
    }
}
  
    	
    
   

<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="restheme.css" type="text/css" rel="stylesheet">
</head>
<body>
	<div class="wrap">
		<header>
			<nav>
				<ul>
					<li><a class="active" href="#home">Home</a></li>
					<li>Portfolio</li>
					<li>Blog</li>
					<li>Contact Us</li>
				</ul>
			</nav>
		</header>
		<div class="mainbody">
			<article class="top">
				<h3>First Post</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
			</article>

			<article class="bottom">
				<h3>Second Post</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
			</article>
		</div>	
		<div class="sidebar">
			<aside class="topside">
				<h3>Top Sidebar</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
			</aside>

			<aside class="middleside">
				<h3>Middle Sidebar</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
			</aside>

			<aside class="bottomside">
				<h3>Bottom Sidebar</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
			</aside>
		</div>

		<footer>
			<p>Copyright &copy; 2016 Faltoo Webdesigns</p>	
		</footer>

	</div>
</body>	
	

</html>

Answer 1

If I understand you right, you want to achive something like this?

https://jsfiddle.net/j7j54Lta/1/

I did some improvements and changed the structure. The li gets the .active-class and not the anchor. If the anchor in the active li is hovered it changes the color (or whatever you want to achive):

header nav ul li.active a:hover{
  color: red;
  /* or whatever*/
}

Moreover there is no text-decoration:

header nav ul li.active a {
    text-decoration: none;
    cursor: default;
}