• Locked
4 replies [Last post]
Thu, 2009-09-24 04:18
Chis
Offline
Last seen: 3 years 33 weeks ago
newbie
Joined: 2009-09-24
Posts: 3
Points: 0

I've been trying to create a horizontal popout menu using this website: http://ago.tanfa.co.uk/css/examples/menu/tutorial-v.html
I copied the instructions almost word for word, but for some reason when you mouseover one of the menu links, nothing pops out. Everything seems to work fine up until there.

This is the code I have so far:

(The issue is with the div#link ul li:hover ul, I think)

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Whitehead Miller Advisors, Inc.</title>
<style type="text/css">
#container {
	width: auto;
	margin: 0px;
	padding: 0px;
	position: relative;
	top: 0px;
	height: 100%;
	float: left;
}
 
#title {
	background-image: url(images/text.png);
	height: 140px;
	width: 326px;
	margin-top: 50px;
	position: absolute;
	left: 178px;
	top: -44px;
	background-repeat: no-repeat;
}
 
#pagetitle {
	height: 70px;
	width: 183px;
	position: absolute;
	left: 792px;
	top: 125px;
}
 
#logo{
	background-image: url(images/splashcenter.jpg);
	height: 450px;
	width: 405px;
	margin-left: 170px;
	margin-top: 150px;
	position: absolute;
	left: -236px;
	top: -126px;
}
 
#background {
	background-image: url(images/blue5.png);
	height: 550px;
	width: 550px;
	position: absolute;
	left: 404px;
	top: 5px;
	margin: 0px;
	padding: 0px;
}
 
#linkbox {
	height: auto;
	width: 151px;
	border-right-width: thin;
	border-right-style: solid;
	border-right-color: #000;
	position: absolute;
	left: 250px;
	top: 164px;
	list-style-type: none;
}
 
#link1{
	height: 50px;
	width: 150px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-variant: small-caps;
	left: 269px;
	top: 181px;
	font-weight: normal;
	background-repeat: no-repeat;
	background-position: 0px center;
	text-align: center;
	vertical-align: middle;
	color: #333;
	line-height: 40px;
}
 
#link1 ul{
	list-style-type: none;
	margin: 10px;
	padding: 10px;
}
 
#link1 ul ul{
	font-size: 14px;
	line-height: 30px;
	left: 100%;
	top: 45px;
	position: absolute;
	width: 100%;
	background-color: #FFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-color: #009;
	border-right-color: #009;
	border-bottom-color: #009;
	border-left-color: #009;
	z-index: 3;
}
 
div#link1 ul ul
{display: none;}
 
div#link1 ul li:hover ul
{display: block;}
 
#maintext{
	width: 525px;
	position: absolute;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	left: 432px;
	top: 91px;
	height: 291px;
	line-height: 20px;
	padding: 15px;
	z-index: 1;
}
 
#maintext_highlight1 {
	padding: 10px;
	clear: right;
	z-index: 1;
}
#maintext_highlight2 {
	background-color: #E4E4E4;
	padding: 10px;
	border-right-width: thin;
	border-left-width: thin;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #000;
	border-left-color: #000;
	border-bottom-width: thin;
	border-bottom-style: dashed;
	border-bottom-color: #000;
	background-image: url(images/maintext2_background.png);
	z-index: 1;
}
 
#maintext h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: large;
	padding-left: 15px;
	font-weight: lighter;
	font-variant: normal;
	text-align: right;
	color: #006;
	font-style: normal;
	width: 400px;
	float: right;
	text-transform: uppercase;
	padding-right: 20px;
}
 
#maintext_partition {
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #000;
}
 
#maintext h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
	padding-left: 12px;
	font-weight: normal;
	font-variant: normal;
	text-align: center;
	color: #000;
}
 
#footer{
	height: 100px;
	background-image: url(images/blue.png);
	background-repeat: repeat-x;
	position: absolute;
	width: 100%;
	font-family: Arial, Helvetica, sans-serif;
	vertical-align: middle;
	padding-top: 20px;
	margin: 0px;
	padding-bottom: 0px;
	background-position: bottom;
	top: 475px;
	left: 0px;
	padding-right: 0px;
	padding-left: 0px;
}
 
