4 replies [Last post]
Lohengryn
Offline
newbie
Last seen: 5 years 12 weeks ago
Joined: 2009-06-07
Posts: 2
Points: 0

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: &quot;It's Italian for EVERYTHING!&quot;</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>&nbsp;</p>
    			<p>&nbsp;</p>
			</div>
				<div id="containerfoot">
  					<div id="textblock">
 
<!-- InstanceBeginEditable name="EditRegion1" -->
 
            			<p>xxxxxxxxxxxxx</p>
            			<p>xxxxxxxxxxxxx</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
 
<!-- InstanceEndEditable -->
 
            		</div>
				</div>
	  </div>
</div>
</body>
<!-- InstanceEnd -->
</html>

Thanks,
Matt

hizuka007
hizuka007's picture
Offline
Regular
Last seen: 2 years 50 weeks ago
Timezone: GMT-7
Joined: 2008-06-09
Posts: 22
Points: 0

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

Smiles open closed doors

Lohengryn
Offline
newbie
Last seen: 5 years 12 weeks ago
Joined: 2009-06-07
Posts: 2
Points: 0

no js

But I've built this menu without java script.

Matt

hizuka007
hizuka007's picture
Offline
Regular
Last seen: 2 years 50 weeks ago
Timezone: GMT-7
Joined: 2008-06-09
Posts: 22
Points: 0

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.

Smiles open closed doors

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 15 hours 56 min ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15650
Points: 2788

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
}

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me