Jump to content

Problems aligning dropdown


owosso
 Share

Recommended Posts

I'm have two drop down issues: First, I can't get the vertical drop to align directly under its corresponding menu item. Secondly, I can't keep the menu text in the drop down from wrapping to two lines. I'd like a wider drop down to accomodate one line of text for each item.My site is here.My html is:

<!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"><!-- InstanceBegin template="/Templates/subTest.dwt" codeOutsideHTMLIsLocked="false" --><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><!-- InstanceBeginEditable name="doctitle" --><title>Living the Promise Ministries</title><!-- InstanceEndEditable --><!--Meta tags go after title --><meta name="description" content="Living the Promise Ministries, Inc., is a dynamic ministry developed to help people live the promises og God—all for His glory!" /><meta name="keywords" content="Living The Promise Ministries, Living The Promise Ministry, Living Promise Ministries, Living Promise Ministry, Living The Promise, Living Promise, Live Promise, Live Promise Ministries, Live Promise Ministry, Promise Ministries, Promise Ministry, LTP Ministries, LTPMinistries, LTP Ministry, LTPMinistry, LTPM, Rick Stephenson, RickStephenson, Rick Stevenson, RickStevenson, Ministries, Ministry, N-Siteful Music, NSiteful Music, N-Sightful Music, NSightful Music, NSM, Rick Stephenson Music, Rick Stevenson Music, Sanctuary Of My Heart, Sanctuary Heart, Sanctuary, Evangelist, Music Ministries, Music Ministry, Music Minister, Music Evangelist, Evangelistic Music, Contemporary Christian Music, Christian Music, Assembly Of God Minister, Assembly Of God Ministry, Assembly Of God Ministries, AG Minister, AG Ministry, AG Ministries, AG Evangelist, Assembly Of God Evangelist, AG Music, Assembly Of God Music, Christian Singer, Christian Songwriter, Christian Songs, Worship Leader, Worship, Worship Music" /><link href="../livingSubTest.css" rel="stylesheet" type="text/css" /><!-- InstanceBeginEditable name="head" --> <!-- InstanceEndEditable --></style></head><body>      <div id="horizontalContainer">      <div id="header">      <a class="image" href="../index.html"></a></div>         <div id="menu">      <ul>        <li><a href="#">Faith</a></li>		<li><a href="#">Booking/Calendar</a></li>		<li><a href="#">References</a></li>		<li><a href="#">Shopping</a></li>        <li><a href="#">News</a></li>				<li><a href="#">About</a>			<ul> <!--drop down menu items-->				<li><a href="#">Ministry Options</a></li>				<li><a href="#">Service Options</a></li>				<li><a href="#">Bio</a></li>			</ul>		</li>		        <li><a href="#">Partnership</a>			<ul><!--drop down menu items-->				<li><a href="#">Donations</a></li>				<li><a href="#">Street Team</a></li>				<li><a href="#">Prayer</a></li>			</ul>		</li>		        <li><a href="#">Contact</a>			<ul><!--drop down menu items-->				<li><a href="#">Bookings</a></li>				<li><a href="#">Prayer Request</a></li>				<li><a href="#">General</a></li>			</ul>		</li>                <li><a href="#">Photos</a></li>		<li><a href="#" class="last">Links</a></li>      </ul>    </div>              <div id="left"><!-- InstanceBeginEditable name="sidebar" --><img src="../livingImages/about.Rick.jpg" alt="Rick Stephenson, evangelist" width="150" height="188" class="floatRight" />               <!-- InstanceEndEditable --></div>        <div id="right"><!-- InstanceBeginEditable name="main content" --><p>Rick experienced many challenges during his childhood which influenced him to seek a relationship with the Living Savior. He received the Holy Spirit baptism in 1993 as a result of attending a non-denominational bible study. </p>    <p>In 1995, Rick received his calling into ministry and in 2004 God began opening doors for the ministry. Rick is currently a minister credentialed with the Assemblies of God. For the pastor several years he has ministered in various capacities including bible studies, cell groups, drama, jail ministry, music ministry and street evangelizing. Because of Rick’s experiences, he understands people come to the Lord with a variety of needs and has developed great sensitivity and tact for reaching the lost. </p>    <p>As a part of his ministry, Rick has been utilized by God at various times in all of the gifts of the Spirit; tongues, interpretation, prophecy, words of knowledge and wisdom, discernment, faith, miracles and healing. He has seen anemia, arthritis, bone spurs, broken ribs, cancer, headaches, sore backs, toothaches, as well as other ailments and diseases completely healed.      </p>    <p>Rick’s musical interest began at age 7. He took 10 years of piano lessons, began songwriting at the age of 16, was lead singer of a local band and performed in semi-professional musical review troops. After coming to Christ, Rick developed into a dedicated worshiper often leading services and even holding roles as music director. </p>    <p>Rick has been recognized with awards from various song writing contests; most recently for his songs “Sanctuary Of My Heart” and “You Are Great”, both of which can be found on Rick's debut CD release entitled "Sanctuary Of My Heart".</p><!-- InstanceEndEditable -->  </div>	      	             <div id="footer">    <h2>Living the Promise Ministries, Inc.   •  P.O. Box 103, Johnson Creek, Wisconsin 53038, United States  •  Phone: 608-921-8047    </h2></div></div>  <!--End horizontal container -->    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script><script type="text/javascript">_uacct = "UA-4350837-1";urchinTracker();</script></body><!-- InstanceEnd --></html>

