If you are a web developer or Web designer, I am sure that you know about Navigation Bar. Navigation bar is one that is most necessary part of your website. It will bring your user to the other pages of your site at a single click. You can create the menu by simply defining
Here is the preview:
- tag. But when style adds to it, It looks more attractive to the users.
I am sharing here some CSS designs for you as a help, you can edit them and add some more code according to your requirement or choice.
1. HTML Code:
- The simple navigation Code is following:
2. HTML Code:
<ul id="navbar">
<li><a href="#">Menu Item</a><ul>
<li><a href="#">Item One</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li></ul>
</li>
</ul>
CSS:
Copy this CSS now:
<![endif]-->
#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #5e8ce9;
color: #fff;
text-decoration: none; }
#navbar li ul {
display: none;
width: 10em;
background-color: #69f;}
Here item Navigation Start actually:
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000;
}
#navbar li li a:hover {
background-color: #8db3ff;
}
0 comments:
Post a Comment