#footertext {
	padding-top: 50px;
	padding-left: 30px;
	font-size: 11px;
	line-height: 0px;
	color: #FFF;
}
 
#quote{
	height: 98px;
	width: 307px;
	position: absolute;
	left: 542px;
	top: 17px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	padding: 20px;
	font-style: italic;
}
a:link {
	text-decoration: none;
	color: #000;
}
a:visited {
	text-decoration: none;
	color: #000;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
</style>
</head>
<body>
<div id="container">
  <div id="background"></div>
  <div id="logo"> </div>
  <div id="title"> </div>
<div id="linkbox">
  <div id="link1">
  	<ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="aboutus.html">About Us</a></li>
      <ul>
      	<li><a href="juliaw.html">Julia Whitehead</a></li>
        <li><a href="peterm.html">Peter Miller</a></li>
      </ul>
      <li><a href="news.html">In the News</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </div>
</div>
<div id="maintext">
  <h1>Welcome to <i>WMA</i></h1>
 
  <div id="maintext_highlight1">
 
<p>Since 1994 Whitehead Miller Advisors, Inc. (“WMA”),  its predecessor firm and principals have acted independently and in conjunction  with other firms to provide financial and restructuring advice to a variety of  public and private clients across the Americas. WMA focuses on debt financing  and workout situations which require senior level advice, the ability to  rapidly evaluate a client’s changing business dynamics and strong financial  execution capabilities. WMA’s competence, experience, and the trust of its  clients often cause the firm to be brought in by these clients or other  financial advisory firms to supplement teams retained for difficult financial  assignments. WMA also acts as an advisor to management, firms, investors and  boards of directors in a variety of situations including portfolio advisory,  strategic change and to address certain issues arising in a financial  restructuring or project where its principals’ ability to bring both financial  and business expertise to bear are necessary ingredients to the successful  resolution of an assignment.</p>
 
  </div>
 
</div>
</div>
</body>
</html>

Help would be greatly appreciated! Smile

Top
  • view bestreply
Tags:
Thu, 2009-09-24 21:19
#1
harrierdh
Offline
Last seen: 3 years 21 weeks ago
Enthusiast
Colorado
Timezone: GMT-7
Joined: 2009-07-30
Posts: 83
Points: 20

horizontal menu

I tried the code you sent and I went to the website you listed for the tutorial. Though I did not try to follow the tutorial through, I did copy the code from their website and came up with this. This works in all browsers. I did not see a horizontal menu in your code. There was a vertical one. Anyway I hope this helps.

<style>
/* CSS Menus - Horizontal CSS Menu with Dropdown and Popout Menus - 20050131 */
 
*{margin:0;padding:0;border:none;}
 
body{margin:0.5em;font-family:verdana,tahoma,arial,sans-serif;}
 
/* Begin CSS Popout Menu */
 
#menu{
width:100%;
float:left;
}
 
#menu a{
font:normal 90%/205% tahoma,arial,helvetica,sans-serif;
display:block;
border-width:1px;
border-style:solid;
border-color:#ccc #888 #555 #bbb;
white-space:nowrap;
margin:0;
padding:0 5px;
}
 
#menu h3{
font:bold 90%/205% tahoma,arial,helvetica,sans-serif;
display:block;
border-width:1px;
border-style:solid;
border-color:#ccc #888 #555 #bbb;
white-space:nowrap;
margin:0;
padding:0 5px;
}
 
#menu h3{
color:#fff;
background:#000 url(/css/images/expand3.gif) no-repeat 100% 100%;
text-transform:uppercase
}
 
#menu a{
background:#eee;
text-decoration:none;
}
 
#menu a, #menu a:visited{
color:#000;
}
 
#menu a:hover{
color:#a00;
background:#ddd;
}
 
#menu a:active{
color:#060;
background:#ccc;
}
 
#menu ul{
list-style:none;
margin:0;
padding:0;
float:left;
width:11.5em;
}
 
#menu li{
position:relative;
}
 
