Solved

css drop menu

Posted on 2011-02-11
2
231 Views
Last Modified: 2012-05-11
HI Experts,

I have a xhtml/css drop menu that works just fine... unit it's placed in it's permanent position in the page. Because the menu is placed so close to the bottom of the browser window, the drop menu li elements get pushed into wierd positions and it looks terrible.  It seems that if a drop menu tries to open near the bottom of the browser window then it displays up instead of down and the positioning goes crazy.  Any ideas about how I can control the positioning when this happens?

Thanks,

HNM
0
Comment
Question by:HelpNearMe
2 Comments
 
LVL 33

Accepted Solution

by:
paulmacd earned 250 total points
ID: 34874598
Surely the LI elements are being positioned themselves.  Can't you change the positioning to use negative X values?
0
 
LVL 14

Assisted Solution

by:Designbyonyx
Designbyonyx earned 250 total points
ID: 34874733
Just a note that it's not really the best usability option to have dropdown menus at the bottom of your site.

Usually, you just create tall lists:

(not sure if this will show up correctly... but you get the idea)

Top Item            Top Item
 - Sub Item           - Sub Item
 - Sub Item           - Sub Item
 - Sub Item           - Sub Item
 - Sub Item           - Sub Item

Open in new window



Or you could use something similar to @paulmacd's suggestion to create a "drop-up" menu.  If you post some code, I can write the CSS for you.  Instead of negative positioning, you will want to do something similar to this:

(Note: this style is not complete.  I will need to see your code to create the proper styles)

ul li {
    position: relative;
}
ul ul {
    position: absolute;
    bottom: -99999px;
}
ul li:hover ul {
    bottom: 0;
}

Open in new window

0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

747 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

12 Experts available now in Live!

Get 1:1 Help Now