navigation bar drop down meun with css

Page 1 of 1

1 Replies - 510 Views - Last Post: 23 January 2013 - 09:15 PM

#1 winniewong1234  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 22-January 13

navigation bar drop down meun with css

Posted 22 January 2013 - 09:07 PM

hey,

i have a problem with nevigation bar drop down meun using css

the code is as follow:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>drop down meun</title>
<style type="text/css">
#outerContainer {background:#CCC; width:750px; height:30px;}
#menuContainer {position:relative; float:left; left:50%;}

#nav, 
#nav ul {padding:0; margin:0; list-style:none; font: 11px arial, verdana, sans-serif; background:url(transparent.gif); position:relative; z-index:100;}
#nav {height:30px; float:left; padding:0; background:#CCC; position:relative; right:50%;}

#nav table {border-collapse:collapse;}
#nav li {float:left;}
#nav li li {float:none;}
/* a hack for IE5.x and IE6 */
#nav li a li {float:left;}

#nav li a {display:block; float:left; color:black; height:30px; padding:0 20px 0 10px; line-height:30px; text-decoration:none; white-space:nowrap; font-weight:bold;}
#nav li li a {height:25px; line-height:25px; float:none;}

#nav li:hover {position:relative; z-index:100; background:url(transparent.gif);}
#nav a:hover {position:relative; z-index:100; color:#fc0; border:0;}
#nav li:hover > a {color:#fc0;}

#nav :hover  ul {left:0; top:30px; z-index:300;}
#nav a:hover ul {left:-1px;}

#nav ul {position:absolute; left:-9999px; top:-9999px;}

/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left:0; margin-left:100%; top:0;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover li:hover > a {color:#fc0;}

#nav li a:hover ul li a:hover {color:#fc0;}

/* but IE5.x and IE6 need this lot to style the flyouts*/
/* show next level */
#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul
{left:100%; top:0;}

/* keep further levels hidden */
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}
</style>
</head>
<body>
	<div id="wrapper">
	<div id="header"><div id="botlink"></div> </div> <div id="showcase"><div id="info">
	    <div id="outerContainer">
<div id="menuContainer">

<ul id="nav">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">About us »<!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]--><ul>

		<li><a href="#nogo">a</a></li>
		<li><a href="#nogo">b</a></li>
		<li><a href="#nogo">c</a></li>
	</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo">product<!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
	<li><a href="#nogo">Tripods »<!--[if gte IE 7]><!--></a><!--<![endif]-->

		<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
			<li><a href="#nogo">Monopods</a></li>
			<li><a href="#nogo">Tripods</a></li>
			<li><a href="#nogo">Adjutable head</a></li>
			<li><a href="#nogo">Fixed</a></li>
			<li><a href="#nogo">Flash mount</a></li>

			<li><a href="#nogo">Floating head</a></li>
		</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="#nogo">Films »<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
			<li><a href="#nogo">35mm</a></li>
			<li><a href="#nogo">Color Print</a></li>

			<li><a href="#nogo">Black and White</a></li>
			<li><a href="#nogo">Roll</a></li>
			<li><a href="#nogo">Color Slide</a></li>
		</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="#nogo">Cameras »<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]--><ul>

			<li><a href="#nogo">Compact »<!--[if gte IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
				<li><a href="#nogo">Canon</a></li>
				<li><a href="#nogo">Nikon</a></li>
				<li><a href="#nogo">Minolta</a></li>
				<li><a href="#nogo">Pentax</a></li>

				</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="#nogo">Digital »<!--[if gte IE 7]><!--></a><!--<![endif]-->
					<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
					<li><a href="#nogo">Canon</a></li>
					<li><a href="#nogo">Nikon »<!--[if gte IE 7]><!--></a><!--<![endif]-->
							<!--[if lte IE 6]><table><tr><td><![endif]--><ul>

							<li><a href="#nogo">Lenses »<!--[if gte IE 7]><!--></a><!--<![endif]-->
								<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
									<li><a href="#nogo">Standard</a></li>
									<li><a href="#nogo">Telephoto</a></li>
									<li><a href="#nogo">Wide Angle</a></li>
									<li><a href="#nogo">Fish Eye</a></li>

									<li><a href="#nogo">Mirror</a></li>
									<li><a href="#nogo">Macro</a></li>
								</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
							</li>
							<li><a href="#nogo">Speedlight</a></li>
							<li><a href="#nogo">Coolpix »<!--[if gte IE 7]><!--></a><!--<![endif]-->
									<!--[if lte IE 6]><table><tr><td><![endif]--><ul>

									<li><a href="#nogo">Coolpix S10</a></li>
									<li><a href="#nogo">Coolpix L2</a></li>
									<li><a href="#nogo">Coolpix S500</a></li>
									<li><a href="#nogo">Coolpix P5000</a></li>
									<li><a href="#nogo">Coolpix 4600</a></li>
									<li><a href="#nogo">Coolpix S6 Silver</a></li>

									</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
							</li>
							<li><a href="#nogo">D200</a></li>
							<li><a href="#nogo">D80</a></li>
							</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
					</li>
					<li><a href="#nogo">Minolta</a></li>

					<li><a href="#nogo">Pentax</a></li>
					</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="#nogo">SLR »<!--[if gte IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
				<li><a href="#nogo">Canon</a></li>
				<li><a href="#nogo">Nikon</a></li>

				<li><a href="#nogo">Minolta</a></li>
				<li><a href="#nogo">Pentax</a></li>
				<li><a href="#nogo">Panasonic</a></li>
				</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>

	<li><a href="#nogo">Flash</a></li>
	<li><a href="#nogo">Video</a></li>
	</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
<li><a href="#nogo">FAQs »<!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
		<li><a href="#nogo">Cameras</a></li>

		<li><a href="#nogo">Film types</a></li>
		<li><a href="#nogo">Digital Photography</a></li>
	</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo">work »<!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
		<li><a href="#nogo">study</a></li>
		<li><a href="#nogo">project</a></li>

	</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo">contact</a></li>
</ul>
</div>
</div>

</div> </div> <!-- end of showcase -->
<div id="content">
<div id="left_column"></div>
</div> </div> </body>
</html>


i would like to know how can show the dropdown meun in a color block like http://line25.com/wp...emo/index.html?

Thanks for your help!

Is This A Good Question/Topic? 0
  • +

Replies To: navigation bar drop down meun with css

#2 raghav.naganathan  Icon User is offline

  • Perfectly Squared ;)
  • member icon

Reputation: 407
  • View blog
  • Posts: 1,440
  • Joined: 14-September 12

Re: navigation bar drop down meun with css

Posted 23 January 2013 - 09:15 PM

Well, I made small changes to your CSS. Check and see if it works. What I did was I checked the source code of the page you had provided, copied the CSS to your program and modified it a bit to suit your program.

body {
	background: #909eab url(bg.png);
	font-family: Helvetica, sans-serif; font-size: 18px; line-height: 24px;
}

#nav {
	margin: 20px; 
	text-align: center;
}

