6 Replies - 704 Views - Last Post: 16 May 2013 - 03:32 PM

#1 DaiToBu  Icon User is offline

  • D.I.C Head

Reputation: -1
  • View blog
  • Posts: 93
  • Joined: 17-March 12

What wrong with my drop down menu?

Posted 16 May 2013 - 11:36 AM

I am currently testing out the drop down menu for my website. If I put the menu on the top of the page, then it work correctly. If I put the code below the header, then there is a problem. When I hover over the menu, it will display the submenu, but when I tried to move my mouse to the submenu, the submenu close itself. Here are my html and css code.

HTML.php
<!-- The <!DOCTYPE> declaration is supported in all major browsers. -->
<!DOCTYPE HTML>
<meta charset="utf-8">
<title>7503.us</title>
<head></head>
<html>
	<body>
		<div id="container">
			<!DOCTYPE HTML>
<html>
	<head>
		<link href="style.css" rel="stylesheet" type="text/css">
		<LINK REL=StyleSheet HREF="popup.css" TYPE="text/css">
	</head>
	<body>
		<script type="text/javascript">
			var link;
			var element;
			function openPopUp(url) {
				link = url;
				element = document.getElementById("background");
				element.style.display = "block";
				element = document.getElementById("popup");
				element.style.display = "block";

			}

			function closePopUp() {
				element = document.getElementById("popup");
				element.style.display = "none";
				element = document.getElementById("background");
				element.style.display = "none";
			}

		</script>
		<div id="header">
			<div class="header">
				7503.us
			</div>
		</div>
		
		
				<!-- Start Multi Menu-->
		<div id="menu">
			<ul>
				<li><a href="#">Home</a>
					<ul>
						<li><a href="#">Has Submenu</a>
							<ul>
								<li><a href="#">Has Submenu</a>
									<ul>
										<li><a href="#">Submenu 1</a></li>
										<li><a href="#">Submenu 2</a></li>
										<li><a href="#">Submenu 3</a></li>
										<li><a href="#">Submenu 4</a></li>
									</ul>
								</li>
								<li><a href="#">Submenu 2</a></li>
								<li><a href="#">Has Submenu</a>
									<ul>
										<li><a href="#">Submenu 1</a></li>
										<li><a href="#">Submenu 2</a></li>
										<li><a href="#">Submenu 3</a></li>
										<li><a href="#">Submenu 4</a></li>
									</ul>
								</li>
								<li><a href="#">Submenu 4</a></li>
							</ul>
						</li>
						<li><a href="#">Submenu 2</a></li>
						<li><a href="#">Has Submenu</a>
							<ul>
								<li><a href="#">Has Submenu</a>
									<ul>
										<li><a href="#">Submenu 1</a></li>
										<li><a href="#">Submenu 2</a></li>
										<li><a href="#">Submenu 3</a></li>
										<li><a href="#">Submenu 4</a></li>
									</ul>
								</li>
								<li><a href="#">Submenu 2</a></li>
								<li><a href="#">Has Submenu</a>
									<ul>
										<li><a href="#">Submenu 1</a></li>
										<li><a href="#">Submenu 2</a></li>
										<li><a href="#">Submenu 3</a></li>
										<li><a href="#">Submenu 4</a></li>
									</ul>
								</li>
								<li><a href="#">Submenu 4</a></li>
							</ul>
						</li>
						<li><a href="#">Submenu 4</a></li>
					</ul>
				</li>
				<li><a href="#">Services</a>
					<ul>
						<li><a href="#">Submenu 1</a></li>
						<li><a href="#">Submenu 2</a></li>
						<li><a href="#">Submenu 3</a></li>
						<li><a href="#">Submenu 4</a></li>
					</ul>
				</li>
				<li><a href="#">Portfolio</a></li>
				<li><a href="#">Clients</a>
					<ul>
						<li><a href="#">Submenu 1</a></li>
						<li><a href="#">Submenu 2</a></li>
						<li><a href="#">Submenu 3</a></li>
						<li><a href="#">Submenu 4</a></li>
					</ul>
				</li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>
		<!-- End Multi Menu-->
		
		<!--
		<div id="topMenu1">
			<div class="topMenu1Links">
				<ul>
					<li>
						<a href="http://www.website.com">Home</a>
					</li>
					<li>
						<a href="http://www.website.com">News</a>
					</li>
					<li>
						<a href="http://www.website.com">Contact</a>
					</li>
					<li>
						<a href="http://www.website.com">About</a>
					</li>
				</ul>
			</div>
		</div>-->
		<!--
		<div id="leftMenu">
		<div class="leftMenu">
	<ul class="leftMenuLinks">
		<li>
			<a href="http://www.website.com">Home</a>
		</li>
		<li>
			<a href="http://www.website.com">School</a>
		</li>
		<li>
			<a href="http://www.website.com">Java</a>
		</li>
		<li>
			<a href="http://www.website.com">C#</a>
		</li>
	</ul>