My Css is:

/* CSS Document */body {	font-family: Verdana, Arial, Helvetica, sans-serif;	margin: 20px;	padding: 0px;	font-size: 62.5% /* 16px × 62.5% = 10px */;	font-family: Verdana, Arial, Helvetica, sans-serif;	background-color: #552560;}html,body { width: 100%; height: 100%; }/* Do not forget this is applied to both HTML and BODY */p	{ font-size: 1.3em; color: #441E4D; }	a:link, a:visited	{ font-size: 1em; color: #E1E1E1; text-decoration: none; }	a:hover, a:active {	font-size: 1em;	color: #666666;	text-decoration: underline;	}		h1	{	color:#000000;	text-indent: -9999px;	}	h2 	{	color:#441E4D;	font-size: 1em;	text-align: center;	font-weight: normal;	}	img.floatLeft {     float: left;     margin: 10px; }img.floatRight {     float: right;     margin: 10px; }a.image { /* definition of the "image" class in the <a> 8tag */     display: block; /* a tag must be a block */     width: 68px; /* width of reactive image */     height: 100px; /* height of reactive image */	 background-image:url(../livingImages/sub.Logo.gif);/* source for start image */     background-repeat: no-repeat;	 }	 a.image:hover { /* definition of the "image" class for <a> tag when hovered onto */	background-image:url(../livingImages/sub.LogoRoll.gif);/* source for target image */	} #horizontalContainer	{	width: 800px;	margin: 0 auto;	position: relative;	min-height: auto;	overflow: auto;	background-color: #FFFFFF;	}		#header	{	margin:0;	background-color: #863C97;	width: 742px;	height: 100px;	background-image: url(../livingImages/sub.Background.jpg);	background-repeat: no-repeat;	padding: 10px 0 0 58px;	}	#menu ul {	position: relative;	margin: 0;	float: left;	list-style: none;	color: #fff;	width: 100%;	text-align: center;	padding: 0px 0px 10px 0;	background-color: #863C97;	}#menu li { 	display: inline;	position: relative;	}#menu a {	padding: 10px;	color: #fff;	font-size: 1.2em;	text-decoration: none;	border-right: 1px solid #fff;}#menu a:hover {	background-color: #B9B7BC;	color: #fff;	font-size: 1.2em;}#menu a.last {border-right: 0px ;}#menu ul ul	{	position: absolute;	top: 0;	width: 100%;	z-index: 500;	background-color: #fce9b6;	border-left: #f8c23c solid 1px;	}#menu ul ul li a	{	text-align: left;	min-width: 100%;	padding: 0 10px 0 10px;	border-bottom: #f8c23c solid 1px; 	color: #441E4D;	}	#menu ul ul li a:hover	{	text-align: left;	min-width: 100%;	padding: 0 10px 0 10px;	border-bottom: #00ad4d solid 1px; 	color: #00ad4d;	}div#menu ul li:hover ul,div#menu	ul ul li:hover ul	{	display: block;	}		div#menu ul ul,div#menu ul li:hover ul ul	{	display: none;	}	#left	{	float: left;	width: 210px;	padding: 0;	margin: 0;	background-color: #FFFFFF;	padding: 35px 10px 0 20px;	}	#right	{	float: right;	margin: 0;	width: 495px;	background-color: #FFFFFF;	padding: 30px 45px 0 20px;	}	#footer {	width: 100%;	clear: both;	padding: 50px 0 5px 0;	text-align: center;	background-color: #ffffff;	}		

Link to comment
Share on other sites

I just don't have the time to go through an entire XHTML and CSS codes, it'd be better if the people could post only the relevant parts of the codes.Anyway owosso, I suggest you start from scratch and right, go here, you'll have PLENTY of examples for what you need to do: http://www.noupe.com/css/multilevel-drop-d...-tutorials.htmlLet me know if you need any help.Later.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...