CODEWITHSUNDEEP
htmlcssnavbar
Ahad Aman Hunzai
Ahad Aman Hunzai

Reputation: 25

Navbar code isn't working

Today, I was trying to make a simple css navbar and you know, nothing is working, I'm just stucked! No code is working, even padding is not working. Any Help?

https://codepen.io/anon/pen/gxYdPx << demo

Additionally My code,

style.css 

    body {
    	margin: 0;
    }
    .navigation {
    	background-color: #ecf0f1;
    	width: 100%;
    	height: 90px;
    }
    .navigation ul {
    	overflow: hidden;
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    }
    
    .navigation li {
    	float: right;
    }
    
    .navigation li a {
    	display: block;
        color: white;
        text-align: center;
    
    
        text-decoration: none;
    }
index.html

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<title>ZadxHost - The Best You Can Imagine!</title>
	</head>
	<body>
		<!-- Navigation Bar -->
		<div class="navigation">
			<h1>ZadxHost</h1>

			<ul>
				<a href="#"><li>Home</li></a>
				<a href="#"><li>Panel</li></a>
				<a href="#"><li>Pricing</li></a>
				<a href="#"><li>Contact Us</li></a>
			</ul>
		</div>

	</body>
</html>

Upvotes: 0

Views: 82

Answers (1)

Brett
Brett

Reputation: 20049

You need to put the a elements inside the li elements, not the other way around.

So...

    <ul>
        <li><a href="#">Home</a></li>
        //.....
    </ul>

At the moment your CSS is targeting .navigation li a which won't work with your current structure.

Upvotes: 2

Related Questions