How to Make a Style CSS With Horizontal Navigation
Creating a horizontal navigation bar can be an effective way to allow users of your website to navigate to different pages without relying on hyperlinks and the "front" and "back" browser buttons. When creating a horizontal navigation bar, you must insert some HTML coding as well as some CSS coding. These two codes work together, even though they are located in different sections of your HTML document.
Other People Are Reading
Instructions
-
-
1
Log in to your Web server and open the HTML page in which you will insert the horizontal navigation bar.
-
2
Click in the <head> section of the page and insert this CSS code:
#navcontainer ul
{
padding-left: 1;
margin-left: 1;
background-color: #036;
color: White;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
padding: 0.2em 1em;
background-color: #036;
color: White;
text-decoration: none;
float: left;
border-right: 2px solid #fff;
}
#navcontainer ul li a:hover
{
background-color: #369;
color: #fff;
}
-
-
3
Click in the <body> section of the page in the location where you want to insert the horizontal navigation and insert:
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">News</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Joint the Team</a></li>
</ul>
</div>
-
4
Replace the "Blog", "About Us" and other entries with the actual text you want to appear in the navigation bar.
-
5
Replace the "#" in each line with the URL you want to open when the text in the navigation bar is clicked.
-
6
Publish the page. Check functions.
-
1
