A stylish hower menu using AJAX Hower Demonstration

Css of hower menu:-


<style type="text/css">
                            .popUpContent
                            {
                                background-image: url("image path");
                                background-repeat: repeat-y;
                                margin-bottom: 0;
                                margin-left: 0;
                                margin-right: 0;
                                margin-top: 0;
                                padding-bottom: 10px;
                                padding-left: 10px;
                                padding-right: 10px;
                                padding-top: 5px;
                                top: -1px;
                                width: 593px;
                            }
                            .popUpTop
                            {
                                background-image: url("image path");
                                background-repeat: no-repeat;
                                height: 44px;
                                margin-bottom: 0;
                                margin-left: 0;
                                margin-right: 0;
                                margin-top: 0;
                                padding-bottom: 0;
                                padding-left: 0;
                                padding-right: 0;
                                padding-top: 0;
                                width: 593px;
                            }
                            .popUpBottom
                            {
                                background-image: url("image path");
                                background-repeat: no-repeat;
                                height: 18px;
                                margin-bottom: 0;
                                margin-left: 0;
                                margin-right: 0;
                                margin-top: 0;
                                padding-bottom: 0;
                                padding-left: 0;
                                padding-right: 0;
                                padding-top: 0;
                                top: -1px;
                                width: 593px;
                            }
                            .popUpText
                            {
                                padding-bottom: 0;
                                padding-left: 40px;
                                padding-right: 20px;
                                padding-top: 0;
                            }
                            .popUpHeading
                            {
                                color: #E97714;
                                font-weight: bold;
                                padding-bottom: 0;
                                padding-left: 50px;
                                padding-right: 15px;
                                padding-top: 20px;
                            }
                            .popUp
                            {
                                line-height: 1.6em;
                                position: absolute;
                                width: 593px;
                                z-index: 1000;
                                left: 130px;
                                top: -38px;
                            }
                            .PopUpCont
                            {
                                position: absolute;
                                top: -9999999999;
                                left: -99999999;
                            }
                            .menuleft a
                            {
                                font-family: Arial;
                                text-decoration: none;
                                font-size: small;
                                text-transform: capitalize;
                                background-image: url("image path");
                                background-repeat: no-repeat;
                                color: #000080;
                                display: block;
                                font-size: 13px;
                                height: 26px;
                                padding-bottom: 0;
                                padding-left: 10px;
                                padding-right: 0;
                                padding-top: 8px;
                                width: 168px;
                            }
                        </style>



Code of Java Script:-


<script type="text/javascript">
                            var myTitle = ""
                            var myContent = ""

                            function getContentText(id) {

                                switch (id) {
                                    case 1:
                                        myTitle = "Save money and staff"
                                        myContent = " Saving money by outsourcing makes sense.</br> But it usually fells behind more strategic motives.</br> Such as focusing on core business or freeing up internal staff for other initiatives.</br>  Given the current economic situation more and more companies consider outsourcing.</br> Thus reduce IT costs and being more flexible in the market.</br> Last, but not least, no trouble with employees."
                                        break;

                                    case 2:
                                        myTitle = "ICC flexibility"
                                        myContent = "ICC is a flexible, experienced, reliable IT outsourcing and consultancy partner.</br> Escalate your business to a higher level, while retaining quality and productivity."
                                        break;

                                    case 3:
                                        myTitle = "Expertise on demand"
                                        myContent = "From one minute to the another, you have plenty of hands on board for your software projects.</br> ICC guarantees the highest quality in development, project management and technological innovation."
                                        break;


                                    case 4:
                                        myTitle = "Advertising agencies"
                                        myContent = "ICC is a trusted technology partner to advertising agencies.</br> More and more companies require smart solutions for their online campaigns. </br>  You focus on the art of communication.</br> Maxland IT on the art of bits and bytes."
                                        break;

                                    case 5:
                                        myTitle = "IT companies"
                                        myContent = "ICC offers the perfect opportunity for IT companies,</br> that are in need to free up hours by outsourcing tiresome work. Your employees will devote full attention to your esteemed customers.</br> This better service to your customers directly results in more projects for your IT business."
                                        break;

                                    default:
                                        myTitle = ""
                                        myContent = ""
                                }

                            }

                            function writePopup(id) {
                                getContentText(id);
                                var divid = "divPopup" + id.toString();
                                var myDiv = document.getElementById(divid);
                                var content = "";
                                content = content + "<div class='popUpTop'><div class='popUpHeading'>" + myTitle + "<hr /> </div>";
                                content = content + "</div>";
                                content = content + "<div class='popUpContent'><div class='popUpText'>";
                                content = content + myContent;
                                content = content + "</div></div>";
                                content = content + "<div class='popUpBottom'></div>";
                                myDiv.innerHTML = content;
                                leftContentPopupShow(divid);
                            }

                            function HidePopup(id) {
                                var divid = "divPopup" + id.toString();
                                var myDiv = document.getElementById(divid);
                                myDiv.innerHTML = "";
                                leftContentPopupHide(divid);
                            }


                            function leftContentPopupShow(p) {
                                document.getElementById(p).style.display = 'block';
                                //            document.getElementById("centerpage").setAttribute("class", "centerpage2")

                            }
                            function leftContentPopupHide(p) {
                                document.getElementById(p).style.display = 'none';
                                // document.getElementById("centerpage").setAttribute("class", "centerpage")

                            }
                        </script>

Call on div where ever u waana call javascript:-



           <div class="menuleft" style="width: 170px">
                            <ul style="list-style: none; padding-left: 0px; margin-left: 5px">
                                <li onmouseover="writePopup(1)" onmouseout="HidePopup(1)"><a href="#">Save money and
                                    staff</a>
                                    <div class="PopUpCont">
                                        <div id="divPopup1" class="popUp">
                                        </div>
                                    </div>
                                </li>
                                <li onmouseover="writePopup(2)" onmouseout="HidePopup(2)"><a href="#">Maximum flexibility</a>
                                    <div class="PopUpCont">
                                        <div id="divPopup2" class="popUp">
                                        </div>
                                    </div>
                                </li>
                                <li onmouseover="writePopup(3)" onmouseout="HidePopup(3)"><a href="#">Expertise on demand</a>
                                    <div class="PopUpCont">
                                        <div id="divPopup3" class="popUp">
                                        </div>
                                    </div>
                                </li>
                                <li onmouseover="writePopup(4)" onmouseout="HidePopup(4)"><a href="#">Advertising agencies</a>
                                    <div class="PopUpCont">
                                        <div id="divPopup4" class="popUp">
                                        </div>
                                    </div>
                                </li>
                                <li onmouseover="writePopup(5)" onmouseout="HidePopup(5)"><a href="#">IT companies</a>
                                    <div class="PopUpCont">
                                        <div id="divPopup5" class="popUp">
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>