#menu ul ul{
position:absolute;
z-index:500;
top:auto;
display:none;
}
 
#menu ul ul ul{
top:0;
left:100%;
}
 
/* Begin non-anchor hover selectors */
 
/* Enter the more specific element (div) selector
on non-anchor hovers for IE5.x to comply with the
older version of csshover.htc - V1.21.041022. It
improves IE's performance speed to use the older
file and this method */
 
div#menu h3:hover{
background:#000 url(/css/images/expand3.gif) no-repeat -999px -9999px;
}
 
div#menu li:hover{
cursor:pointer;
z-index:100;
}
 
div#menu li:hover ul ul,
div#menu li li:hover ul ul,
div#menu li li li:hover ul ul,
div#menu li li li li:hover ul ul
{display:none;}
 
div#menu li:hover ul,
div#menu li li:hover ul,
div#menu li li li:hover ul,
div#menu li li li li:hover ul
{display:block;}
 
/* End of non-anchor hover selectors */
 
/* Styling for Expand */
 
#menu a.x, #menu a.x:visited{
font-weight:normal;
color:#000;
background:#eee url(/css/images/expand3.gif) no-repeat 100% 100%;
}
 
#menu a.x:hover{
color:#fff;
background:#000;
}
 
#menu a.x:active{
color:#060;
background:#ccc;
}
 
/* End CSS Popout Menu */
 
</style>
<!--[if IE]>
<style type="text/css" media="screen">
	#menu{float:none;} /* This is required for IE to avoid positioning bug when placing content first in source. */
	/* IE Menu CSS */
	/* csshover.htc file version: V1.21.041022 - Available for download from: <a href="http://www.xs4all.nl/~peterned/csshover.html" rel="nofollow">http://www.xs4all.nl/~peterned/csshover.html</a> */
	body{behavior:url(csshover.htc);
	font-size:100%; /* to enable text resizing in IE */
	}
	#menu ul li{float:left;width:100%;}
	#menu h2, #menu a{height:1%;}
