Menu navigation with animation

by Mohammed Ismail Ansari

HTML

<ul class="Mainmenu">
    <li><a href="#">Services</a>
    </li>
    <li><a href="#">Hospital Facilities</a>
        <ul>
            <li>
                <a href="#">Sub Menu 1111</a>
            </li>
            <li>
                <a href="#">Sub Menu 2</a>
            </li>
            <li>
                <a href="#">Sub Menu 3</a>
            </li>
            <li>
                <a href="#">Sub Menu 4</a>
            </li>
         </ul>
    </li>
</ul>

CSS

#menu ul.Mainmenu {
    width: 996px;
    margin: 0px;
    padding: 0px;
    margin-top: 10px;
}

#menu ul.Mainmenu li {
    float: left;
    list-style: none;
    margin-right: 20px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    color: #860300;
    margin-right: 16px\9;  /* IE8 and below */
    position:relative;
    height:30px;
}

#menu ul.Mainmenu li a {
    text-decoration:none;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    color: #860300;
}

ul li ul {
    padding: 0;
    position: absolute;
    top: 25px;
    left: 0;
    width: 150px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    opacity: 0;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
    z-index:100000;
    width:150px;
    background-color:red;
    padding:7px;
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius:3px;
}

ul li ul li { 
    display: block; 
    color: #fff;
    text-shadow: 0 -1px 0 #000;
}

ul li ul li:hover {
    background: #666;
}

ul li:hover ul {
    opacity: 1;
}

/************************   The Slide Show **************************/

#slideShow {
    height: 500px;
    width: 100%;
    position: relative;
    background-position:center;
    background-repeat:no-repeat;
    background-image:url(../1.jpg);
}
#slideShow #UpEdge {
    position: absolute;
    width: 100%;
    height: 15px;
    background-image: url(../img/Up-Edge.png);
    background-repeat: repeat;
    top: 0px;
    z-index:100;
}
#slideShow #BottomEdge {
    position: absolute;
    width: 100%;
    height: 15px;
    background-image: url(../img/bottom-Edge.png);
    background-repeat: repeat;
    bottom: 0px;
    background-position: bottom;
    z-index:100;
}