I have a menu I'm working on based on Eric Meyers tutorial on pure css menus. Everything is like I want it except...
Here is the link : http://shop.sylvanmusiconline.com
The only sub menu at this time is under "Acoustic Guitars"
When I hover over Acoustic Guitars, the sub menu appears. If I hover down the list at the far right of the sub menu, everything works. But if I get too close to the main menu - only on the buttons that are beside the menu, not falling below - it vanishes. So, in this example, Breedlove to Larrivee are broken.
Tested on Mac with Firefox and Safari. I know it doesn't work on IE but I will provide submenus as pages to handle that.
The Menu code:
Code:
<style type="text/css">
/**************************************************/
#navcontainer { z-index:3; position: relative; text-decoration: none;}
ul {padding: 0; margin: 0; font: 1em sans-serif;}
ul li {list-style-type: none; position: relative; margin: 0; padding: 0;}
ul ul {display: none;}
ul li:hover > ul {display: block; position: absolute; top: 0em; left: 10.4em;}
li a {display: block; padding: 3px; width: 10em; color: #ffffff; background-color: #660000; border-bottom: 1px solid #eee; text-decoration: none;}
ul#menu li a:hover {background-color: #ffcc00; color:#000;}
li.sub:hover > a {background-color:#880000;}
li.sub > a { background-color: #660000;}
li.sub ul li a { background-color: #880000; }
ul ul {width: 10em;}
/**************************************************/
</style>
<div id="navcontainer">
<ul id="menu">
<li><a href="http://shop.sylvanmusiconline.com/vintage.html">Vintage Room</a></li>
<li class="sub"><a href="http://shop.sylvanmusiconline.com/acoustic.html">Acoustic Guitars</a>
<ul>
<li><a href="http://shop.sylvanmusiconline.com/a&l.html" title="Art & Lutherie Guitars">Art & Lutherie</a></li>
<li><a href="http://shop.sylvanmusiconline.com/breedlove.html" title="Breedlove Guitars">Breedlove</a></li>
<li><a href="http://shop.sylvanmusiconline.com/ca.html" title="CA Guitars">Composite Acoustic</a></li>
<li><a href="http://shop.sylvanmusiconline.com/eastman.html" title="Eastman Guitars">Eastman</a></li>
<li><a href="http://shop.sylvanmusiconline.com/gitane.html" title="Gitane Guitars">Gitane</a></li>
<li><a href="http://shop.sylvanmusiconline.com/goodall.html" title="Goodall Guitars">Goodall</a></li>
<li><a href="http://shop.sylvanmusiconline.com/larrivee.html" title="Larrivee Guitars">Larrivee</a></li>
<li><a href="http://shop.sylvanmusiconline.com/lowden.html" title="Lowden Guitars">Lowden</a></li>
<li><a href="http://shop.sylvanmusiconline.com/norman.html" title="Norman Guitars">Norman</a></li>
<li><a href="http://shop.sylvanmusiconline.com/northwood.html" title="Northwood Guitars">Northwood</a></li>
<li><a href="http://shop.sylvanmusiconline.com/rtaylor.html" title="R. Taylor Guitars">R Taylor</a></li>
<li><a href="http://shop.sylvanmusiconline.com/woltz.html" title="Roy Woltz Guitars">Roy Woltz</a></li>
<li><a href="http://shop.sylvanmusiconline.com/scgc.html" title="Santa Cruz Guitar Company Guitars">Santa Cruz Guitar Co.</a></li>
<li><a href="http://shop.sylvanmusiconline.com/stonebridge.html" title="Stonebridge Guitars">Stonebridge</a></li>
<li><a href="http://shop.sylvanmusiconline.com/walden.html" title="Walden Guitars">Walden</a></li>
</ul>
<li><a href="http://shop.sylvanmusiconline.com/electric.html">Electric Guitars</a></li>
<li><a href="http://shop.sylvanmusiconline.com/amps.html">Amplifiers</a></li>
<li><a href="http://shop.sylvanmusiconline.com/effects.html">Effects</a></li>
<li><a href="http://shop.sylvanmusiconline.com/pickups.html">Pickups</a></li>
<li><a href="http://shop.sylvanmusiconline.com/strings.html">Strings</a></li>
<li><a href="http://shop.sylvanmusiconline.com/index.html">Home</a></li>
</ul>
</div>
Thanks in advance for any insight you folks can provide.
Last edited by Capt.Goodvibes; 07-03-2007 at 03:47 PM..
Reason: add browsers tested
|
