problem in drop down menu

**vishal1903** · Feb 15 '15, 01:58 AM

hi i have designed the web page where my dropdown menu goes behind the below div how can i make it hover over the div

below is the code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
	
    <title> HOME</title>
    <style>
        body {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 12px;
	margin: 0px 20px;
	text-align: center;
}
        /* menu */
        #menu { margin:0px; padding:0px; list-style:none; color:#fff; line-height:45px; display:inline-block; float:left; z-index:1000; }
        #menu a { color:#fff; text-decoration:none; }
        #menu > li {
	background: #172322 none repeat scroll 0 0;
	cursor: pointer;
	float: left;
	position:relative;
	padding: 0px 20px;
	background-color: #006600;
}
        #menu  li a:hover {color:#B0D730;}<!---original-->
        #menu .logo {background:transparent none repeat scroll 0% 0%; padding:0px; background-color:Transparent;}
        /* sub-menus*/
        #menu ul { padding:0px; margin:0px; display:block; display:inline;}
        #menu li ul { position:absolute; left:-10px; top:0px; margin-top:45px; width:150px; line-height:16px; background-color:#006600;/*code for sub menu */ color:#e8eef0; /* for IE */ display:none; }
        #menu ul li > ul:hover { display:block;}
        #menu li ul li { display:block; margin:5px 20px; padding: 5px 0px;  border-top: dotted 1px #a0c946; list-style-type:none; }
        #menu li ul li:first-child { border-top: none; }
        #menu li ul li a { display:block; color:#e6eff2;/* sub menu font color*/ }
        #menu li ul li a { color:#7FCDFE; }
        /* main submenu */
        #menu #main { left:0px; top:-20px; padding-top:20px; background-color:#7cb7e3; color:#fff; z-index:999;}
        /* search */
        .searchContainer div { background-color:#fff; display:inline; padding:5px;}
        .searchContainer input[type="text"] {border:none;}
        .searchContainer img { vertical-align:middle;}
        /* corners*/
        #menu .corner_inset_left { position:absolute; top:0px; left:-12px;}
        #menu .corner_inset_right { position:absolute; top:0px; left:150px;}
        #menu .last { background:transparent none repeat scroll 0% 0%; margin:0px; padding:0px; border:none; position:relative; border:none; height:0px;}
        #menu .corner_left { position:absolute; left:0px; top:0px;}
        #menu .corner_right { position:absolute; left:132px; top:0px;}
        #menu .middle { position:absolute; left:18px; height: 20px; width: 115px; top:0px;}
    #heading {
	background-color: #030;
	margin: auto;
	padding: 0px;
	height: auto;
	width: auto;
	border: thin solid #030;
}
    #center body {
	background-color: #CCC;
	margin: 0px;
	padding: 0px;
	height: 1200px;
	width: 900px;
	border: thin groove #063;
}
    </style>
    <link href="toplink.css" rel="stylesheet" type="text/css" />
    <!-- link to magicslideshow.css file -->
        <!--new-->
 <script type="text/javascript" charset="utf-8" src="SlideshowAnFinal_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-47748733 { visibility:hidden; }
    </style>
<!--Adobe Edge Runtime End-->

</head>

<!--body starts-->
<body>
    
      <div id="imp_link">
        <div align="right"><a href=""> Home</a>
          <b>|</b>
          <a hre="">Results</a>
          <b>|</b>
          <a href="">SIS</a>
         </div>
         
      </div><!--div closed-->
      
    <div id="heading">
      <div align="right"><img src="image/col name12.png"  alt="logo" width="673" height="74" align="absmiddle"/></div>
      <br />
    
    </div><!--div heading closed-->

