How to approach CSS navigation design?

HTML & CSS
1

I want to design a horizontal navigation bar which will prompt 4 different tabs, “Home”, “Projects”,“Contact”, “About Me”, etc. Now how do i know what css i have to specifically design?
This is what i have so far:


<style>
			*{
				margin:0px;
				padding:0px;
			}
			.navigation{
			
			}
			.navigation ul{
			
			}
			.navigation ul .AboutMe{
			
			}
			.navigation ul .Projects{
			
			}
			.navigation ul .Home{
			
			}
			.navigation ul .AnotherTab{
			
			}
			.navigation ul .Contact{
			
			}
		</style>
	</head>
	<body>
		<div id="body_wrapper">
			<nav class="navigation">
				<ul>
					<li class="AboutMe"><a href="">About Me</a></li>
					<li class="Projects"><a href="">Projects</a></li>
					<li class="Home"><a href="">Home</a></li>
					<li class="AnotherTab"><a href="">Another Tab</a></li>
					<li class="Contact"><a href="">Contact</a></li>
				</ul>
			</nav>
			<section>
				<article>
				
				</article>
			</section>
		</div>
	</body>

How can i design them correctly? I hope you guys understand what im asking! Any hint is appreciated!

2

It really depends on how you want them to look. Do you have a design in mind?

3

Honestly I’m looking for a simple design, like a black navigation bar with a color hover effect that’s all.

4

OK, here’s a basic suggestions for you: (online version: http://codepen.io/pageaffairs/pen/glcmn )

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

	html, body, div, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img, form, fieldset, legend, label, textarea, span, em, strong, sub, sup, cite, table, tbody, td, tfoot, th, thead, tr, tt, dl, dt, dd, ol, ul, li {margin: 0; padding: 0;}
	.wrapper {width: 960px; margin: 0 auto;}
	.navigation ul{list-style: none; background: #111; overflow: hidden;}
	.navigation ul li {float: left; border-right: 1px solid #e7e7e7;}
	.navigation ul li a {display: block; padding: 10px 20px; color: #fff; text-decoration: none;}
	.navigation ul li a:hover, .navigation ul li a:focus {color: #111; background: #fff;}

</style>
</head>
<body>
	<div class="wrapper">
		<nav class="navigation">
			<ul>
				<li class="AboutMe"><a href="">About Me</a></li>
				<li class="Projects"><a href="">Projects</a></li>
				<li class="Home"><a href="">Home</a></li>
				<li class="AnotherTab"><a href="">Another Tab</a></li>
				<li class="Contact"><a href="">Contact</a></li>
			</ul>
		</nav>
		<section>
			<article>
			
			</article>
		</section>
	</div>
</body>
</html>
5

Thanks That is simple and nice :smiley: I will use it has a reference to build and play around with navigation , etc Thanks :smiley:

6

No worries. You’re welcome. Good luck with your experiments, and let us know how you go. :slight_smile: