-1

i made a dropdown menu on top of my page,
i thaught everything went well.
you can see the example @ http://www.thijscream.nl/wijnkado
the only problem is that the page is kinda wide, so the menu isn't centered.
is there a solution for this?
this is my menu:

<div id="menu">
		<ul id="nav" class="dropdown dropdown-horizontal">
			<li class="dir">
				<a href="index.php">Home</a>
			</li>
			<li class="dir">
				<a href="rood.php?id=0&sid=0">Rode wijn</a>
			<ul>
				<li>
					<a href="rood.php?id=Argentinië&sid=0">Argentinië</a>
				</li>
				<li>
					<a href="rood.php?id=Australië&sid=0">Australië</a>
				</li>
				<li>
					<a href="rood.php?id=Californië&sid=0">Californië</a>
				</li>
				<li>
					<a href="rood.php?id=Chili&sid=0">Chili</a>
				</li>
				<li>
					<a href="rood.php?id=Frankrijk&sid=0">Frankrijk</a>
					<ul>
						<?php
						$query = "SELECT id, streek FROM frankrijk WHERE rood = 1 AND land = 'Frankrijk'";
						$result = mysql_query($query) or die('Error : ' . mysql_error());
						while(list($sid, $streek) = mysql_fetch_array($result, MYSQL_NUM))
						{
						?>
							<li>
								<a href="rood.php?id=Frankrijk&sid=<?php echo $sid;?>"><?php echo $streek;?></a>
							</li>
						<?php 
						}
						?>
					</ul>
				</li>
				<li>
					<a href="rood.php?id=Italië&sid=0">Italië</a>
					<ul>
						<?php
						$query = "SELECT id, streek FROM italie WHERE rood = 1 AND land = 'Italie'";
						$result = mysql_query($query) or die('Error : ' . mysql_error());
						while(list($sid, $streek) = mysql_fetch_array($result, MYSQL_NUM))
						{
						?>
							<li>
								<a href="rood.php?id=Italië&sid=<?php echo $sid;?>"><?php echo $streek;?></a>
							</li>
						<?php 
						}
						?>
					</ul>
				</li>
				<li>
					<a href="rood.php?id=Nieuw-Zeeland&sid=0">Nieuw-Zeeland</a>
				</li>
				<li>
					<a href="rood.php?id=Portugal&sid=0">Portugal</a>
				</li>
				<li>
					<a href="rood.php?id=Spanje&sid=0">Spanje </a>
					<ul>
						<?php
						$query = "SELECT id, streek FROM spanje WHERE rood = 1 AND land = 'Spanje'";
						$result = mysql_query($query) or die('Error : ' . mysql_error());
						while(list($sid, $streek) = mysql_fetch_array($result, MYSQL_NUM))
						{
						?>
							<li>
								<a href="rood.php?id=Spanje&sid=<?php echo $sid;?>"><?php echo $streek;?></a>
							</li>
						<?php 
						}
						?>
					</ul>
				</li>
				<li>
					<a href="rood.php?id=Zuid-Afrika&sid=0">Zuid-Afrika</a>
				</li>
				<li>
					<a href="rood.php?id=Overige&sid=0">Overige</a>
				</li>
			</ul>
			
			</li>
			<li class="dir">
				<a href="wit.php?id=0&sid=0">Witte wijn</a>
			<ul>
								<li>
					<a href="wit.php?id=1&sid=0">Argentinië</a>
				</li>
				<li>
					<a href="wit.php?id=2&sid=0">Australië</a>
				</li>
				<li>
					<a href="wit.php?id=3&sid=0">Californië</a>
				</li>
				<li>
					<a href="wit.php?id=4&sid=0">Chili</a>
				</li>
				<li>
					<a href="wit.php?id=5&sid=0">Frankrijk</a>
					<ul>
						<?php
						$query = "SELECT id, streek FROM frankrijk WHERE wit = 1 AND land = 'Frankrijk'";
						$result = mysql_query($query) or die('Error : ' . mysql_error());
						while(list($sid, $streek) = mysql_fetch_array($result, MYSQL_NUM))
						{
						?>
							<li>
								<a href="wit.php?id=5&sid=<?php echo $sid;?>"><?php echo $streek;?></a>
							</li>
						<?php 
						}
						?>
					</ul>
				</li>
				<li>
					<a href="wit.php?id=6&sid=0">Italië</a>
					<ul>
						<?php
						$query = "SELECT id, streek FROM italie WHERE wit = 1 AND land = 'Italie'";
						$result = mysql_query($query) or die('Error : ' . mysql_error());
						while(list($sid, $streek) = mysql_fetch_array($result, MYSQL_NUM))
						{
						?>
							<li>
								<a href="wit.php?id=6&sid=<?php echo $sid;?>"><?php echo $streek;?></a>
							</li>
						<?php 
						}
						?>
					</ul>
				</li>
				<li>
					<a href="wit.php?id=7&sid=0">Nieuw-Zeeland</a>
				</li>
				<li>
					<a href="wit.php?id=8&sid=0">Portugal</a>
				</li>
				<li>
					<a href="wit.php?id=9&sid=0">Spanje </a>
					<ul>
						<?php
						$query = "SELECT id, streek FROM spanje WHERE wit = 1 AND land = 'Spanje'";
						$result = mysql_query($query) or die('Error : ' . mysql_error());
						while(list($sid, $streek) = mysql_fetch_array($result, MYSQL_NUM))
						{
						?>
							<li>
								<a href="wit.php?id=9&sid=<?php echo $sid;?>"><?php echo $streek;?></a>
							</li>
						<?php 
						}
						?>
					</ul>
				</li>
				<li>
					<a href="wit.php?id=10&sid=0">Zuid-Afrika</a>
				</li>
				<li>
					<a href="wit.php?id=11&sid=0">Overige</a>
				</li>
			</ul>
			</li>
			
			<li class="dir">
				<a href="rose.php?id=0&sid=0">Rose wijn</a>
			<ul>
				<li>
					<a href="rose.php?id=3&sid=0">Californië</a>
				</li>
				<li>
					<a href="rose.php?id=5&sid=0">Frankrijk</a>
					<ul>
						<?php
						$query = "SELECT id, streek FROM frankrijk WHERE rose = 1 AND land = 'Frankrijk'";
						$result = mysql_query($query) or die('Error : ' . mysql_error());
						while(list($sid, $streek) = mysql_fetch_array($result, MYSQL_NUM))
						{
						?>
							<li>
								<a href="rose.php?id=5&sid=<?php echo $sid;?>"><?php echo $streek;?></a>
							</li>
						<?php 
						}
						?>
					</ul>
				</li>
				<li>
					<a href="rose.php?id=6&sid=0">Italië</a>
					<ul>
						<?php
						$query = "SELECT id, streek FROM italie WHERE rose = 1 AND land = 'Italie'";
						$result = mysql_query($query) or die('Error : ' . mysql_error());
						while(list($sid, $streek) = mysql_fetch_array($result, MYSQL_NUM))
						{
						?>
							<li>
								<a href="rose.php?id=6&sid=<?php echo $sid;?>"><?php echo $streek;?></a>
							</li>
						<?php 
						}
						?>
					</ul>
				</li>
				<li>
					<a href="rose.php?id=8&sid=0">Portugal</a>
				</li>
				<li>
					<a href="rose.php?id=9&sid=0">Spanje </a>
					<ul>
						<?php
						$query = "SELECT id, streek FROM spanje WHERE rose = 1 AND land = 'Spanje'";
						$result = mysql_query($query) or die('Error : ' . mysql_error());
						while(list($sid, $streek) = mysql_fetch_array($result, MYSQL_NUM))
						{
						?>
							<li>
								<a href="rose.php?id=9&sid=<?php echo $sid;?>"><?php echo $streek;?></a>
							</li>
						<?php 
						}
						?>
					</ul>
				</li>
				<li>
					<a href="rose.php?id=10&sid=0">Zuid-Afrika</a>
				</li>
				<li>
					<a href="rose.php?id=11&sid=0">Overige</a>
				</li>
			</ul>
			</li>
			
			<li class="dir">
				<a href="mouserend.php?id=0&sid=0">Mouserend</a>
			<ul>
				<li>
					<a href="mouserend.php?id=1&sid=0">Frankrijk</a>
				</li>
				<li>
					<a href="mouserend.php?id=2&sid=0">Italië</a>
				</li>
				<li>
					<a href="mouserend.php?id=3&sid=0">Spanje</a>
				</li>
				<li>
					<a href="mouserend.php?id=4&sid=0">Zuid-Afrika</a>
				</li>
			</ul>
			
			</li>
		</ul>

and the thing in css is this:

@charset "UTF-8";

/*
 * @browsers	Windows: IE6+, Opera7+, Firefox1+
 *				Mac OS: Safari2+, Firefox2+
*/

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}

ul.dropdown li {
 float: left;
 line-height: 1.3em;
 vertical-align: middle;
 zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}

if i remove the part where the sub menu is displayed the problem is gone, but that just looks messy.
this part:

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

so do you know what to do?

Edited by happygeek: swearing removed from title

Votes + Comments
do not try and circumvent the bad language filter
2
Contributors
2
Replies
3
Views
6 Years
Discussion Span
Last Post by thijscream
0

The menu looks fine to me

http://i53.tinypic.com/ngy429.png

i know it looks good, but the problem is the page isn't centered because of the menu,
if i remove 1 piece it centered nice,
in your print screen it shows more to the left then to the right.

you should compare these 2:
http://www.thijscream.nl/wijnkado2/
http://www.thijscream.nl/wijnkado/

then you see the menu of the first one isn't working correctly but the width is correct.
on the 2nd the menu works great but there is to much white space on the right.
it should be all centered

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.