Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 247
  • Last Modified:

css drop menu

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
HelpNearMe
Asked:
HelpNearMe
2 Solutions
 
Paul MacDonaldDirector, Information SystemsCommented:
Surely the LI elements are being positioned themselves.  Can't you change the positioning to use negative X values?
0
 
DesignbyonyxCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now