StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PODrop-down menu that opens UP/upward CSS
text
Body
copied!<p>I'm fairly new to CSS so if someone can help me I'd be very appreciative!!! I need to make a dropdown menu that drops up not down, since the nav bar is at the bottom of the page.</p> <p>Here is the CSS for the nav bar</p> <pre><code>* 5. Navigation * ************************************************/ #navigation { background: #000000; height: 30px; width: 100%; font-size: 0.8em; font-family: Arial, Helvetica, sans-serif; font-style: normal; color: #666666; font-weight: normal; margin: 0px auto 1px; padding: 0px 0px 0px 0px; position: relative; z-index: 9; } /*** ESSENTIAL STYLES ***/ .menu, .menu * { margin: 0; padding: 0; list-style: none; } .menu { line-height: 1.0; } .menu ul { margin: 0px; padding: 0px; } .menu ul ul, ul.menu ul { position: absolute; top: -9999px; width: 180px; /* left offset of submenus need to match (see below) */ } .menu ul li ul li, ul.menu ul li { width: 100%; border: none; margin: 0px 0px 0px 0px; } .menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .menu li { float: left; position: relative; } .menu a { display: block; position: relative; } .menu li:hover ul, .menu li.sfHover ul { left: 0; top: 30px; /* match top ul list item height */ z-index: 99; } ul.menu li:hover li ul, ul.menu li.sfHover li ul { top: -9999px; } ul.menu li li:hover ul, ul.menu li li.sfHover ul { left: 180px; /* match ul width */ top: 0; } ul.menu li li:hover li ul, ul.menu li li.sfHover li ul { top: -9999px; } ul.menu li li li:hover ul, ul.menu li li li.sfHover ul { left: 180px; /* match ul width */ top: 0; } /*** SKIN ***/ #navigation .menu .current_page_item a, #navigation .menu .current_page_ancestor a, #navigation .menu .current-menu-item a, #navigation .menu .current-cat a { background: #000000; color: #FFFFFF; } #navigation .menu li .current_page_item a, #navigation .menu li .current_page_item a:hover, #navigation .menu li .current-menu-item a, #navigation .menu li .current-menu-item a:hover, #navigation .menu li .current-cat a, #navigation .menu li .current-cat a:hover { background: #242424; color: #FFFFFF; } #navigation .menu .current_page_item ul li a, #navigation .menu .current-menu-item ul li a, #navigation .menu .current-menu-ancestor ul li a, #navigation .menu .current_page_ancestor ul li a, #navigation .menu .current-cat ul li a { background: #FFFFFF; color: #333333; } #navigation .menu .current_page_item ul li a:hover, #navigation .menu .current-menu-item ul li a:hover, #navigation .menu .current-menu-ancestor ul li a:hover, #navigation .menu .current_page_ancestor ul li a:hover, #navigation .menu .current-menu-ancestor ul .current_page_item a, #navigation .menu .current_page_ancestor ul .current-menu-item a, #navigation .menu .current-cat ul li a:hover { background: #F2F2F2; color: #000000; } #navigation .menu .current_page_item .sub-menu a, #navigation .menu .current_page_ancestor .sub-menu a, #navigation .menu .current-menu-item .sub-menu a, #navigation .menu .current-cat .sub-menu a { background: #FFFFFF; color: #333333; } #navigation .menu .current_page_item .sub-menu a:hover, #navigation .menu .current_page_ancestor .sub-menu a:hover, #navigation .menu .current-menu-item .sub-menu a:hover, #navigation .menu .current-cat .sub-menu a:hover { background: #F2F2F2; color: #000000; } .menu { float: left; margin-bottom: 0; } .menu a { background: #000000; text-decoration: none; font-style: normal; font-weight: normal; line-height: 30px; margin: 0px 1px 0px 0px; padding: 0px 10px 0px 10px; } .menu a, .menu a:link, .menu a:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #999999; } .menu a:focus, .menu a:hover, .menu a:active { background: #000000; color: #FFFFFF; outline: 0; } .menu li li a, .menu li li a:link, .menu li li a:visited { background: #FFFFFF; color: #666666; margin: 0px; padding: 0px 10px 0px 10px; text-decoration: none; text-transform: none; text-shadow: none; border: none; } .menu li li a:focus, .menu li li a:hover, .menu li li a:active { background: #F2F2F2; color: #333333; border-bottom: none; outline: 0; } .menu li.sfHover a { background: #FFFFFF; color: #333333; } .menu li { margin: 0px; } .menu li li { border: none; } .menu li:hover, .menu li.sfHover { background: none; border-bottom: none; outline: 0; } .menu li li:hover, .menu li li.sfHover { padding: 0px; border: none; outline: 0; } /*** ARROWS **/ .menu a.sf-with-ul { padding-right: 25px; min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */ } .sf-sub-indicator { position: absolute; display: block; right: 10px; top: 9px; /* IE6 only */ width: 10px; height: 10px; text-indent: -9999px; overflow: hidden; background: url(images/arrows-ffffff.png) no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */ } a > .sf-sub-indicator { /* give all except IE6 the correct values */ top: 9px; background-position: 0 -100px; /* use translucent arrow for modern browsers*/ } /* apply hovers to modern browsers */ a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator { background-position: -10px -100px; /* arrow hovers for modern browsers*/ } /* point right for anchors in subs */ .menu ul ul .sf-sub-indicator, ul.menu ul .sf-sub-indicator { background-position: -10px 0; } .menu ul ul a > .sf-sub-indicator, ul.menu ul a > .sf-sub-indicator { top: 8px; background-position: 0 0; } /* apply hovers to modern browsers */ .menu ul ul a:focus > .sf-sub-indicator, .menu ul ul a:hover > .sf-sub-indicator, .menu ul ul a:active > .sf-sub-indicator, .menu ul ul li:hover > a > .sf-sub-indicator, .menu ul ul li.sfHover > a > .sf-sub-indicator { background-position: -10px 0; /* arrow hovers for modern browsers*/ } /*** shadows for all but IE6 ***/ .sf-shadow ul ul { background: none; padding: 0 8px 9px 0; -moz-border-radius-bottomleft: 17px; -moz-border-radius-topright: 17px; -webkit-border-top-right-radius: 17px; -webkit-border-bottom-left-radius: 17px; } .sf-shadow ul.sf-shadow-off { background: transparent; } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload