Solved

css drop menu

Posted on 2011-02-11
2
233 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 34

Accepted Solution

by:
Paul MacDonald 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

863 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

26 Experts available now in Live!

Get 1:1 Help Now