sadet48 - Select Menu

Web Tutorials

<!DOCTYPE html>
<html>
<head>
<title>Web Tutorials</title>
<meta charset="utf-8">
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
nav {
	background: #fff;
	width: 100%;
	height: 45px;
}
nav ul li {
	background: #fff;
	text-align: center;
	list-style: none;
        padding: 10px 0 4px 0;
	width: 100px;
	height: 25px;
	float: left;
}
nav ul li:hover {
	background: #0a0;
	text-align: center;
	list-style: none;
        padding: 10px 0 4px 0;
	width: 100px;
	height: 25px;
	float: left;
}
nav ul li.select {
	background: #0a0;
	text-align: center;
	list-style: none;
	width: 100px;
	height: 25px;
	float: left;
}
nav ul li a {
	font-family: Consolas;
	color: #444;
	font-size: 12px;
	background: transparent;
	text-decoration: none;
}
nav ul li a:hover {
	color: #fff;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript">
        $("document").ready(function(e) {
        $("nav ul li").click(function(e) {
        $("nav ul li").removeClass('select');
        $(this).addClass('select');
    });
});
</script>
</head>
<body>
<nav>
	<ul>
		<li class="select"><a target="_blank" href="https://www.google.com.tr/webhp?ei=E12zVdqMMIL1UvC4g6gH&ved=0CAUQqS4oAw">Google</a></li>
		<li><a target="_blank" href="https://accounts.google.com/ServiceLogin?service=oz&passive=1209600&continue=https://plus.google.com/u/0/?gpsrc=gplp0#identifier">Google+</a></li>
		<li><a target="_blank" href="https://www.youtube.com/?gl=TR">Youtube</a></li>
		<li><a target="_blank" href="http://www.bedava-sitem.com/editpage.php#">Bedava-Sitem</a></li>
	</ul>
</nav>
</body>
</html>