</div>
		</div>
		<div id="rightMenu">
		<div class="rightMenu">
	<ul class="rightMenuLinks">
		<li>
			<a href="http://www.website.com">Home</a>
		</li>
		<li>
			<a href="http://www.website.com">School</a>
		</li>
		<li>
			<a href="http://www.website.com">Java</a>
		</li>
		<li>
			<a href="http://www.website.com">C#</a>
		</li>
	</ul>
</div>
		</div>-->
	</body>
</html>
			<div id="body">

			</div><!--end body div-->

			<div id="footer">
	<div class="footer">
		An Van Nguyen 2013
	</div>
</div><!--end footer div-->		</div><!--end cotainer div-->
	</body>
</html>




Here is my CSS. The drop down menu on the bottom of the CSS
/*==================================================*/
/*Container Box*/
#container {
	width: auto;
	border: 3px solid #00cfcf; /*glow border*/
	border-radius: 5px; /*round edge border*/
	box-shadow: 0px 0px 20px #888888; /*shadow border*/
}

/*==================================================*/
/*Header Box*/
#header {

	width: auto;
	height: 100px;
	background: #2be1e1;
	border-top: 2px solid #000000;
	border-bottom: 2px solid #000000;
	box-shadow: 0px 0px 20px #888888;
	text-shadow: 5px 5px 5px #FF0000;
}

/*==================================================*/
/*Top Menu #1*/
#topMenu1 {
	width: auto;
	height: 30px;
	background-color: #279b9b;
	border-bottom: 2px solid #000000;
}
.topMenu1Links {
	padding: 0;
}
.topMenu1Links ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.topMenu1Links li {
	padding: 1px;
	float: left;
}
.topMenu1Links li a {
	display: block;
	width: 120px;
	height: 23px;
	font-weight: bold;
	color: #00cfcf;
	background-color: #005555;
	text-align: center;
	border: 2px solid;
	box-shadow: 0px 0px 10px #888888;
	text-decoration: none;
	text-transform: uppercase;
}
.topMenu1Links li a:hover {
	color: #005555;
	background-color: #00cfcf;
}
/*==================================================*/
/*Left Menu*/
#leftMenu {
	float: left;
	width: 140px;
	height: 400px;
	background-color: #279b9b;
	border-right: 1px dashed #005555;
}

#leftMenu a {
	display: block;
	width: auto;
	text-decoration: none;
	color: #00cfcf;
	background-color: #005555;
	text-align: center;
	font-size: 16px;
	font-family: Verdana;
	font-weight: bold;
	border: 1px solid;
	box-shadow: 0px 0px 10px #888888;
}

#leftMenu a:hover {

	color: #005555;
	background-color: #00cfcf;
	text-decoration: none;
	font-weight: bold;
}

.leftMenuLinks {
	padding: 0;
}

.leftMenuLinks li {
	display: inline;
}

/*==================================================*/
/*Right Menu*/
#rightMenu {

	float: right;
	width: 140px;
	height: 400px;
	background-color: #279b9b;
	border-left: 1px dashed #005555;
}

#rightMenu a {
	display: block;
	width: auto;
	text-decoration: none;
	color: #00cfcf;
	background-color: #005555;
	text-align: center;
	font-size: 16px;
	font-family: Verdana;
	font-weight: bold;
	border: 1px solid;
	box-shadow: 0px 0px 10px #888888;
}

#rightMenu a:hover {

	color: #005555;
	background-color: #00cfcf;
	text-decoration: none;
	font-weight: bold;
}

.rightMenuLinks {
	padding: 0;
}

.rightMenuLinks li {
	display: inline;
}
/*==================================================*/
/*Body*/
#body {
	position: relative;
	width: 80%;
	min-height: 500px;
}

#body a {
	position: absolute;
	display: inline-block;
	width: auto;
	text-decoration: none;
	color: #00cfcf;
	background-color: #005555;
	text-align: center;
	font-size: 16px;
	font-family: Verdana;
	font-weight: bold;
	border: 1px solid;
	box-shadow: 0px 0px 10px #888888;
	margin: 3px;
}

