PDA

View Full Version : suckerfish menu



tomdep
Oct 14th, 2008, 03:53 PM
Hi,
I am working on a site. Using Joomla 1.5

I am trying to configure a dropdown menu (suckerfish), no matter what I do I cannot get the damn menu to appear under the correct parent in Internet Explorer.

here is a link to the site: http://www.laminatefabricators.com

The menu code:

<ul id="mainlevelmainnav"><li><a href="/index.php/home.html" class="mainlevelmainnav" id="active_menumainnav">Home</a></li><li><a href="/index.php/about.html" class="mainlevelmainnav">Who We Are</a><ul ><li><a href="/index.php/about/why-choose-duncan-reeds.html" class="sublevelmainnav">Why Choose Duncan Reeds?</a></li><li><a href="/index.php/about/team.html" class="sublevelmainnav">Meet the Team</a></li><li><a href="/index.php/about/join-team.html" class="sublevelmainnav">Join the Team</a></li><li><a href="/index.php/about/environmental.html" class="sublevelmainnav">Environmental Policies</a></li><li><a href="/index.php/about/health-and-safety.html" class="sublevelmainnav">Health and Safety Policy</a></li></ul></li><li><a href="/index.php/duncan-reeds-products.html" class="mainlevelmainnav">What We Do</a><ul ><li><a href="/index.php/duncan-reeds-products/cubicle-systems.html" class="sublevelmainnav">Cubicle Systems & Washrooms</a></li><li><a href="/index.php/duncan-reeds-products/marine-furniture.html" class="sublevelmainnav">Marine Furniture</a></li><li><a href="/index.php/duncan-reeds-products/office-furniture.html" class="sublevelmainnav">Office Furniture</a></li><li><a href="/index.php/duncan-reeds-products/laboratory-furniture.html" class="sublevelmainnav">Laboratory Furniture</a></li><li><a href="/index.php/duncan-reeds-products/wall-liners.html" class="sublevelmainnav">Wall liners</a></li><li><a href="/index.php/duncan-reeds-products/shop-refurbishment.html" class="sublevelmainnav">Shop Refurbishment</a></li></ul></li><li><a href="/index.php/duncan-reeds-services.html" class="mainlevelmainnav">Our Services</a></li><li><a href="/index.php/projects.html" class="mainlevelmainnav">Projects</a></li><li><a href="/index.php/web-links.html" class="mainlevelmainnav">Links</a></li><li><a href="/index.php/contact-duncan-reeds-laminate-fabricators.html" class="mainlevelmainnav">Contact Duncan Reeds</a></li></ul>
</div>

and the CSS for the menu:

/* display and additional classes */
.clear { clear: both }
#twocols { z-index: 20 }
#leftcol { z-index: 10 }
#mainleveltopnav li { list-style-type: none; display: inline; padding-right: 5px }
a.mainleveltopnav,a.mainleveltopnav:link,
a.mainleveltopnav:visited{
color:#f90;
}
.moduletablemainnav { font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; margin: 0; padding: 0; position: absolute; z-index: 100; top: 183px; left: 0 }
#mainlevelmainnav,#mainlevelmainnav ul { font-weight: 700; line-height: 1em; background: transparent; list-style: none; margin: 0; padding: 0; float: left }
#mainlevelmainnav a{
display:block;
color:#f90;
text-decoration:none;
margin-right:15px;
padding:0.3em;
}
#mainlevelmainnav li { padding: 0; float: inherit }
#mainlevelmainnav li ul { font-weight: 400; background-color: #feca50; background-image: none; background-position: 0 0; margin: 0; position: absolute; top: 366px; left: -999em; width: 200px; height: 30px }
#mainlevelmainnav li li { background-color: #f06046; width: 200px; height: 30px }
#mainlevelmainnav li ul a { color: #303030; font-size: 12px; font-weight: 400; background-color: #e0e1e1; width: 200px; height: 30px }
#mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul ul,#mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul ul ul { background-color: #feca50; left: -999em }
#mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover ul,#mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover ul,#mainlevelmainnav li li.sfhover ul,#mainlevelmainnav li li li.sfhover ul { background-color: #feca50; z-index: 6000; left: auto }
#mainlevelmainnav li li:hover,#mainlevelmainnav li li.sfhover { background: #039 no-repeat 98% 50% }


Any help would be thoroughly appreciated.

Cheers

Tom

abduraooft
Oct 14th, 2008, 06:03 PM
Fix the errors in your markup first, see http://validator.w3.org/check?uri=http&#37;3A%2F%2Fwww.laminatefabricators.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Try to follow http://htmldog.com/articles/suckerfish/dropdowns/, which is pretty easy.

(It's very hard for users to concentrate on the menu due to the fast
sliding header)

PS: Welcome to CF!

tomdep
Oct 15th, 2008, 01:37 PM
thanks abduraooft, will look into it.