Marie: Dropdown menü im CSS zentrieren

Beitrag lesen

SELF-Forum

Dropdown menü im CSS zentrieren

Marie
– Informationen zu den Bewertungsregeln

Hallo liebes Forum,

habe nach stundenlangem Suchen und Überlegen leider keine Idee mehr.. Habe ein fertiges CSS-Dropdownmenü heruntergeladen. Nun versuche ich seit Stunden, dieses zu zentrieren, so dass die einzelnen Menüpunkte zusammengesehen horizontal zentriert sind. Ich habe alles mögliche versucht aber leider bisher ohne Erfolg. Wenn mir jemand von euch helfen könnte, wäre das super super lieb!! Tausend Dank! Ganz ganz liebe Grüße Marie :-)

Das entsprechende CSS-Dokument:

.preload1 {background: url(three_1.gif);}  
.preload2 {background: url(three_1a.gif);}  
  
#nav {padding:0; margin:0; list-style:none; height:38px; background:#fff url(three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}  
#nav li.top {display:block; float:left; height:38px;}  
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#3e3e3e; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(three_0.gif);}  
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0.gif) right top no-repeat;}  
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0a.gif) no-repeat right top;}  
  
#nav li:hover a.top_link {color:#ff0031; background: url(three_1.gif) no-repeat;}  
#nav li:hover a.top_link span {background:url(three_1.gif) no-repeat right top;}  
#nav li:hover a.top_link span.down {background:url(three_1a.gif) no-repeat right top;}  
  
/* Default list styling */  
  
#nav li:hover {position:relative; z-index:200;}  
  
