Acually i'm new in web designing and i'm working on menu. But i'm facing problem in decorating hover...See Code Below and help me...Thanks
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Design By Jagdeep</title> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="normalize.css"> </head> <body> <nav class="nav-bar"> <div class="nav-hold"> <a href="#" class="logo"><img src="../Documents\22-1-2016\img/logo.png" alt="logo"></a> <ul class="nav-list" id="nav"> <li><a href="#">Home</a></li> <li><a href="#">Service</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> </body> </html
body {
font-family: open-sans;
font-size: 100%;
font-weight: normal;
}
a {
text-decoration: none;
}
/* WIDTH SETTING */
.nav-hold{
width: 98%;
max-width: 1180px;
margin: 0 auto;
}
/* NAVIGATION SECTION */
.nav-bar{
width: 100%;
background: #2e4053;
}
.nav-hold{
overflow: hidden;
}
.logo{
float: left;
display: block;
padding: 0 10px;
color: #f9f9f9;
font-weight: 600;
}
.nav-list{
float: right;
list-style-type: none;
}
.nav-list li {
float: left;
}
.nav-list li a {
display: block;
padding: 0px 10px;
color: #f9f9f9;
}
.nav-list li a:hover {
background: #fff;
color: #2e4053;
}
