Problem with javascript drop-down menu and forms...

Posted on 2004-11-06
Last Modified: 2012-05-05
On the top of my web page I have got a menu written in Javascript, that when the mouse moves on it some drop down submenus appear. On the same web page I have got some Input boxes, Buttons, SELECT drop-down boxes, etc.

The problem is that when my menu expands when the mouse is over it, if underneath I have got an input box let say, or a <SELECT> control, then the menu goes under it, instead of appearing on top of it.

The menu I am using you can find at (see the menu at the top of the page, sorry for the Greek)!!!!

Any ideas on how to fix this?
Question by:dinosaurus
    LVL 30

    Expert Comment

    The select (and other form controls) have a z-index of infinty.  That means they will always be on top.

    There is no straightforward way of getting your menu over form elements.

    A workaround is to hide your form elements when the menu comes out.
    LVL 30

    Accepted Solution

    LVL 30

    Expert Comment

    another workaround is to use iframes, but this can get pretty complex.

    Last is to position your menu's in such a way that they don't overlap the form controls

    Author Comment

    Is there another way of implementing this menu? E.g. another kind of menu I can install, that will not have these kind of problems? If so, please send me the code, or direct me to some code I can use....

    LVL 30

    Expert Comment

    Sorry dinosaurus, but there is no menu that i know of that can go on top of form elements cross browser.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: CSS Specialist

    We don’t have to sell you on the idea of becoming a developer. If you’re you here, you already know it’s one of the most lucrative (and fastest growing) career tracks out there. It’s CSS that allows you to set yourself apart from other web and mobile developers.

    Suggested Solutions

    Introduction This warning has to be one of the most commonly issued warnings in the history of PHP.  The article explains why this warning arises and what to do to mitigate the problem. How this Happens HTTP headers include many different kinds…
    Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now