Change CSS drop down menu in a drop up menu

Question

I'm almost certain this question has been answered in one form or another. Applying the changes I've found here and elsewhere doesn't seem to get me any further.

I'm trying to change the css menu from crisislab.nl from a drop-down menu to a drop-up menu. (As you can see on the site I'm currently working on it.)

Current problem I'm encountering is the fact that menu seems to be working fine, expect for the fact that the menu text is displayed downwards and while the menu is moving up (If this doesn't sound logical, please look at crisislab.nl)

See the code below for my current progress. Anyone willing to assist?

Many thanks in advance!

                #navigation {
                width: 980px;
                height: 38px;



        }
            #navigation li {
                float: left;
                position: relative;

                               top: 220px;
            } #navigation li:hover { background: transparent  url(gfx/navigation_hover.png) repeat; }
                #navigation li a {
                    text-transform: uppercase;
                    color: white;
                    padding: 13px 33px;
                    line-height: 38px;
                    font-size: 11px;
                }
                    #navigation li a:hover { text-decoration: none;}
                    #navigation li ul {

                        position: absolute;
                        background: transparent  url(gfx/navigation_hover.png) left top repeat;
                        z-index: 1000;
                        min-width: 100%;
                                                 display:none; 
                                                left:-1px;
                    }
                    #navigation li:hover ul {


                                                        display:block;   

                    }
                        #navigation li ul li {
                            background: none;
                            width: 100%;
                    }
                            #navigation li ul  li:hover {
                                    background: none;
                                background-color: #2a51b5;



                            }
                            #navigation li ul li a {
                                text-transform: uppercase;
                                color: white;
                                padding-left: 8px 10px;
                                line-height: 28px;
                                width: 100%;
                                display:block;



                            }

I'll do so when it's fixed. Currently working on it and hopefully done in ten minutes or so. — Nathan Quite
– Nathan Quite, Commented Jun 8, 2012 at 9:23
and, how far are you with your menu? Can you apply the changes to the example-fiddle please? — Christoph
– Christoph, Commented Jun 8, 2012 at 11:51
Unfortunately still not there. I've added the changes. This makes the menu move up and the text move down (if you understand what I mean). — Nathan Quite
– Nathan Quite, Commented Jun 8, 2012 at 12:19
No not really, and if you want to address a comment to me add @Christoph in front of it, else i won't get notified. Have you tried my example fiddle? Can you explain your problem with the help of it? — Christoph
– Christoph, Commented Jun 8, 2012 at 14:08

Christoph · Accepted Answer · 2012-06-08 09:09:17Z

3

The basic difference from a dropdown to a dropup is the offset of the child ul:

Dropdowns have top:<x>px; and if you want a dropup you just say: bottom:<x>px;

I modified your code to make it work: http://jsfiddle.net/fJSVz/

Basically i changed the following rules:

#navigation li ul {
     top: -9999px;        /* <- removed */
     display:none;        /* <- this will trigger the hide/show */
}
#navigation li:hover ul {
     bottom:20px;         /* <- this is the trick to push the ul up */
     display:block;       /* <- show the ul on hover */
}

edited Jun 8, 2012 at 9:09

answered Jun 8, 2012 at 8:59

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nathan Quite Over a year ago

Thanks! I'll see if I can fix it. I'm a bit of a novice and basically correcting someone elses mistakes but I should get there :-).

Christoph Over a year ago

@NathanQuite Try that out and play around a bit, if you have any further problems - just ask;)

Nathan Quite Over a year ago

At this point I seem to be stuck somewhere when trying to apply your changes to the site (see crisislab.nl). I've been able to put the menu in the right place, but now the text apears to being going down again instead of up. Any extra help would be much appreciated!

Nathan Quite Over a year ago

I've changed the code above to let you know what my last changes are.

Collectives™ on Stack Overflow

Change CSS drop down menu in a drop up menu

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related