Help - Search - Members - Calendar
Full Version: Hover links?!?!?!?!?!
Forums > Resource Center > Webmasters' Corner > Webmasters' Corner Resolved Topics
emberfly
Jul 13 2009, 03:41 AM
I want links like the ones CB has. I have absolutely no idea what they're called. I think there used to be a script on here at some point in time, by I couldn't find it today... sad.gif

The links I'm talking about are the ones that say
"Layouts, Graphics, Scripts, Tutorials, Affiliates, Tracker, Members, Forums"

When you hover them, there is a drop down of even more links...

How do I do that? I did search Google, and I found some similar to that, but they only worked in Firefox sad.gif


Help would be appreciated biggrin.gif
synapse
Jul 13 2009, 03:55 AM
http://www.codestyle.org/javascript/dom/cs...ntalMenus.shtml
emberfly
Jul 13 2009, 09:30 AM
is there one that wouldn't require that i have a website? ^_^
Mickey
Jul 13 2009, 09:38 AM
What kind of page are you trying to do this with?
emberfly
Jul 13 2009, 10:00 AM
what?
Mickey
Jul 13 2009, 10:09 AM
Are you trying to do this on a MySpace page or what?
emberfly
Jul 13 2009, 10:12 AM
http://www.xanga.com
Mickey
Jul 13 2009, 10:34 AM
I don't think you'll be able to find a dropdown-menu code that doesn't require uploading a JavaScript file. Never mind, found one.
fixtatik
Jul 13 2009, 10:53 AM
You mean like a purely CSS drop-down menu? This could work:
CODE
.navigation, .navigation * { margin:0; padding:0; list-style:none; }
.navigation { line-height:1em; }
.navigation ul { position:absolute; top:-999em; width:10em; }
.navigation li { float:left; position:relative; }
.navigation li:hover { visibility:inherit; }
.navigation li:hover ul { left:0; top:1em; z-index:99; }
.navigation li li { width:100%; }
.navigation a { display:block; position:relative; }

And the HTML:
CODE
<ul class="navigation">
  <li><a href="#">Link 1</a>
    <ul>
      <li><a href="#">Sub Link 1</a></li>
      <li><a href="#">Sub Link 2</a></li>
      <li><a href="#">Sub Link 3</a></li>
    </ul>
  </li>
  <li><a href="#">Link 2</a>
    <ul>
      <li><a href="#">Sub Link 1</a></li>
      <li><a href="#">Sub Link 2</a></li>
      <li><a href="#">Sub Link 3</a></li>
    </ul>
  </li>
</ul>
emberfly
Jul 13 2009, 11:09 AM
That is the code I tried that worked perfectly in Firefox, but stupid ole IE wouldn't accept it. sad.gif

Thanks, though.
Mickey
Jul 13 2009, 05:37 PM
Is this alright for closing then? Because if that didn't work, I'm afraid you most likely won't find another CSS-based dropdown menu code that's compatible on all major browsers. Sorry.
fixtatik
Jul 13 2009, 07:42 PM
It works in IE8. IE8 isn't so bad anyway, and Microsoft is donating 8 meals to charity for every download of IE8.

I could probably tweak it so it works in earlier versions...
emberfly
Jul 14 2009, 03:25 PM
I thought I was using IE 8, but I'll check again. Thanks.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.