</style>
<![endif]-->
<div id="menu">
	<ul>
		<li><h3>CSS Tips</h3>
			<ul>
				<li><a href="/css/tips/" id="csstip">CSS Tips Index</a></li>
				<li><a href="/css/tips/#cssmenus" class="x">CSS Popout Menus</a>
					<ul>
 
						<li><a href="/css/menus/vertical/">Vertical CSS Menu</a></li>
						<li><a href="/css/menus/horizontal/">Horizontal CSS Menu</a></li>
						<li><a href="/css/menus/tutorial/">CSS Menus Tutorial</a></li>
					</ul>
				</li>
				<li><a href="/css/text/decoration.asp">Text Decoration</a></li>
				<li><a href="/css/text/transform.asp">Text Transform</a></li>
 
				<li><a href="/css/text/pre.asp">Preformatted Text</a></li>
			</ul>
		</li>
	</ul>
	<ul>
		<li><h3>Tips</h3>
			<ul>
				<li><a href="/seo/tips/" id="seotip" class="x">SEO Tips Index</a>
 
					<ul>
						<li><a href="/articles/1007/perfect-page.asp">The Perfect Page</a></li>
						<li><a href="/articles/1007/title-element.asp">Title Element</a></li>
						<li><a href="/articles/1007/meta-description.asp">META Description</a></li>
						<li><a href="/robots-text-file/" class="x">Robots Text File</a><ul>
						<li><a href="/robots-text-file/#validation">robots.txt Validation</a></li>
 
					</ul>
				</li>
				<li><a href="/seo/101/" class="x">101 Signals of Quality</a>
					<ul>
						<li><a href="/seo/101/#webpage-title">The Webpage Title</a></li>
						<li><a href="/seo/101/#keywords-file-path">Keywords in File Path</a></li>
					</ul>
 
				</li>
			</ul>
		</li>
		<li><a href="/meta-tags/" id="meta" class="x">META Tags Index</a>
			<ul>
				<li><a href="/meta-tags/description.asp">Description Tag</a></li>
				<li><a href="/meta-tags/keywords.asp">Keywords Tag</a></li>
 
				<li><a href="/meta-tags/language.asp">Language Tag</a></li>
				<li><a href="/meta-tags/link-relationship.asp" class="x">Link Relationship</a>
					<ul>
						<li><a href="/html/links/nofollow.asp">&lt;a rel=&quot;nofollow&quot;&gt;</a></li>
					</ul>
				</li>
				<li><a href="/meta-tags/robots/" class="x">Robots META Tag</a>
 
					<ul>
						<li><a href="/meta-tags/robots/googlebot.asp">Robots Tag Google</a></li>
						<li><a href="/meta-tags/robots/msnbot.asp">Robots Tag MSN</a></li>
					</ul>
				</li>
				<li><a href="/meta-tags/title-element.asp">Title Element</a></li>
				<li><a href="/articles/1007/metadata.asp">META Tags Abuse</a></li>
 
				<li><a href="/meta-tags/revisit-after.asp">META Revisit-After</a></li>
				<li><a href="/html/comments/">HTML Comments Tag</a></li>
				<li><a href="/meta-tags/dublin/">Dublin Core Metadata</a></li>
			</ul>
		</li>
		<li><a href="/frontpage/tips/" id="fptips0" class="x">FrontPage Tips Index</a>
			<ul>
 
				<li><a href="/frontpage/include-page.asp" class="x">FrontPage Includes</a>
					<ul>
						<li><a href="/frontpage/nesting-includes.asp">Nesting FP Includes</a></li>
					</ul>
				</li>
				<li><a href="/frontpage/page-options.asp">FrontPage Options</a></li>
				<li><a href="/w3c/date-time/" class="x">Date/Time Formats</a>
 
					<ul>
						<li><a href="/frontpage/date-time.asp">FP Date/Time Stamps</a></li>
						<li><a href="/frontpage/date-time-examples.asp">Date/Time Webbots</a></li>
					</ul>
				</li>
				<li><a href="/frontpage/keyboard/">Keyboard Shortcuts</a></li>
				<li><a href="/frontpage/forms/validation/">FP Forms Validation</a></li>
 
				<li><a href="/frontpage/history/">History of FrontPage</a></li>
			</ul>
		</li>
		<li><a href="/windows/tips/" id="wintips" class="x">Windows Tips Index</a>
			<ul>
				<li><a href="/windows/keyboard/" class="x">Windows Keyboard</a>
					<ul>
 
						<li><a href="/windows/keyboard/">Interactive Keyboard</a></li>
					</ul>
				</li>
				<li><a href="/windows/keyboard/shortcuts/">Keyboard Shortcuts</a></li>
				<li><a href="/windows/key/">Windows Key</a></li>
				<li><a href="/windows/print-screen/" class="x">Print Screen Key</a>
					<ul>
 
						<li><a href="/windows/print-screen/#alt-prt-scr">Alt Print Screen</a></li>
						<li><a href="/windows/print-screen/#xp">Windows XP Users</a></li>
					</ul>
				</li>
				<li><a href="/windows/print-screen/psd/" class="x">Print Screen Deluxe</a>
					<ul>
						<li><a href="/windows/print-screen/psd/features.asp">PSD Features</a></li>
 
					</ul>
				</li>
				<li><a href="/windows/ie/accessibility/">IE Accessibility</a></li>
				<li><a href="/windows/icons/" class="x">Program Icons</a>
					<ul>
						<li><a href="/windows/icons/microsoft/">Microsoft Office</a></li>
						<li><a href="/windows/icons/adobe/">Adobe</a></li>
 
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="/charts/inches-decimal/" id="incdec" title="Conversion Chart" class="x">Inches to Decimal</a>
			<ul>
				<li><a href="/html/forms/labels/" id="htmlflab">Forms Usability</a></li>
				<li><a href="/tools/form-buttons/" id="buttons">Form Buttons</a></li>
 
			</ul>
		</li>
			</ul>
		</li>
	</ul>
	<ul>
		<li><h3>Colors</h3>
			<ul>
 
				<li><a href="/css/colors/conversion/" id="colcon">Convert to Hex/RGB</a></li>
				<li><a href="/css/colors/web/safe/">Web Safe Colors</a></li>
				<li><a href="/css/colors/web/x11/">Xll Color Keywords</a></li>
				<li><a href="/css/colors/rgb.asp">RGB Color Chart</a></li>
			</ul>
		</li>
	</ul>
 
	<ul>
		<li><h3>Just Say No Images</h3>
			<ul>
				<li><a href="/just-say-no/" id="jsn">JSN Image Index</a></li>
				<li><a href="/just-say-no/01.asp" id="jsn1">Images A thru B</a></li>
				<li><a href="/just-say-no/02.asp" id="jsn2">Images B thru D</a></li>
				<li><a href="/just-say-no/03.asp" id="jsn3">Images D thru G</a></li>
 
				<li><a href="/just-say-no/04.asp" id="jsn4">Images G thru M</a></li>
				<li><a href="/just-say-no/05.asp" id="jsn5">Images M thru P</a></li>
				<li><a href="/just-say-no/06.asp" id="jsn6">Images P thru R</a></li>
				<li><a href="/just-say-no/07.asp" id="jsn7">Images R thru S</a></li>
				<li><a href="/just-say-no/08.asp" id="jsn8">Images S thru W</a></li>
				<li><a href="/just-say-no/09.asp" id="jsn9">Images W thru Z</a></li>
 
				<li><a href="/just-say-no/suggestions/" id="jsnsug">Image Suggestions</a></li>
			</ul>
		</li>
	</ul>
	<ul>
		<li><h3>Tanfa CSS Design</h3>
			<ul>
				<li><a href="http://www.tanfa.co.uk/css/" id="tcss">CSS Index</a></li>
 
				<li><a href="http://www.tanfa.co.uk/css/articles/" id="tart">CSS Articles</a></li>
				<li><a href="http://www.tanfa.co.uk/css/borders/" id="tbor">CSS Borders</a></li>
				<li><a href="http://www.tanfa.co.uk/css/examples/" id="texa">CSS Examples</a></li>
				<li><a href="http://www.tanfa.co.uk/css/layouts/" id="tlay">CSS Layouts</a></li>
				<li><a href="http://www.tanfa.co.uk/" id="tanfa">Tanfa Home Page</a></li>
				<li><a href="http://www.tanfa.co.uk/archives/" id="tarc">Archives</a></li>
 
				<li><a href="http://www.tanfa.co.uk/portfolio/" id="tpor">Portfolio</a></li>
				<li><a href="http://www.tanfa.co.uk/contact.asp" id="tcon">Contact</a></li>
			</ul>
		</li>
	</ul>
