• Locked
No replies
Tue, 2009-02-03 14:32
Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 5 years 30 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Hey guys long time no speak.

So the problem I have is that I have a vertical drop down (or right) menu.

For some unknown reason the 2nd unordered list falls a line below the parent list item. As you can understand not too good. So far I have not tested it in any other browsers 'cause firefox usually displays it right.

I have the files here and I will post them. Basicly I have the index.php document, style.css stylesheet and menu.css stylesheet that sorts out the menu so thats probably your best bet.

Although I don't think it is the style.css it could be but this is only used for the wrappers.

I know what it's doing I just don't know why. I have removed all padding and margin (bar left) from the child unordered list.

So heres the documents.

INDEX.PHP / INDEX.HTML

<!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" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<title>Jjcon Web Development &amp; Hosting Solutions</title>
	<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
	<link rel="stylesheet" media="screen" type="text/css" href="menu.css" />
</head>
<!--
 
Slogan: Jjcon - Think Different (Possible)
		Jjcon - be prepared for the future
 
Design> Color Scheme: <a href="http://127.0.0.1/www/jjcon/develop/hex's.html
" rel="nofollow">http://127.0.0.1/www/jjcon/develop/hex's.html
</a>		Simple
		Warming - but not too bright
		JS Lightbox
 
Ideas:  PHP, JavaScript & AJAX programming
		Hosting solutions - only for customers (Services)
		Web Design
		Free domain name
		MySql Programming
 
-->
<body>
 
	<div class="shadow_main_wrapper">
 
		<div id="main_wrapper">
 
			<div id="banner">
 
				<img class="logo_img" src="img/logo_img.png" alt="Logo" />
				<span class="SiteName">Jjcon</span>
				<span class="SiteSlogan">Jjcon - be prepared for the future.</span>
				<span class="SiteDets">PSD 2 XHTML - Website Programming -
				Website Design - Hosting Solutions - Affordable</span>
				<span class="SiteDets2">
				<img src="img/phone.png" alt="Phone" /> 01249 464648
				<img src="img/email.png" alt="Email" /> </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%63%6f%6e%74%61%63%74%40%6a%6a%63%6f%6e%2e%63%6f%2e%75%6b%22%3e%63%6f%6e%74%61%63%74%40%6a%6a%63%6f%6e%2e%63%6f%2e%75%6b%3c%2f%61%3e%27%29%3b'))</script><p></span>
 
			</div>
 
			<div id="content_wrapper">
 
				<div id="left_bar">
 
					<div id="menu_wrapper">
 
						<ul id="nav">
 
							<li><a href="#">Home</a></li>
							<li><a href="#">Web Design</a>
								<ul>
 
									<li><a href="#">Examples</a></li>
									<li><a href="#">Offers</a></li>
									<li><a href="#">Price Guide</a></li>
									<li><a href="#">Quote</a></li>
 
								</ul>
							</li>
							<li><a href="#">Web Programming</a>
								<ul>
 
									<li><a href="#">Examples</a></li>
									<li><a href="#">Offers</a></li>
									<li><a href="#">Price Guide</a></li>
									<li><a href="#">Quote</a></li>
 
								</ul>
							</li>
 
							<li><a href="#">PSD 2 XXX</a>
								<ul>
 
									<li><a href="#">PSD 2 XHTML</a></li>
									<li><a href="#">PSD 2 HTML</a></li>
									<li><a href="#">Examples</a></li>
									<li><a href="#">Offers</a></li>
									<li><a href="#">Price Guide</a></li>
									<li><a href="#">Quote</a></li>
 
								</ul>
							</li>
							<li><a href="#">Hosting Solutions</a>
								<ul>
 
									<li><a href="#">Price Guide</a></li>
 
								</ul>
							</li>
							<li><a href="#">Contact Us</a></li>
 
						</ul>
 
					</div>
 
				</div>
 
				<div id="main_content">
 
					Blah Blah
 
				</div>
 
			</div>
 
			<div id="footer_wrapper">
 
 
 
			</div>
 
		</div>
 
	</div>
 
</body>
</html>

STYLE.CSS

body {
	margin: 0;
	padding: 0;
	background-image: url(img/main_bg.png);
	background-color: #fff;
}
 
.shadow_main_wrapper {
	width: 90%;
	background: url(img/shadow.png);
	padding-top: 0.1em;
	padding-left: 0.6em;
	padding-bottom: 0.6em;
	padding-right: 0.3em;
	margin: 0 auto;
	margin-top: 2em;
}
 
#main_wrapper {
 
 
	width: 100%;
	min-height: 500px;
	margin: 0 auto;
	border: solid 1px #000;
	background: #fff;
}
 
#banner {
	background: url(img/ban_bg.png);
	width: 100%;
	border-bottom: solid 1px #000;
	overflow: hidden;
}
 
#banner .logo_img {
	float: left;
	margin-left: 20px;
}
 
#banner .SiteName {
	font-size: 400%;
	color: #B26B00;
	display: block;
	width: 100%;
	text-align: center;
	font-family: Myriad Pro;
}
 
#banner .SiteSlogan {
	width: 100%;
	display: block;
	text-align: center;
	font-size: 150%;
	color: #fff;
	font-family: Comic Sans MS;
}
 
#banner .SiteDets {
	width: 100%;
	text-align: center;
	display: block;
	color: #cccccc;
	font-family: Tahoma;
}
 
#banner .SiteDets2 {
	width: 100%;
	text-align: center;
	display: block;
	color: #cccccc;
	font-family: Tahoma;
	line-height: 20px;
}
 
#content_wrapper {
	width: 100%;
}
 
#left_bar {
	width: 15%;
	float: left;
}
 
#main_content {
	width: 70%;
	float: left;
}
 
#menu_wrapper {
	width: 100%;
}

MENU.CSS

#nav li ul {
	display: none;
	position: absolute;
	float: right;
	margin: 0;
	padding: 0;
	margin-left: 10%;
}
 
#nav {
	padding: 0;
	margin: 0;
}
 
#nav li:hover ul {
	display: inline;
}
 
#nav li {
	background: #809FFE;
	list-style-type: none;
	padding: 2px;
}
 
#nav li a {
	background: #809FFE;
	border: solid 1px #fff;
	display: block;
	width: 100%;
	text-align: center;
}

Thanks for any help in advance.

EDIT:
For the live thing go here.

Website Design Wiltshire
My Blog

Top
Tags: