Drop up Menu? WordPress

• SOLVED

Hello I have a site with a drop down menu, I'm wondering if someone can give me a clue on how to make this menu 'drop up' rather than drop down.

Here is the css for the nav at the moment:


#primary-nav{width:615px; height:38px; background:#FFF url(images/menubg.gif) repeat-x; float:right; margin:150px 0 0 0; padding:0 0 0 65px, font-weight:normal}
#primary-nav ul{margin:0; padding:0; list-style:none; line-height:40px}
#primary-nav ul a{display:block; position:relative}
#primary-nav ul li{float:left; position:relative}
#primary-nav ul li:hover{visibility:inherit}
#primary-nav ul ul{position:absolute; top:-9999em; width:150px}
#primary-nav ul ul li{}

#primary-nav ul li:hover ul,
#primary-nav ul li.sfHover ul{left:0; top:38px; z-index:99}

#primary-nav ul li:hover li ul,
#primary-nav ul li.sfHover li ul,
#primary-nav ul li li:hover li ul,
#primary-nav ul li li.sfHover li ul,
#primary-nav ul li li li:hover li ul,
#primary-nav ul li li li.sfHover li ul{top:-9999em}

#primary-nav ul li li:hover ul,
#primary-nav ul li li.sfHover ul,
#primary-nav ul li li li:hover ul,
#primary-nav ul li li li.sfHover ul,
#primary-nav ul li li li li:hover ul,
#primary-nav ul li li li li.sfHover ul{left:179px; top:0}

#primary-nav ul{font-size:12px; text-transform:uppercase; font-weight:bold; }

#primary-nav ul li{}
#primary-nav ul a{padding:0 8px; background:#FFF; color:#000;}
#primary-nav ul a:hover,
#primary-nav ul li.sfHover a,
#primary-nav ul li.current-cat a,
#primary-nav ul li.current-menu-item a{text-decoration:none; color:#FF0000}

#primary-nav ul ul{padding:0 5px; background:#FFF;}
#primary-nav ul ul li{height:20px; line-height:20px; border:none; padding:0; float:none}
#primary-nav ul ul li a{line-height:20px; height:20px}
#primary-nav ul li.sfHover ul a{color:#000; background:#FFF; padding:0 5px}
#primary-nav ul li.sfHover ul li:first-child a{background:none}
#primary-nav ul li.sfHover ul a:hover{color:#FF0000}

#primary-nav ul ul ul{padding:0; -moz-border-radius:0 2px 2px 0; -webkit-border-bottom-left-radius:0; -webkit-border-top-right-radius:2px}
#primary-nav ul ul li.sfHover, #primary-nav ul ul li.sfHover, #primary-nav ul ul a:focus, #primary-nav ul ul a:hover, #primary-nav ul ul a:active{outline:0}

Answers (3)

2011-06-20

Christianto answers:

Hi Ross,


change <em>#primary-nav ul li:hover ul, #primary-nav ul li.sfHover ul</em> "top" value to minus, and the pixel value, depend on how height your drop menu..
Its little hard, since your menu not always have a specific height..


#primary-nav ul li:hover ul,
#primary-nav ul li.sfHover ul{left:0; top:-70px; z-index:99}


in your site I see -70px is enough..

---

Ross Gosling comments:

Thank you Christianto, this worked well. Thanks! I will award you the fee when I can.

2011-06-20

Rashad Aliyev answers:

Hello,

I suggest you SuperFish ( http://plugins.jquery.com/project/Superfish )

---

Rashad Aliyev comments:

Examples of the SuperFish: [[LINK href="http://users.tpg.com.au/j_birch/plugins/superfish/"]]http://users.tpg.com.au/j_birch/plugins/superfish/[[/LINK]]

2011-06-20

Jimish Gamit answers:

change the "top" value to minus
#primary-nav ul li:hover ul, #primary-nav ul li.sfHover ul {left: 0;top:-50px; z-index:99 }