Mon, 2009-06-08 00:36
Greetings,
I'm very new to css. I've just completed the new site for my theatre company (we're a small nonprofit, so I've had to do it myself and I apologize if my lack of knowledge has made for really messy code or anything): http://www.TuttoTheatre.org, I used a menu generator for the menu (but that required java and I wanted something more purely css), and I'm quite happy with the result (the site as a whole), except that the sub-menu isn't horizontal as I would like it to be. So I've built a new menu from the ground up with some tutorial help, and I've uploaded a test page with no live links (http://www.TuttoTheatre.org/Templates/test.html). I've got it horizontal but the hover is still "slippery" for lack of a better term, meaning it's difficult to move from the menu to the sub-menu without the sub-menu disappearing before you can select anything. This is driving me nuts, any help would be greatly appreciated.
Here's the CSS for my site (the menu class id is "navigation"):
@charset "UTF-8"; body { font-family: Verdana, Arial, Helvetica, sans-serif; background-position: center top; color: #464128; margin: 0px auto 0px auto; font-size: 8pt; line-height: 16pt; text-align: center; behavior: url(csshover.htc); } #intro { background-color: transparent; margin-right: auto; margin-left: auto; height: 100px; padding-left: 120px; padding-top: 10px; font-size: 10px; } #containerBorder { font-family: Verdana, Arial, Helvetica, sans-serif; background-image: url(../images/border.png); background-repeat: repeat-y; background-position: center top; position: relative; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 1042px; } #containerhead { font-family: Verdana, Arial, Helvetica, sans-serif; background-image: url(../images/head.png); background-repeat: no-repeat; background-position: center top; position: relative; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; overflow: hidden; width: 1042px; font-size: 10px; } #containerfoot { font-family: Verdana, Arial, Helvetica, sans-serif; background-image: url(../images/foot.png); background-repeat: no-repeat; background-position: center bottom; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; position: relative; overflow: hidden; } #textblock { margin-left: 301.625px; position: relative; top: -25px; right: 0px; margin-right: 241px; overflow: hidden; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333333; font-size: 14px; padding: 13.5px; } #navigation { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; width: 900px; height: 40px; } #navigation ul { margin: 0px; padding: 0px; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; } #navigation ul li { display: inline; float: left; list-style: none; position: relative; border-width: 0px 1px 0px 1px; border-style: solid; margin-left: 3px; margin-top: 3px; margin-bottom: 0px; padding-left: 8px; padding-right: 8px; padding-top: 0px; padding-bottom: 0px; font-size: 10px; } #navigation li a { color: #333333; text-decoration: none; font-size: 10px; } #navigation li a:hover { color: #555555; text-decoration: underline; } #navigation li ul { margin-top: 2px; text-align: center; display: none; position: absolute; float:left; font-size: 10px; } #navigation li:hover ul { display: block; width: 160px; font-size: 10px; } #navigation li li { list-style:none; display: list-item; height: 20px; border-width: 0px 1px 0px 1px; border-style: solid; padding-left: 8px; padding-right: 8px; padding-top: 0px; padding-bottom: 0px; margin-left: 3px; margin-top: 3px; margin-bottom: 0px; float: left; left: -12px; z-index: 1; font-size: 10px; top: -4px; } #navigation li li a { color: #333333; text-decoration: none; } #navigation li li a:hover { color: #555555; text-decoration: underline; margin-top: 0px; } p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; text-align: justify; background-color: transparent; margin-top: 0px; text-align: justify; } a { text-decoration: none; color: #333333; padding-right:3px; padding-left:3px; font-family: Verdana, Arial, Helvetica, sans-serif; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #333333; border-left-color: #333333; font-size: 12px; } a:visited { color: #555555; background-color: transparent; } a:hover { text-decoration: underline; color: #555555; } h1 { font-size:22px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333333; text-align: left; } h2 { font-size:18px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333333; text-align: left; } h3 { font-size: 16px; color: #333333; text-align: left; } .showname{ font-style:italic; } .red-emphasis { color: #F00; } .blue-emphasis { color: #00F; } p.indent { margin-left: 30px; } .centered { text-align: center; } .indent-dble { margin-left: 40px; } .indent-triple { margin-left: 60px; } .twelve { font-size: 12px; margin-left: 20px; }
Here's the html for the test page (please ignore the Dreamweaver template crap, I know it's probably messy, but I like being able to change every page all at once and when I started this new site a few weeks ago, I didn't know CSS):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" ><!-- InstanceBegin template="/Templates/new-noregions copy.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="TUTTO Theatre Company: Austin's Most Exciting Theatrical Experience." /> <meta name="Keywords" content="Austin theater,theatre, community theater,theatre, Texas, theatrical adaptation, classical theatre, theater, multi-disciplinary theatre,theater, dustin wills, multidisciplinary theatre, theater, collaboration, performing arts, english theatre of rome, half-price tickets, acting workshops, dance workshops, live shows, acting classes, attractions, what's playing, music, dance, rehearsal, auditions, ondine, giraudoux, ophelia, alan bennett, kafka's *beep*, eugene ionesco, edward albee, mikhail bulgakov, black snow, interdisciplinary theatre, theater" /> <meta name="verify-v1" content="TOKhfZU/tc/UIpSP9xWMbwgrMTO7r/kyF3/yHnRH2zY=" /> <meta http-equiv="Content-Language" content="en-us" /> <meta name="copyright" content="Tutto Theatre Company" /> <meta name="author" content="Matthew Ervin" /> <meta name="revisit-after" content="7 days" /> <meta name="robots" content="all" /> <!-- Geo --> <meta name="geo.position" content="30.27;-97.74" /> <meta name="geo.region" content="US-TX" /> <meta name="geo.placename" content="Austin" /> <meta name="geo.country" content="US" /> <!-- InstanceBeginEditable name="doctitle" --> <title>TUTTO Theatre Company: "It's Italian for EVERYTHING!"</title> <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="head" --> <!-- InstanceEndEditable --> <style type="text/css"> <!-- #apDiv1 { position:absolute; width:164px; height:50px; z-index:1; left: 100px; top: 600px; } --> </style> <link href="../css/tutto copy.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="containerBorder"> <div id="containerhead"> <div id="intro"> <div id="navigation"> <ul> <li><a href="#" style="border:none">HOME</a></li> <li><a href="#" style="border:none">ABOUT US</a> <ul style="width: 310px"> <li><a href="#" style="border:none">WHO WE ARE</a></li> <li><a href="#" style="border:none">ARTISTIC DIRECTOR</a></li> <li><a href="#" style="border:none">LINKS</a></li> </ul> </li> <li><a href="#" style="border:none">THIS SEASON</a></li> <li><a href="#" style="border:none">PAST SEASONS</a> <ul style="width: 270px"> <li><a href="#" style="border:none">2006-2007</a></li> <li><a href="#" style="border:none">2005-2006</a></li> <li><a href="#" style="border:none">2004-2005</a></li> </ul> </li> <li><a href="#" style="border:none">GIVE</a> <ul style="width: 340px"> <li><a href="#" style="border:none">DONATE</a></li> <li><a href="#" style="border:none">SPONSOR</a></li> <li><a href="#" style="border:none">WISHLIST</a></li> <li><a href="#" style="border:none">VOLUNTEER</a></li> </ul> </li> <li><a href="#" style="border:none">PRESS</a> <ul style="width: 440px"> <li><a href="#" style="border:none">CURRENT</a></li> <li><a href="#" style="border:none">RELEASES</a></li> <li><a href="#" style="border:none">P/REVIEWS</a></li> <li><a href="#" style="border:none">FEATURES</a></li> <li><a href="#" style="border:none">PRESS KITS</a></li> </ul> </li> <li><a href="#" style="border:none">BLOG</a></li> <li><a href="#" style="border:none">TICKETS</a></li> <li><a href="#" style="border:none">CONTACT</a></li> </ul> </div> <p> </p> <p> </p> </div> <div id="containerfoot"> <div id="textblock"> <!-- InstanceBeginEditable name="EditRegion1" --> <p>xxxxxxxxxxxxx</p> <p>xxxxxxxxxxxxx</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <!-- InstanceEndEditable --> </div> </div> </div> </div> </body> <!-- InstanceEnd --> </html>
Thanks,
Matt
Mon, 2009-06-08 00:55
#1
i can tell without looking
i can tell without looking at your code that the problem the GAP between the MAIN menu and the SUBMENU.
so, to fix this problem you should move the SUBMENU container UP a little bit so that there is no GAP between them, so that the MOUSEOUT event in javascript will not be executed when to hover down to the SUBMENU
Mon, 2009-06-08 01:36
#2
no js
But I've built this menu without java script.
Matt
Mon, 2009-06-08 02:57
#3
yes i know, sorry for saying
yes i know, sorry for saying about javascript.
but again, you should move your SUBMENU container UP a little bit. just ad TOP: -(values);
example:
.qmmc ul{
top: -5px; /* adjust it until the gap disappear */
}
just add that TOP thing inside your (.qmmc ul) css.
Mon, 2009-06-08 08:24
#4
Your problem lies with the
Your problem lies with the margin top you have used on the sub ul which is creating a gap between it and it's parent it's that gap that causes problems as you loose focus of the hover element at that point.
#navigation li ul { <span style="font-weight:bold">margin-top: 2px;</span> <<<<<< remove this! <span style="font-weight:bold">padding-top: 2px;</span><<<<<< could be used instead as it remains part of the ul dimensions text-align: center; display: none; position: absolute; float:left; font-size: 10px; } #navigation li li { list-style:none; display: list-item; height: 20px; border-width: 0px 1px 0px 1px; border-style: solid; padding-left: 8px; padding-right: 8px; padding-top: 0px; padding-bottom: 0px; margin-left: 3px; margin-top: 3px; margin-bottom: 0px; float: left; left: -12px; z-index: 1; font-size: 10px; <span style="font-weight:bold">top: -4px;</span><<<<<<< remove this it's unnecessary and is just trying to compensate for earlier issues }