</div>

Top
Fri, 2009-09-25 03:20
#2
Chis
Offline
Last seen: 3 years 33 weeks ago
newbie
Joined: 2009-09-24
Posts: 3
Points: 0

Whoops, sorry for the

Whoops, sorry for the misunderstanding harriedh - I meant a vertically aligned menu that would popout horizontally. I think the alignment should be right according to my coding; I just can't figure out why it won't work. Right now I only have a popout for About Us.

Top
Fri, 2009-09-25 15:49
#3
harrierdh
Offline
Last seen: 3 years 21 weeks ago
Enthusiast
Colorado
Timezone: GMT-7
Joined: 2009-07-30
Posts: 83
Points: 20

horizontal menu

In the code you sent in your first post the html is not structured right. The popout

    should be nested inside the

  • tags like this.

    <div id="link1">
  	<ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="aboutus.html">About Us</a>
		<ul>
			<li><a href="juliaw.html">Julia Whitehead</a></li>
			<li><a href="peterm.html">Peter Miller</a></li>
		</ul>
	  </li>
      <li><a href="news.html">In the News</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </div>

Top
Sat, 2009-09-26 05:28
#4
Chis
Offline
Last seen: 3 years 33 weeks ago
newbie
Joined: 2009-09-24
Posts: 3
Points: 0

Ah, it shows up on hover

Ah, it shows up on hover now! Thank you so much!

Top
  • Locked