problem in drop down menu

vishal1903

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

Expand|Select|Wrap|Line Numbers

 <!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>

Feb 15 '15 #1

Subscribe Post Reply

1051

Similar topics

Dynamic populate drop down menu

by: Greg Scharlemann | last post by:

I am attempting to populate a drop down menu based on the selection of a different drop down menu. However, it is not working correctly, I cannot figure out for the life of me what exactly happens...

Javascript

Please critique a page with drop down menu, drop char, etc.

by: Haines Brown | last post by:

I've implemented the horizontal drop down menu discussed recently in this newsgroup, and it works nicely under Galeon and Mozilla, but not IE 5.0. Here are the problems: Under IE 5.0, the...

HTML / CSS

drop-down menu doesn't get displayed in IE

by: rajat | last post by:

Hi, I have adapted a drop down menu from USC webpage (www.usc.edu). The link to my page is http://www-scf.usc.edu/~swarup/test/test.html The links to the CSS ans JS files are:...

Javascript

Help with drop down menu

by: hemanth.singamsetty | last post by:

Hello there, I've a drop down menu (created using CSS & Javascript -- see code below). My problem is, whenever I click a link on the menu the new page replaces the current page (and the menu...

Javascript

Drop down menu

by: Andy Munnis | last post by:

Need help with creating a drop down menu. I am trying to replicate the GUI of a large db application that runs on large Sun servers using Oracle/Solaris, etc. My purpose is to create a stand-alone...

Microsoft Access / VBA

Drop Down Menu.

by: rsteph | last post by:

I have a javascript drop down menu that I borrowed from a website. It utilizes a little .css to help with formatting. The menu works great, and on all 3 of the browsers I'm concerned about; but I am...

Javascript

CSS Drop Down Menu in IE7

by: TycoonUK | last post by:

Hi, As I do not have IE7 on my computer, I was wondering if there is a fault in my CSS Menu when using IE7. Please can someone look at my site - http://www.worldofmonopoly.co.uk and tell me...

HTML / CSS

calling css 2-level drop down menu (DHTML issue)

by: Archanak | last post by:

Hi, I am using 2-level CSS Drop Down Menu in my perl/CGI program. here is the code. #!c:/perl/bin/perl.exe use CGI qw(:standard);

Javascript

Ul li drop down menu works in FF not quite in IE

by: buzzard724 | last post by:

Ul li drop down menu works in FF not quite in IE Thank you for looking at this. The page is generated dynamically by php, js and jquery. The drop down menu ul- reports-li - works fine in FF. In...

HTML / CSS

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA