code
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="nav.css">
<title>CSS Navigation Bar with logo</title>
</head>
<body>
<div class="logo"><a href="#" ><img src="logo.jpg"width="70"height="auto"></a></div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a class="active" href="#">Muic</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Event</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
CSS StyleSheet with logo navbar
ul{
list-style-type: none;
padding:0px;
margin:0 0 0 15px ;
}
li{
float: left;
}
li a{
display: block;
text-decoration: none;
padding:20px 15px;
text-align: center;
}
nav{
width:100%;
background-color: #e7e7e7;
overflow: auto;
}
.logo{
position: absolute;
}
.active{
background-color: greenyellow;
border-right:1px solid black;
}
li a:hover:not(.active){
background-color: red;
border-bottom:5px solid gold ;
}
No comments:
Post a Comment