use_of_css_part_2

hello friends , in my recent post you have learnt some step towards css.
   In this post you will learn two type of navigation bar 1) vertical , 2) horizontal  navigation bar.
1) A vertical navigation bar : -
First create class for your code , in my code I use menu as class name .My code is as -

  <style type="text/css">
  .menu ul { list-style:none; font-size:20px; }
   .menu ul li { position:relative; }
   .menu ul li a { text-decoration:none; padding:12px 12px 12px 12px; color:#ffffff; display:block;                       border-right:2px solid #456745; border:1px solid #467746; width:150px; background:#333333;   }
   .menu ul li a:hover { color:#aa2233; background:#778877; }
</style>

We use list to create a navigation bar so we use styling on list .And this code creates a vertical navigation bar.

2.) Now we will create a horizontal navigation bar .The only difference I will create in .menu ul li { position:relative; }  . I will add a single attribute as "float:left;" And the code will looks like -

<style type="text/css">
.menu ul { list-style:none; font-size:20px; }
.menu ul li { position:relative; float:left; }
.menu ul li a { text-decoration:none; padding:12px 12px 12px 12px; color:#ffffff; display:block;  border-right:2px solid #456745; border:1px solid#467746; width:150px; background:#333333; }
.menu ul li a:hover { color:#aa2233; background:#778877; }
</style>

And finally our horizontal navigation bar is also ready. Now I use it as-

<div class="menu">

<ul>

<li>

<a href="#">prashant</a></li>

<li>

<a href="#">tyagi</a></li>

</ul>
   If you encounter any problem then tell us about your problem by contact us . We would like to answer you.
             check the previous post on css to understand this post more previous post .

                                                                                               
                                                                                                                   - Thanks to visit.