EAT.SLEEP.WORK.

Create a horizontal inline
navigation bar in css
In this tutorial, we're going to teach you how to build a horizontal inline navigational menu bar with rollover effects for your website using CSS. Take a look at the example before continuing on through the tutorial. View Demo

Step 1
We will begin building the basic navigation with <ul> and <li> tags. In our website, we will have 6 links: Home, About, Our Products, Our Commitment, Contact Us and Shop Now.
```
<ul>
    <li>Home</li>
    <li>About</li>
    <li>Our Products</li>
    <li>Our Commitment</li>
    <li>Contact Us</li>
    <li>Shop Now</li>
</ul>
```
Step 2
Now lets add our <a href> links:
```
<ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/become-a-customer/">Our Products</a></li>
    <li><a href="/suppliers/">Our Commitment</a></li>
    <li><a href="/contact-us/">Contact Us</a></li>
    <li><a href="/shop/">Shop Now</a></li>
</ul>
```
Step 3
Let's start setting up our CSS styles and get this navigation inline. First, let's wrap this list in a div that we'll name 'menu'. Here we will specify the global attributes for our navigation such as font, font-size, color, and font-weight. I want our navigation to have white text at 12px. We'll set the font to Arial and make it bold. Optionally, let's fix the width of our navigation to 900px.
```
#menu {
	color:#fff;
	font:12px Arial;
	font-weight:bold;
	width:900px;
}
```
Note: Although it's generally better to place your CSS in an external stylesheet, in this example we'll place the CSS in the page between the head tags.
```
<head>
<style type="text/css">
#menu {
	color:#fff;
	font:12px Arial;
	font-weight:bold;
	width:900px;
}
</style>
</head>
```
Step 4
Now let's add the CSS to get this navigation. The below code says: Let's set the margins and padding to zero. Then display the <li> tags within the <ul> tags in a horizontal line (inline). Lastly, set the width to stretch to the width of our container 'menu'.
```
#menu ul {
	margin: 0;
	padding: 0;
	display: inline;
	width:100%;
}
```
Step 5
Now we have our <ul> out of the way, next up is handling how the <li> tags are behaving. In order to get rid of the default bullet points, we're going to set the list-style: none. We're going to want the text to align in the center of the <li> and in order to set some separation between our links, let's add a border to the right of each <li> tag. The last part in the <li> styling is getting the navigation links side by side.
```
#menu ul li {
	list-style: none;
	text-align:center;
	border-right: 1px solid #FFF;
	float:left;
}
```
Step 6
The last part of this tutorial is to add the styles to the <a href> links in the <li> tags. Here we set the font color to white (#fff) and text-decoration to none meaning there is no underline effect under the text. We display the <li> as a solid grey block (display:block and background-color:#6b6b6b). The tricky part with the padding below is that the actual height is 37 px as you can add the top padding (12px) to the set height (25px). Optionally, I added the outline to none as Firefox always displays a dotted line around the link when you click on it. Very annoying.
```
#menu ul li a {
	color:#fff;
	text-decoration:none;
	outline:none;
	background-color:#6b6b6b;
	margin:0;
	padding:12px 40px 0 40px;
	height:25px;
	display:block;
}
```
As for the (rollover) hover effects, most of the styles will be adopted by the parent #menu ul li a style. All we need to do is set the background color, in this case a nice shade of green.
```
#menu ul li a:hover {
	color: #fff;
	text-decoration:none;
	background-color:#04874f;
}
```
Here is the entire code:
```
<style type="text/css">
#menu {
	color:#fff;
	font:12px Arial;
	width:900px;
	font-weight:bold;
}
#menu ul {
	margin: 0;
	padding: 0;
	display: inline;
	width:100%;
}
#menu ul li {
	list-style: none;
	text-align:center;
	float:left;
	border-right: 1px solid #FFF;
}
#menu ul li a {
	color:#fff;
	text-decoration:none;
	outline:none;
	background-color:#6b6b6b;
	margin:0;
	padding:12px 40px 0 40px;
	height:25px;
	display:block;
}
#menu ul li a:hover {
	color: #fff;
	text-decoration:none;
	background-color:#04874f;
}
</style>
</head>

<div id="menu">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/become-a-customer/">Our Products</a></li>
    <li><a href="/suppliers/">Our Commitment</a></li>
    <li><a href="/contact-us/">Contact Us</a></li>
    <li><a href="/shop/">Shop Now</a></li>
  </ul>
</div>
```
By Jonathan Wang

Eat.Sleep.Work.,inc.

Create a horizontal inline navigation bar in css

Create a horizontal inline
navigation bar in css