#body a:hover {
	text-decoration: none;
	color: #005555;
	background-color: #00cfcf;
	text-align: center;
	font-size: 16px;
	font-family: Verdana;
	font-weight: bold;
	border: 1px solid;
	box-shadow: 0px 0px 10px #888888;
}

.bodyBox {
	margin: 0px;
	box-shadow: 0px 0px 10px 0px #888888;
}

/*==================================================*/
/*Footer Menu*/
#footer {

	clear: both;
	background-color: #279b97;
	border-top: 2px solid;
	border-bottom: 2px solid;
	text-align: center;
}
/*==================================================*/
/*Multi Level Drop Down Menu*/
*{margin: 0; padding: 0;}
#menu{width:484px; margin: 0 auto; background-color: #000; height:25px;}
#menu ul{list-style-type:none;}
#menu ul li{float: left; position: relative;}
#menu ul li:hover{background-color: #999;}
#menu ul li a{color: #fff; padding: 0 30px; line-height:25px; font-size:11px; font-family:arial; display: block; text-decoration:none;}
#menu ul li a:hover{background-color: #999;}
#menu ul li ul li{float: none; position: relative;}
#menu ul li ul{position: absolute; top:25px; left:0; display: none; background-color: #000; width:150px;}
#menu ul li:hover > ul{display: block;}
#menu ul li ul li a{white-space: nowrap; line-height:25px;}
#menu ul li ul li ul{position: absolute; top:0; left:145px; display: none; background-color: #000; width:150px;}



Is This A Good Question/Topic? 0
  • +

Replies To: What wrong with my drop down menu?

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3517
  • View blog
  • Posts: 12,009
  • Joined: 12-December 12

Re: What wrong with my drop down menu?

Posted 16 May 2013 - 12:30 PM

The beginning of your page is messed up. The very first line should be

<!DOCTYPE HTML>

and there should only be one HEAD tag, BODY tag, etc..
Was This Post Helpful? 0
  • +
  • -

#3 DaiToBu  Icon User is offline

  • D.I.C Head

Reputation: -1
  • View blog
  • Posts: 93
  • Joined: 17-March 12

Re: What wrong with my drop down menu?

Posted 16 May 2013 - 12:37 PM

View Postandrewsw, on 16 May 2013 - 12:30 PM, said:

The beginning of your page is messed up. The very first line should be

<!DOCTYPE HTML>

and there should only be one HEAD tag, BODY tag, etc..


Was trying to put all the style and stuff in the header.php instead of index.php. Let me fix it a little bit.

Here is the edit version. Please check.