#nav li:hover ul.sub  
{left:1px; top:38px; background: #ffffff; padding:3px; border:1px solid #3e3e3e; white-space:nowrap; width:90px; height:auto; z-index:300;}  
#nav li:hover ul.sub li  
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}  
#nav li:hover ul.sub li a  
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #ffffff;}  
#nav li ul.sub li a.fly  
{background:#ffffff url(arrow.gif) 80px 6px no-repeat;}  
#nav li:hover ul.sub li a:hover  
{background:#bababa; color:#ff0031; border-color:#fff;}  
#nav li:hover ul.sub li a.fly:hover  
{background:#000000 url(arrow_over.gif) 80px 6px no-repeat; color:#fff;}  
  
  
#nav li:hover li:hover ul,  
#nav li:hover li:hover li:hover ul,  
#nav li:hover li:hover li:hover li:hover ul,  
#nav li:hover li:hover li:hover li:hover li:hover ul  
{left:90px; top:-4px; background: #ffffff; padding:3px; border:1px solid #3e3e3e; white-space:nowrap; width:90px; z-index:400; height:auto;}  
  
#nav ul,  
#nav li:hover ul ul,  
#nav li:hover li:hover ul ul,  
#nav li:hover li:hover li:hover ul ul,  
#nav li:hover li:hover li:hover li:hover ul ul  
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}  
  
#nav li:hover li:hover a.fly,  
#nav li:hover li:hover li:hover a.fly,  
#nav li:hover li:hover li:hover li:hover a.fly,  
#nav li:hover li:hover li:hover li:hover li:hover a.fly  
{background:#000000 url(arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;}  
  
#nav li:hover li:hover li a.fly,  
#nav li:hover li:hover li:hover li a.fly,  
#nav li:hover li:hover li:hover li:hover li a.fly  
{background:#ffffff url(arrow.gif) 80px 6px no-repeat; color:#000; border-color:#ffffff;}

Und das entsprechende HTML-Dokument:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<title> stu nicholls dot com | menu - Professional dropdown #2</title>  
<meta name="Author" content="Stu Nicholls" />  
  
<link rel="stylesheet" type="text/css" href="pro_dropdown_2/pro_dropdown_2.css" />  
  
<script src="pro_dropdown_2/stuHover.js" type="text/javascript"></script>  
  
</head>  
  
<body>  
<h1>stunicholls.com</h1>  
<h2>Professional dropdown #2</h2>  
<h3>19th November 2007</h3>  
  
<span class="preload1"></span>  
<span class="preload2"></span>  
  
<ul id="nav">  
	<li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li>  
	<li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">Products</span></a>  
		<ul class="sub">  
			<li><a href="#nogo3" class="fly">Cameras</a>  
					<ul>  
						<li><a href="#nogo4">Nikon</a></li>  
						<li><a href="#nogo5">Minolta</a></li>  
						<li><a href="#nogo6">Pentax</a></li>  
					</ul>  
			</li>  
			<li class="mid"><a href="#nogo7" class="fly">Lenses</a>  
					<ul>  
						<li><a href="#nogo8">Wide Angle</a></li>  
						<li><a href="#nogo9">Standard</a></li>  
						<li><a href="#nogo10">Telephoto</a></li>  
						<li><a href="#nogo11" class="fly">Zoom</a>  
							<ul>  
								<li><a href="#nogo12">35mm to 125mm</a></li>  
								<li><a href="#nogo13">50mm to 250mm</a></li>  
								<li><a href="#nogo14">125mm to 500mm</a></li>  
							</ul>  
						</li>  
						<li><a href="#nogo15">Mirror</a></li>  
						<li><a href="#nogo16" class="fly">Non standard</a>  
							<ul>  
								<li><a href="#nogo17">Bayonet mount</a></li>  
								<li><a href="#nogo18">Screw mount</a></li>  
							</ul>  
						</li>  
					</ul>  
			</li>  
			<li><a href="#nogo19">Flash Guns</a></li>  
			<li><a href="#nogo20">Tripods</a></li>  
			<li><a href="#nogo21">Filters</a></li>  
		</ul>  
	</li>  
	<li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Services</span></a>  
		<ul class="sub">  
			<li><a href="#nogo23">Printing</a></li>  
			<li><a href="#nogo24">Photo Framing</a></li>  
			<li><a href="#nogo25">Retouching</a></li>  
			<li><a href="#nogo26">Archiving</a></li>  
		</ul>  
	</li>  
	<li class="top"><a href="#nogo27" id="contacts" class="top_link"><span class="down">Contacts</span></a>  
		<ul class="sub">  
			<li><a href="#nogo28">Support</a></li>  
			<li><a href="#nogo29" class="fly">Sales</a>  
				<ul>  
					<li><a href="#nogo30">USA</a></li>  
					<li><a href="#nogo31">Canadian</a></li>  
					<li><a href="#nogo32">South American</a></li>  
					<li><a href="#nogo33" class="fly">European</a>  
						<ul>  
							<li><a href="#nogo34" class="fly">British</a>  
								<ul>  
									<li><a href="#nogo35">London</a></li>  
									<li><a href="#nogo36">Liverpool</a></li>  
									<li><a href="#nogo37">Glasgow</a></li>  
									<li><a href="#nogo38" class="fly">Bristol</a>  
										<ul>  
											<li><a href="#nogo39">Redland</a></li>  
											<li><a href="#nogo40">Hanham</a></li>  
											<li><a href="#nogo41">Eastville</a></li>  
										</ul>  
									</li>  
									<li><a href="#nogo42">Cardiff</a></li>  
									<li><a href="#nogo43">Belfast</a></li>  
								</ul>  
							</li>  
							<li><a href="#nogo44">French</a></li>  
							<li><a href="#nogo45">German</a></li>  
							<li><a href="#nogo46">Spanish</a></li>  
						</ul>  
					</li>  
					<li><a href="#nogo47">Australian</a></li>  
					<li><a href="#nogo48">Asian</a></li>  
				</ul>  
			</li>  
			<li><a href="#nogo49">Buying</a></li>  
			<li><a href="#nogo50">Photographers</a></li>  
			<li><a href="#nogo51">Stockist</a></li>  
			<li><a href="#nogo52">General</a></li>  
		</ul>  
	</li>  
	<li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Shop</span></a>  
		<ul class="sub">  
			<li><a href="#nogo54">Online</a></li>  
			<li><a href="#nogo55">Catalogue</a></li>  
			<li><a href="#nogo56">Mail Order</a></li>  
		</ul>  
	</li>  
	<li class="top"><a href="#nogo57" id="privacy" class="top_link"><span>Privacy Policy</span></a></li>  
</ul>  
<p>&copy; 2007 stunicholls.com</p>  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln