Drop-down menu won't target? Code included.

**S_Quad** · 06-19-2010, 03:58 PM

Hello everyone. I'm trying to get my church website to target the middle section with a drop-down horizontal navigation bar. I have the layout, the navigation bar drops down, but I have no idea how to link the navi bar to the middle contents section. I'm very noob to this, have looked around and got some answers but its just too confusing for me. I really like how this is coded.. maybe I got in over my head?

Here's my index:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fixed Width CSS Layouts - 1 Column - fw-4-1-col</title>
<link rel="stylesheet" type="text/css" href="main.css" />

</head>

<body>

   <!-- Begin Wrapper -->
   <div id="wrapper">
   
         <!-- Begin Header -->
         <div id="header">
		 
	
	       <h1> Calvary Heights Baptist Church </h1>		 
		 	   
		 </div>

		 <!-- End Header -->
		 
		 <!-- Begin Naviagtion -->
         <div id="navigation">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ADxMenu (aplus.rs)</title>
<style type="text/css" media="screen, tv, projection">
/*<![CDATA[*/
/* page styling, unimportant for the menu. only makes the page look nicer */
body {
	font-family: Calibri, "Trebuchet MS", sans-serif;
	font-size: 100%;
}

h1 {font-size: 2em;}
h2 {font-size: 1.5em;}

.example {
	background: #eee;
	padding: 1px;      /* Changes the padding width around the navigation bar */
}

/* - - - ADxMenu: BASIC styles [ MANDATORY ] - - - */

/* remove all list stylings */
.menu, .menu ul {
	margin: 0;
	padding: 0;
	border: 0;
	list-style-type: none;
	display: block;
}

.menu li {
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
	float: left;	/* move all main list items into one row, by floating them */
	position: relative;	/* position each LI, thus creating potential IE.win overlap problem */
	z-index: 5;		/* thus we need to apply explicit z-index here... */
}

.menu li:hover {
	z-index: 10000;	/* ...and here. this makes sure active item is always above anything else in the menu */
	white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
							see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}

.menu li li {
	float: none;/* items of the nested menus are kept on separate lines */
}

.menu ul {
	visibility: hidden;	/* initially hide all submenus. */
	position: absolute;
	z-index: 10;
	left: 0;	/* while hidden, always keep them at the top left corner, */
	top: 0;		/* 		to avoid scrollbars as much as possible */
}

.menu li:hover>ul {
	visibility: visible;	/* display submenu them on hover */
	top: 100%;	/* 1st level go below their parent item */
}

.menu li li:hover>ul {	/* 2nd+ levels go on the right side of the parent item */
	top: 0;
	left: 100%;
}

/* -- float.clear --
	force containment of floated LIs inside of UL */
.menu:after, .menu ul:after {
	content: ".";
	height: 0;
	display: block;
	visibility: hidden;
	overflow: hidden;
	clear: both;
}
.menu, .menu ul {	/* IE7 float clear: */
	min-height: 0;
}
/* -- float.clear.END --  */

/* -- sticky.submenu --
	it should not disappear when your mouse moves a bit outside the submenu
	YOU SHOULD NOT STYLE the background of the ".menu UL" or this feature may not work properly!
	if you do it, make sure you 110% know what you do */
.menu ul {
	background-image: url(empty.gif);	/* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */
	padding: 10px 30px 30px 30px;
	margin: -10px 0 0 -30px;
	/*background: #f00;*/	/* uncomment this if you want to see the "safe" area.
								you can also use to adjust the safe area to your requirement */
}
.menu ul ul {
	padding: 30px 30px 30px 10px;
	margin: -30px 0 0 -10px;
}
/* -- sticky.submenu.END -- */






/* - - - ADxMenu: DESIGN styles [ OPTIONAL, design your heart out :) ] - - - */

.menu, .menu ul li {
	color: #eee;
	background: #660000; <! -- Color of Navigation Bar -->
}

.menu ul {
	width: 11em; <! -- Changes width of Dropdown windows -->
}

.menu a {
	text-decoration: none;
	color: #eee;
	padding: .4em 1.7em;
	display: block;
	position: relative;
}

.menu a:hover, .menu li:hover>a {
	color: #fc3;
}

.menu li li {	/* create borders around each item */
	border: 1px solid #ccc;
}
.menu ul>li + li {	/* and remove the top border on all but first item in the list */
	border-top: 0;
}

.menu li li:hover>ul {	/* inset 2nd+ submenus, to show off overlapping */
	top: 5px;
	left: 90%;
}

/* special colouring for "Main menu:", and for "xx submenu" items in ADxMenu
	placed here to clarify the terminology I use when referencing submenus in posts */
.menu>li:first-child>a, .menu li + li + li li:first-child>a {
	color: #567;
}

/* Fix for IE5/Mac \*//*/
.menu a {
	float: left;
}
/* End Fix */

/*]]>*/
</style>





<!--[if lte IE 6]>
<style type="text/css" media="screen, tv, projection">
/*<![CDATA[*/

/* - - - ADxMenu: IE6 BASIC styles [MANDATORY] - - - */

