mcpilot1
asked on
"drop up" footer menu
I am desperately trying to get this menu to pop up from the "home" button. A standard drop-down style, but since it's on the footer, dropping "up". I have tried a million different CSS tweaks and Its not working.
This is the URL
http://www.ewebdesignz.com
This is the HTML for the drop up
And this is the CSS such as it is:
My goal is to get the <li>Home</li> on hover to display the remaining list items in a veritical list growing up from the footer.
Thank you
This is the URL
http://www.ewebdesignz.com
This is the HTML for the drop up
<ul id="navigation" class="navigation">
<li data-slide="1">Home</li>
<ul class="dropup">
<li data-slide="2">About </li>
<li data-slide="8">Menu & Wines</li>
<li data-slide="22">Staff</li>
<li data-slide="25">Events</li>
<li data-slide="23">Private Dining</li>
<li data-slide="24">Press</li>
<li data-slide="10">Contact</li>
</ul>
<div class="clear"></div>
</ul>
And this is the CSS such as it is:
.navigation {cursor:pointer;}
ul.dropup {display:none}
#navigation .dropup li:hover{display:block;position:absolute:margin:0 0 0 -15px;}My goal is to get the <li>Home</li> on hover to display the remaining list items in a veritical list growing up from the footer.
Thank you
ASKER
It works in princicpal but I think because everything is contained within the main "home" <li>, the navigation keeps rolling back up home.
http://www.ewebdesignz.com/blt/
you can roll over the footer on the left where it says "PLACITA" and you'll see the dropup. Click on something like "press" and you will see it roll down to press then right back home. Any solution for this?
http://www.ewebdesignz.com/blt/
you can roll over the footer on the left where it says "PLACITA" and you'll see the dropup. Click on something like "press" and you will see it roll down to press then right back home. Any solution for this?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
SCORE!!! THAT WORKS!
Thank you. I have been tearing out what is left of my hair for 3 straight days. I can now style it and we're good to go. Thank you!!
Thank you. I have been tearing out what is left of my hair for 3 straight days. I can now style it and we're good to go. Thank you!!
Glad that worked for you. Thanks for the points.
.navigation {cursor:pointer;position:r
ul.dropup {display:none}
#navigation li:hover ul.dropup { display:block;position:abs
HTML:
<ul id="navigation" class="navigation">
<li data-slide="1">
Home
<ul class="dropup">
<li data-slide="2">About </li>
<li data-slide="8">Menu & Wines</li>
<li data-slide="22">Staff</li>
<li data-slide="25">Events</li
<li data-slide="23">Private Dining</li>
<li data-slide="24">Press</li>
<li data-slide="10">Contact</l
</ul>
</li>
</ul>
Works on a page by itself. Some other css definitions may need to be tweaked when it's incorporated in your complete page.