<div style="margin-left:60px;">
    <ul id="menu">
      <li><a href="#">Home</a>
      </li>
            
            <!--about us-->
            <li><a href="#">About Us</a>
                <ul id="help">
                    <li>
                        <img class="corner_inset_left" alt="" src="corner_inset_left.png"/>
                        <a href="#">Objectives and mission</a>
                        <img class="corner_inset_right" alt="" src="corner_inset_right.png"/>
                    </li>
                    <li><a href="#">Governing body</a></li>
                    <li><a href="#">Academic Committee</a></li>
                    <li><a href="#">College Council</a></li>
                    <li><a href="#">Board of Trustee</a></li>
                    <li class="last">
                        <img class="corner_left" alt="" src="corner_left.png"/>
                        <img class="middle" alt="" src="dot.gif"/>
                        <img class="corner_right" alt="" src="corner_right.png"/>
                    </li>
                </ul>
            </li>
            
            <!--admission-->
            <li><a href="#">Admission</a>
                <ul id="help">
                    <li>
                        <img class="corner_inset_left" alt="" src="corner_inset_left.png"/>
                        <a href="#">B.E</a>
                        <img class="corner_inset_right" alt="" src="corner_inset_right.png"/>
                    </li>
                    <li><a href="#">M.Tech</a></li>
                    <li><a href="#">MBA/MCA</a></li>
                    <li><a href="#">M.Sc(Engg)/Ph.D</a></li>
                    <li><a href="#">Eligibility Criteria</a></li>
                    <li class="last">
                        <img class="corner_left" alt="" src="corner_left.png"/>
                        <img class="middle" alt="" src="dot.gif"/>
                        <img class="corner_right" alt="" src="corner_right.png"/>
                    </li>
                </ul>
      </li>
            
            <!--Placement-->
           
            <li><a href="#">Placement</a>
                <ul id="help">
                    <li>
                        <img class="corner_inset_left" alt="" src="corner_inset_left.png"/>
                        <a href="#">Training & Placement Cell</a>
                        <img class="corner_inset_right" alt="" src="corner_inset_right.png"/>
                    </li>
                    <li><a href="#">Visiting Company</a></li>
                    <li><a href="#">Training Program</a></li>
                    <li><a href="#">Placement Report 2014</a></li>
                    <li><a href="#">Placement Report 2013</a></li>
                    <li><a href="#">Placement Report 2012</a></li>
                    <li><a href="#">Placement Report 2011</a></li>
                    <li class="last">
                        <img class="corner_left" alt="" src="corner_left.png"/>
                        <img class="middle" alt="" src="dot.gif"/>
                        <img class="corner_right" alt="" src="corner_right.png"/>
                    </li>
                </ul>
            </li>
            
            
            <!--Department-->
            <li><a href="#">Department</a>
                <ul id="help">
                    <li>
                        <img class="corner_inset_left" alt="" src="corner_inset_left.png"/>
                        <a href="#">Bio-Technology</a>
                        <img class="corner_inset_right" alt="" src="corner_inset_right.png"/>
                    </li>
                    <li><a href="#">Civil Engineering</a></li>
                    <li><a href="#">Pages</a></li>
                    <li class="last">
                        <img class="corner_left" alt="" src="corner_left.png"/>
                        <img class="middle" alt="" src="dot.gif"/>
                        <img class="corner_right" alt="" src="corner_right.png"/>
                    </li>
                </ul>
            </li>
            
            <!--facility-->
            <li><a href="#">Facility</a>
                <ul id="help">
                    <li>
                        <img class="corner_inset_left" alt="" src="corner_inset_left.png"/>
                        <a href="#">General help</a>
                        <img class="corner_inset_right" alt="" src="corner_inset_right.png"/>
                    </li>
                    <li><a href="#">Posts</a></li>
                    <li><a href="#">Pages</a></li>
                    <li class="last">
                        <img class="corner_left" alt="" src="corner_left.png"/>
                        <img class="middle" alt="" src="dot.gif"/>
                        <img class="corner_right" alt="" src="corner_right.png"/>
                    </li>
                </ul>
            </li>
            <!--contact-->
            
            <li><a href="#">Contact</a>
                <ul id="help">
                    <li>
                        <img class="corner_inset_left" alt="" src="corner_inset_left.png"/>
                        <a href="#">General help</a>
                        <img class="corner_inset_right" alt="" src="corner_inset_right.png"/>
                    </li>
                    <li><a href="#">Posts</a></li>
                    <li><a href="#">Pages</a></li>
                    <li class="last">
                        <img class="corner_left" alt="" src="corner_left.png"/>
                        <img class="middle" alt="" src="dot.gif"/>
                        <img class="corner_right" alt="" src="corner_right.png"/>
                    </li>
                </ul>
            </li>
            
            
            <li class="searchContainer">
                <div>
                <input type="text" id="searchField" />
                <img src="magnifier.png" alt="Search" onclick="alert('You clicked on search button')" /></div>
                           </li>
  </ul>
        
</div>
<br />
<br />
</div>
    <div style="float; clear:both;">

<div id="Stage" class="EDGE-47748733" align="justify">
    
    </div>
    
    <!-- end of menu-->
    <br />
    <br />
    
</div>

kjsdljfsl;uflasfkjasfmlasdfkdkshjfkjhsd

	
</body>
</html>