/*
	this rules improves accessibility - if Javascript is disabled, the entire menu will be visible
	of course, that means that it might require different styling then.
	in which case you can use adxie class - see: aplus.co.rs/adxmenu/examples/ie6-double-style/
 */
.menu ul {
	visibility: visible;
	position: static;
}

.menu, .menu ul {	/* float.clear */
	zoom: 1;
}

.menu li.adxmhover {
	z-index: 10000;
}

.menu .adxmhoverUL {	/* li:hover>ul selector */
	visibility: visible;
}

.menu .adxmhoverUL {	/* 1st-level submenu go below their parent item */
	top: 100%;
	left: 0;
}

.menu .adxmhoverUL .adxmhoverUL {	/* 2nd+ levels go on the right side of the parent item */
	top: 0;
	left: 100%;
}

/* - - - ADxMenu: DESIGN styles - - - */

.menu ul a {	/* fix clickability-area problem */
	zoom: 1;
}

.menu li li {	/* fix white gap problem */
	float: left;
	width: 100%;
}

.menu li li {	/* prevent double-line between items */
	margin-top: -1px;
}

.menu a:hover, .menu .adxmhoverA {		/* li:hover>a selector */
	color: #fc3;
}

.menu .adxmhoverUL .adxmhoverUL {	/* inset 2nd+ submenus, to show off overlapping */
	top: 5px;
	left: 90%;
}

/*]]>*/
</style>

<script type="text/javascript" src="../code/ADxMenu.js"></script>
<![endif]-->
</head>
<body class="adxmenu">

<div class="example">
<ul class="adxm menu">
<li><a href="#"> </a></li> 
<li><a href="http://aplus.rs/" title="Main Page">Home</a>
</li>

<li><a href="about_us.html" title="Who are we?">About Us</a>
	<ul>
	<li><a href="#">About Us</a></li>
	<li><a href="history.html">History</a>
	<li><a href="directions.html">Directions</a></li>
	<li><a href="beliefs.html">Beliefs</a></li>
	<li><a href="calendar.html">Calendar</a></li>
	<li><a href="media.html">Media</a>
		<ul>
		<li><a href="#">Media</a></li>
		<li><a href="photos.html">Photos</a></li>
		<li><a href="podcasts.html">Podcasts</a>
		</ul>
		</li>
	<li><a href="bulletins.html">Bulletins</a></li>
	</ul>
</li>

<li><a href="http://aplus.rs/wch/" title="Ministries">Ministries</a>
	<ul>
	<li><a href="ministries.html">Ministries</a></li>
	<li><a href="children.html">Children</a></li>
	<li><a href="youth.html">Youth</a></li>
	<li><a href="ladies.html">Ladies</a></li>
	<li><a href="men.html">Men</a></li>
	</ul>
</li>

<li><a href="http://aplus.rs/lab/" title="Ministers">Ministers</a>
	<ul>
	<li><a href="ministers.html">Ministers</a></li>
        <li><a href="interim_pastor.html">Interim Pastor</a></li>
	<li><a href="deacons.html">Deacons</a></li>
	</ul>
</li>

<li><a href="http://aplus.rs/deliver/" title="Missions">Missions</a>
	<ul>
	<li><a href="missions.html">Missions</a></li>
	<li><a href="missionaries.html">Missionaries</a></li>
	</ul>
</li>
<li><a href="http://aplus.rs/about/" title="Relevant info about us">Events</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
</ul>
</div>	
</div>


		 <!-- This is the Navigation -->		 
			   
		 
		 <!-- End Naviagtion -->
		 


		 <!-- Begin Content -->
		 <div id="content">
		 
		 </div>
		 <!-- End Content -->
		 


		                                                                 <!-- Begin Footer -->
		<div id="footer">
		       
		Created by: David Wilkerson <p>Last updated: June 15th, 2010</p>	
			    
	     	</div>                                                           <!-- End Footer -->
		 
   </div>                                                                        <!-- End Wrapper -->
   
</body>
</html>

If you copy and paste this into a notepad, you can see what I mean. I didn't add the external css.stylesheet but can add that as well if someone wants to see that as well. Thanks again ~David

**S_Quad** · 06-19-2010, 04:05 PM

Here's the stylesheet if you want to see the whole website so far! Just copy/paste and save as main.css

Code:

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 background: #660000;
}
#wrapper { 
 margin: 0 auto;
 width: 922px;
}
#header {
 width: 900px;
 color: #333;
 padding: 10px;
 border: 1px solid #ccc;
 height: 45px;
 margin: 5px 0px 5px 0px;
 background: #DAC8BF;
}
#navigation {
 width: 900px;
 color: #333;
 padding: 10px;
 border: 1px solid #ccc;
 height: 33px;
 margin: 0px 0px 5px 0px;
 background: #BD9C8C;
}
#content { 
 width: 900px;
 color: #333;
 border: 1px solid #ccc;
 background: #F2F2E6;
 margin: 0px 0px 5px 0px;
 padding: 10px;
 height: 430px;
}
#footer { 
 width: 900px;
 color: #333;
 border: 1px solid #ccc;

 background: #BD9C8C;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}

Thread: Drop-down menu won't target? Code included.

Thread Tools

Search Thread

Drop-down menu won't target? Code included.

Bookmarks

Bookmarks

Posting Permissions