#nav {
	background: #4b545f; 
	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 30px;
	border-radius: 5px;
	list-style: none;
	position: relative;
	display: inline-table;
}
#nav ul {
	background: #4b545f; 
	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0;/*This removes the unnecessary part given by padding: 0 20 px*/
	border-top: 1px solid #6b727c;
	border-bottom: 1px solid #575f6a; 
	list-style: none;
	position: relative;
	border-radius: 5px;
}

#nav ul:after {
		content: ""; clear: both; display: block;
	}

#nav ul li {
		float: left;
	}	

#nav ul li:hover > ul {
		display: block;
	}
#nav ul li:hover {
			background: #4b545f;
			background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
			background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
			background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
		}
#nav ul li:hover a {
				color: #fff;
			}
#nav ul li a {
			float: none;
			display: block; padding:0;
			color: #757575; text-decoration: none;
		}

#nav ul ul {
        float: none;
		background: #4b545f; border-radius: 0px; padding: 0;
		position: relative;
		border-top: 1px solid #6b727c;
			border-bottom: 1px solid #575f6a; 
	}	
#nav ul ul li {/*submenus having >> */
			float: none; 
			border-top: 1px solid #6b727c;
			border-bottom: 1px solid #575f6a; position: relative;
		}
#nav ul ul li a {/*never used in this program*/
				padding:0 px;
				color: green;
			}			
#nav ul ul li a:hover {
					background: #4b545f;
				}	
#nav ul ul ul {
		position: absolute; left: 100%; top:0;
	}				
#nav li {float:left;}
#nav li li {float:none;}
/* a hack for IE5.x and IE6 */
#nav li a li {float:left;}

#nav li a {display:block; float:left; color:white; height:30px; padding:0 20px 0 10px; line-height:30px; text-decoration:none; white-space:nowrap; font-weight:bold;}
#nav li li a {height:25px; line-height:25px; float:none;border-top: 1px solid #6b727c;
			border-bottom: 1px solid #575f6a; }

#nav li:hover {position:relative; z-index:100;}/*Makes the tabbed panes in correct order*/ 

#nav li:hover > a {color:grey;}

#nav :hover  ul {left:0; top:30px; z-index:300;}/*Makes the tabbed panes to drop down*/ 

#nav ul {position:absolute; left:-9999px; top:-9999px;}/*keeps panes in order*/

/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left:0; margin-left:100%; top:0;}/*next levels of panes display*/
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover li:hover > a {color:grey;}

#nav li a:hover ul li a:hover {color:grey;}
#nav ul:after {
		content: ""; clear: both; display: block;
	}

#nav ul ul li {
			float: none; 
			border-top: 1px solid #6b727c;
			border-bottom: 1px solid #575f6a; position: relative;
		}
#nav ul li a {
				padding: 15px 40px;
				color: white;
			}		
#nav ul ul li a {
				padding: 15px 40px;
				color: green;
			}		
#nav ul ul ul {
		position: relative; left: 100%; top:0;
	}


regards,
Raghav
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1