Different Menu 1

by Avdhut Sonpethkar

HTML

<div class="menucontainer">
    <ul>
        <li class="parent_menu"><a href="#">Home</a>

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

        </li>
        <li class="parent_menu has_child"><a href="#">Product</a>

            <ul>
                <li class="child_menu"><a href="#">Product 1</a>

                </li>
                <li class="child_menu"><a href="#">Product 2</a>

                </li>
                <li class="child_menu"><a href="#">Product 3</a>

                </li>
            </ul>
        </li>
        <li class="parent_menu has_child"><a href="#">Services</a>

            <ul>
                <li class="child_menu"><a href="#">Product 1</a>

                </li>
                <li class="child_menu"><a href="#">Product 2</a>

                </li>
                <li class="child_menu"><a href="#">Product 3</a>

                </li>
            </ul>
        </li>
        <li class="parent_menu"><a href="#">Contact Us</a>

        </li>
    </ul>
</div>

CSS

/*
Parent menu
*/
 .menucontainer {
    height: 120px;
    width: 960px;
}
.menucontainer ul {
    list-style:none;
    position: relative;
    height: 80px;
    width: 960 px;
    margin: 10px 0 0 0;
    padding: 0px;
    background: #8FD2A8;
}
.menucontainer li.parent_menu {
    list-style:none;
    height: 60px;
    width: 160px;
    margin: 10px 0 0 0;
    background: transperant;
    float:left;
    display: inline;
    text-align:center;
}
.menucontainer li.parent_menu a {
    text-decoration: none;
    text-align:center;
    color: white;
    font-size: 22px;
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 60px;
    font-family:"Monotype Corsiva";
}
 .menucontainer li.has_child
{
    border: 0px;
}
/*****************Hover effect Parent Menu**********/
 .menucontainer li.parent_menu:hover {
    list-style:none;
    height: 60px;
    width: 160px;
    background: transperant;
    float:left;
    display: inline;
    z-index: 999;

}

 .menucontainer li.has_child:hover
{
        border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
}

.menucontainer li.parent_menu:hover a {
    text-decoration: none;
    color: black;
    font-size: 22px;
    font-family:"Monotype Corsiva";
    text-align:center;
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 60px;
}
/**********************SUB Menu**********************/
 .menucontainer li.parent_menu ul {
    list-style:none;
    position: relative;
    height: 0;
    display: none;
    background: #8FD2A8;
}
.menucontainer li.parent_menu:hover ul {
    list-style:none;
    position: relative;
    height: auto;
    display: block;
 

    left: -1px;
    margin: 0px 0 0 0px;
    padding:0px;
    background: #8FD2A8;
    z-index: 100;
  
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    overflow:...