I need to fix something in my HTML and CSS code for a navigation bar
Here's my HTML code, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <link rel="stylesheet" href="style.css"> <body> <nav> <label class="logo">DesignX</label> <ul> <li><a class="active" href="#">Home</li> <li><a href="#">Address</li> <li><a href="#">Content</li> <li><a href="#">Feedback</li> <li><a href="#">Donate</li> </ul> </nav> </body> </html> Css code here, *{ padding: 0; margin: 0; text-decoration: none; list-style: none; box-sizing: border-box; } body { font-family:Impact; font-weight: normal; } nav{ background-color: #3FE5F0; height: 60px; width:100%; } label.logo{ color:white; font-size: 40px; line-height: 60px; } ul { float: right; margin-right:20px; } nav ul li{ display:inline-block; line-height: 60px; margin: 0 15px; } nav ul li a{ color:white; font-size: :17px; text-transform:uppercase; } a.active,a:hover{ background:red; } Summary: I was trying to create a navigation bar and when I created one almost it gave me lines in between them which can be seen in the image link given below, it's the hovering effect which is bugged from my knowledge, please help me out if possible.
Often have questions like this?
Learn more efficiently, for free:
