A Stylish Horizontal menu through css

Put the code in source code:-


                              <div class="main_menu">

    <ul>

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

    <li><a href="#">About Us</a></li>

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

        <ul>

        <li><a href="#">Web Design</a></li>
     <li><a href="#">Web Development</a></li>

        <li><a href="#">Search Engine Optimization</a></li>

        <li><a href="#">Social Media Optimization</a></li>

        </ul>

    </li>

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

    <li><a href="#">Latest News</a></li>

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

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

    <li> <a href="#">Contact Us</a></li>

    </ul>

</div>


Put code in css page:-




.main_menu

{

    height:30px;

    line-height:30px;

    color:#FFF;

    position:relative;

    font-family:Arial, Helvetica, sans-serif;

    font-size:13px;

}

.main_menu ul

{

    padding:0px;

    margin:0;

    list-style:none;

}

.main_menu ul li

{

    padding:0;

    margin:0;

    border-right:1px solid #000000;

    float:left;

    background:#333333;

}

.main_menu ul li a

{

    color:#FFF;

    display:block;

    text-decoration:none;

    padding:0 25px;

}

.main_menu ul li a:hover

{

    background:#3ea5ea;

    color:#000;

}

.main_menu ul li ul

{

     display: none;

     width: auto;

     position:absolute;

     top:30px;

     padding:0px;

     margin:0px;

}

.main_menu ul li:hover ul

{

     display: block;

     position: absolute;

     margin: 0;

     padding: 0;

}

.main_menu ul li:hover li

{

    float: none;

    list-style:none;

    margin:0px;

}

.main_menu ul li:hover li

{

    background:#333;

    border-top:1px solid #000000;

}

.main_menu ul li:hover li a

{

    color: #fff;

    padding:0 20px;

    display:block;

    width:170px;

}

.main_menu ul li li a:hover

{

    color:#000;

}