Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 245
  • 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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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