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: 1740
  • Last Modified:

"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/blt/

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>
	

Open in new window


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;}

Open in new window


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
0
mcpilot1
Asked:
mcpilot1
  • 3
  • 2
1 Solution
 
Tom BeckCommented:
CSS:

.navigation {cursor:pointer;position:relative}
ul.dropup {display:none}
#navigation li:hover ul.dropup { display:block;position:absolute;bottom:20px;margin:0 0 0 -15px; }

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</li>
       </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.
0
 
mcpilot1Author Commented:
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?
0
 
Tom BeckCommented:
What if you arranged it like this?:

<ul id="navigation" class="navigation">
   <li>
       Menu
       <ul class="dropup">
           <li data-slide="1">Home</li>
           <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>
    </li>
</ul>

To get the sub menu to open using only css, the sub menu has to be a child of the parent <li>. Otherwise there's no way to access it using css when the <li> parent is hovered.

I think the above arrangement would be less confusing for the end user. Many users will click on "Home" with the intention of opening the submenu and the page will move away from where they want to be. Better to just have "Home" as one of the menu options.
0
 
mcpilot1Author Commented:
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!!
0
 
Tom BeckCommented:
Glad that worked for you. Thanks for the points.
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.

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