<!DOCTYPE HTML>
<html>
	<head>
		<link href="style.css" rel="stylesheet" type="text/css">
	</head>
	<body>
		<div id="container">
			<div id="header">
				<div class="header">
					7503.us
				</div>
			</div>

			<!-- Start Multi Menu-->
			<div id="menu">
				<ul>
					<li>
						<a href="#">Home</a>
						<ul>
							<li>
								<a href="#">Has Submenu</a>
								<ul>
									<li>
										<a href="#">Has Submenu</a>
										<ul>
											<li>
												<a href="#">Submenu 1</a>
											</li>
											<li>
												<a href="#">Submenu 2</a>
											</li>
											<li>
												<a href="#">Submenu 3</a>
											</li>
											<li>
												<a href="#">Submenu 4</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="#">Submenu 2</a>
									</li>
									<li>
										<a href="#">Has Submenu</a>
										<ul>
											<li>
												<a href="#">Submenu 1</a>
											</li>
											<li>
												<a href="#">Submenu 2</a>
											</li>
											<li>
												<a href="#">Submenu 3</a>
											</li>
											<li>
												<a href="#">Submenu 4</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="#">Submenu 4</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">Submenu 2</a>
							</li>
							<li>
								<a href="#">Has Submenu</a>
								<ul>
									<li>
										<a href="#">Has Submenu</a>
										<ul>
											<li>
												<a href="#">Submenu 1</a>
											</li>
											<li>
												<a href="#">Submenu 2</a>
											</li>
											<li>
												<a href="#">Submenu 3</a>
											</li>
											<li>
												<a href="#">Submenu 4</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="#">Submenu 2</a>
									</li>
									<li>
										<a href="#">Has Submenu</a>
										<ul>
											<li>
												<a href="#">Submenu 1</a>
											</li>
											<li>
												<a href="#">Submenu 2</a>
											</li>
											<li>
												<a href="#">Submenu 3</a>
											</li>
											<li>
												<a href="#">Submenu 4</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="#">Submenu 4</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">Submenu 4</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Services</a>
						<ul>
							<li>
								<a href="#">Submenu 1</a>
							</li>
							<li>
								<a href="#">Submenu 2</a>
							</li>
							<li>
								<a href="#">Submenu 3</a>
							</li>
							<li>
								<a href="#">Submenu 4</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Portfolio</a>
					</li>
					<li>
						<a href="#">Clients</a>
						<ul>
							<li>
								<a href="#">Submenu 1</a>
							</li>
							<li>
								<a href="#">Submenu 2</a>
							</li>
							<li>
								<a href="#">Submenu 3</a>
							</li>
							<li>
								<a href="#">Submenu 4</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Contact</a>
					</li>
				</ul>
			</div>
			<!-- End Multi Menu-->

			<!--
			<div id="topMenu1">
			<div class="topMenu1Links">
			<ul>
			<li>
			<a href="http://www.website.com">Home</a>
			</li>
			<li>
			<a href="http://www.website.com">News</a>
			</li>
			<li>
			<a href="http://www.website.com">Contact</a>
			</li>
			<li>
			<a href="http://www.website.com">About</a>
			</li>
			</ul>
			</div>
			</div>-->
			<!--
			<div id="leftMenu">
			<div class="leftMenu">
	<ul class="leftMenuLinks">
		<li>
			<a href="http://www.website.com">Home</a>
		</li>
		<li>
			<a href="http://www.website.com">School</a>
		</li>
		<li>
			<a href="http://www.website.com">Java</a>
		</li>
		<li>
			<a href="http://www.website.com">C#</a>
		</li>
	</ul>
</div>
			</div>
			<div id="rightMenu">
			<div class="rightMenu">
	<ul class="rightMenuLinks">
		<li>
			<a href="http://www.website.com">Home</a>
		</li>
		<li>
			<a href="http://www.website.com">School</a>
		</li>
		<li>
			<a href="http://www.website.com">Java</a>
		</li>
		<li>
			<a href="http://www.website.com">C#</a>
		</li>
	</ul>
</div>
			</div>-->

<div id="body">

</div><!--end body div-->

<div id="footer">
	<div class="footer">
		An Van Nguyen 2013
	</div>
</div><!--end footer div--></div><!--end cotainer div-->
</body>
</html>



This post has been edited by DaiToBu: 16 May 2013 - 12:43 PM

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3517
  • View blog
  • Posts: 12,009
  • Joined: 12-December 12

Re: What wrong with my drop down menu?

Posted 16 May 2013 - 12:38 PM

It's messy at the bottom as well :dontgetit:. The basic structure for an HTML document is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Title Here</title>
    <style type="text/css">
    /* */
    </style>

</head>
<body>

</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#5 DaiToBu  Icon User is offline

  • D.I.C Head

Reputation: -1
  • View blog
  • Posts: 93
  • Joined: 17-March 12

Re: What wrong with my drop down menu?

Posted 16 May 2013 - 12:45 PM

View Postandrewsw, on 16 May 2013 - 12:38 PM, said:

It's messy at the bottom as well :dontgetit:/>. The basic structure for an HTML document is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Title Here</title>
    <style type="text/css">
    /* */
    </style>

</head>
<body>

</body>
</html>


Sorry about that. Didn't know php came out to be a mess, but I did clean it up some :)
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3517
  • View blog
  • Posts: 12,009
  • Joined: 12-December 12

Re: What wrong with my drop down menu?

Posted 16 May 2013 - 03:17 PM

It works if I delete all the css apart from that for the footer and menu, so there are rules that conflict.

I would either delete all the css I described and then re-instate the rules in stages until I find what is conflicting, or just read through the rules to work this out.
Was This Post Helpful? 0
  • +
  • -

#7 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3517
  • View blog
  • Posts: 12,009
  • Joined: 12-December 12

Re: What wrong with my drop down menu?

Posted 16 May 2013 - 03:32 PM

Scrub that. It's not a conflict, just that the body sits atop:

#body {
	position: relative;
	width: 80%;
	min-height: 500px;
    z-index: -10;
}

Personally though, I would bring the whole menu forward, rather than sending the body backwards.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1