Jump to content
dev osCommerce
Forum
  • Checkout
  • Login
  • Contact Us
  • Get in touch

osCommerce

The e-commerce.

New Demo
Our Partners

Problems with CSS fly out Menu

ELnew

By ELnew
in General Support

Recommended Posts

ELnew

ELnew

Posted
Posted

Check out my site, www.eleatherline.com you'll see the Menu that isn't functioning properly.

 

**Please keep in mind this is a LIVE store**

 

This is my CSS for the menu.....

 

#background {width:999px; height:px;padding-top:px;}

.preload1 {background: url('images/tab.png.gif');}
.preload2 {background: url('images/tabb_on.png.gif');}

.menu2 {padding:0 0 0 32px; margin:0; list-style:none; height:36px; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
.menu2 li.topp {display:block; float:left;}
.menu2 li a.topp_link {display:block; float:left; height:36px; color:#444; text-decoration:none; }

.menu2 li a.topp_link span {display:block; height:36px; float:left; line-height:27px; font-size:11px; font-weight:bold; padding:0 10px; cursor:pointer; background: url('images/tab_off.png') no-repeat;}
.menu2 li a.topp_link b {display:block; width:15px; height:36px; float:left; background: url('images/tabb_off.png') no-repeat;}
.menu2 li a.topp_link b.down {background: url('images/tabdown_off.png') no-repeat;}

.menu2 li a.topp_link:hover span {color:#fff; background: url('images/tab.png') no-repeat; line-height:26px;}
.menu2 li a.topp_link:hover b {color:#fff; background: url('images/tabb_on.png') no-repeat;}

.menu2 li:hover > a.topp_link span {color:#fff; background: url('images/tab.png') no-repeat; line-height:26px;}
.menu2 li:hover > a.topp_link b {color:#fff; background: url('images/tabb_on.png') no-repeat;}
.menu2 li:hover > a.topp_link b.down {color:#fff; background: url('images/tabdown_on.png') no-repeat;}


.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

.menu2 a:hover {visibility:visible; position:relative; z-index:200;}
.menu2 li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
.menu2 ul, 
.menu2 :hover ul ul, 
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu2 :hover ul.sub {left:0; top:32px; white-space:nowrap; width:120px; height:auto; z-index:300;}
.menu2 :hover ul.sub li {display:block; height:20px; float:left; width:120px; font-weight:normal; background: url('images/submid.png');}
.menu2 :hover ul.sub li.fly {background: url('images/submid_r.png');}

.menu2 :hover ul.sub li a {display:block; position:relative; font-size:11px; height:20px; width:120px; line-height:20px; text-indent:10px; color:#000; text-decoration:none;background:url('images/trans.gif');}
.menu2 :hover ul.sub li a:hover {color:#fff;}

.menu2 :hover ul.sub :hover > a {color:#fff;}

.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:120px; top:0; white-space:nowrap; width:120px; z-index:400; height:auto;}

.menu2 :hover ul.sub li.subtop,
.menu2 :hover ul :hover ul li.subtop,
.menu2 :hover ul :hover ul :hover ul li.subtop,
.menu2 :hover ul :hover ul :hover ul :hover ul li.subtop
{background:url('images/subtop.png');}

.menu2 :hover ul.sub li.flytop,
.menu2 :hover ul :hover ul li.flytop,
.menu2 :hover ul :hover ul :hover ul li.flytop,
.menu2 :hover ul :hover ul :hover ul :hover ul li.flytop
{background: url('images/subtop_r.png');}

.menu2 :hover ul.sub li.subbot,
.menu2 :hover ul :hover ul li.subbot,
.menu2 :hover ul :hover ul :hover ul li.subbot,
.menu2 :hover ul :hover ul :hover ul :hover ul li.subbot
{height:30px; background:url('images/subbottom.png');}

.menu2 :hover ul.sub li.flybot,
.menu2 :hover ul :hover ul li.flybot,
.menu2 :hover ul :hover ul :hover ul li.flybot,
.menu2 :hover ul :hover ul :hover ul :hover ul li.flybot
{height:30px; background: url('images/subbottom_r.png');}

 

This is my html for the menu

 

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />



<link rel="stylesheet" media="all" type="text/css" href="stylesheet.css" />

<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="stylesheet.css" />
<![endif]-->

</head>

<span class="preload1"></span>
<span class="preload2"></span>
<div id="background">
<ul class="menu2">
<li class="topp"><a href="" id="contacts" class="topp_link"><span><font color="red">U</font><font color="black">S</font><font color="blue">A</font> Line</span><b class="down"></b><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="sub">
		<li class="subtop">    Coming</a></li>

		<li class="subbot">             Soon!<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			</ul>

<li class="topp"><a href="" id="services" class="topp_link"><span>Men</span><b class="down"></b><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="sub">
		<li class="flytop"><a href="">Men's Apparel<!--[if gte IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul>
					<li class="subtop"><a href="../mozilla/">Men's Jackets</a></li>
					<li class="fly"><a href="../ie/">Men's Shirts<!--[if gte IE 7]><!--></a><!--<![endif]-->

									<!--[if lte IE 6]><table><tr><td><![endif]-->
									<ul>
										<li class="subtop"><a href="../ie/">Leather Shirts</a></li>
										<li><a href="../opacity/">T-Shirts</a></li>
										<li><a href="../opacity/">Long Sleeve</a></li>
										<li class="subbot"><a href="../menu/">Sleeveless</a></li>

									</ul>
									<!--[if lte IE 6]></td></tr></table></a><![endif]-->
								</li>

					<li><a href="../ie/">Men's Vests</a></li>
					<li class="subbot"><a href="../opacity/">Leather Pants</a></li>
				</ul>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>

		<li class="flybot"><a href="../layouts/">Men's Accessories<!--[if gte IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]-->
					<ul>
					<li class="subtop"><a href="../mozilla/">Men's Wallets</a></li>
					<li class="subbot"><a href="../opacity/"><font color="black">More Coming Soon</font></a></li>
				</ul>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->


	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="topp"><a href="" id="products" class="topp_link"><span>Women</span><b class="down"></b><!--[if gte IE 7]><!--></a><!--<![endif]-->

	<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="sub">
		<li class="flytop"><a href="../menu/">Women's Apparel<!--[if gte IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul>
					<li class="subtop"><a href="../mozilla/">Women's Jackets</a></li>
					<li class="fly"><a href="../ie/">Women's Shirts<!--[if gte IE 7]><!--></a><!--<![endif]-->
									<!--[if lte IE 6]><table><tr><td><![endif]-->
									<ul>
										<li class="subtop"><a href="../ie/">Tank Tops</a></li>

										<li class="subbot"><a href="../menu/">Thermals</a></li>

									</ul>
									<!--[if lte IE 6]></td></tr></table></a><![endif]-->
								</li>

					<li><a href="../ie/">Women's Vest</a></li>

					<li class="subbot"><a href="../opacity/">Women's Pants</a></li>
				</ul>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
		<li class="flybot"><a href="../boxes/">Accessories<!--[if gte IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]-->
					<ul>
					<li class="subtop"><a href="../mozilla/">Women's Wallets</a></li>
					<li class="subbot"><a href="../opacity/"><font color="black">More Coming Soon</font></a></li>
				</ul>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->


</ul>
				<!--[if lte IE 6]><table><tr><td><![endif]-->
				</li>

<li class="topp"><a href="" id="shop" class="topp_link"><span>   Youth</span><b></b><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->

</li>

<li class="topp"><a href="" id="shop" class="topp_link"><span>   Big & Tall</span><b></b><!--[if gte IE 7]><!--></a><!--<![endif]-->

</li>


<li class="topp"><a href="" id="shop" class="topp_link"><span>Biker Gear</span><b class="down"></b><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="sub">
		<li class="subtop"><a href="">Chaps & Pants</a></li>
		<li class="fly"><a href="">Biker Bags<!--[if gte IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul>
					<li class="subtop"><a href="../mozilla/">Belt Bags</a></li>
					<li><a href="../ie/">Luggage Bags</a></li>
					<li><a href="../ie/">Tool Bags</a></li>
					<li class="subbot"><a href="../opacity/">Windshield Bags</a></li>
				</ul>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>



		<li class="fly"><a href="">Riding Gloves<!--[if gte IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul>
					<li class="subtop"><a href="../mozilla/">Basic Riding</a></li>
					<li><a href="../ie/">Fingerless</a></li>
					<li><a href="../ie/">Padded & Insulated</a></li>
					<li><a href="../ie/">Premium Riding</a></li>
					<li><a href="../ie/">Ultra Riding</a></li>
					<li class="subbot"><a href="../opacity/">Women's Ultra</a></li>
				</ul>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>




		<li class="flybot"><a href="">Accessories<!--[if gte IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul>
					<li class="subtop"><a href="../mozilla/">Tank Dividers</a></li>
					<li><a href="../ie/">Throttle Covers</a></li>
					<li class="subbot"><a href="../opacity/">Lever Covers</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 class="topp"><a href="" id="shop" class="topp_link"><span>Western</span><b class="down"></b><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="sub">
		<li class="subtop"><a href="">Western Wear</a></li>
		<li><a href="">Kidswear</a></li>
		<li><a href="">Handbags</a></li>
		<li class="subbot"><a href="">Headwear</a></li>
	</ul>

	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>


<li class="topp"><a href="" id="shop" class="topp_link"><span>Handbags</span><b class="down"></b><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="sub">
		<li class="subtop"><a href="">Backpacks</a></li>
		<li><a href="">Waistbags</a></li>
		<li><a href="">Purses</a></li>
		<li class="subbot"><a href="">Western</a></li>
	</ul>

	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>


<li class="topp"><a href="" id="shop" class="topp_link"><span>Travel Bags</span><b class="down"></b><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="sub">
		<li class="subtop">    Coming</a></li>

		<li class="subbot">             Soon!<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			</ul>



<li class="topp"><a href="" id="shop" class="topp_link"><span>Headwear</span><b class="down"></b><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="sub">
		<li class="subtop"><a href="../ie/">Ascots</a></li>
		<li><a href="../opacity/">Skull Caps</a></li>
		<li><a href="../opacity/">Straw</a></li>
		<li><a href="../opacity/">Winter</a></li>
		<li><a href="../opacity/">Faux Felt</a></li>
		<li class="subbot"><a href="../menu/">Wool Felt</a></li>
	</ul>

	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>



<li class="topp"><a href="" id="shop" class="topp_link"><span>   Holsters</span><b></b><!--[if gte IE 7]><!--></a><!--<![endif]-->



</ul>
</div>

The main menu displays properly, yet the drop down and fly out menus will not appear and I'm quite dumbfounded. Any help on this is appreciated. Thanks in advance.

 

~Parker

Link to comment
Share on other sites
spooks

spooks

Posted
Posted

The way these work is highly dependant on the doc type, have you set that correctly.

 

Many contribs include some javascript to avoid the doc type issue.

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites
ELnew

ELnew

Posted
  • Author
Posted
The way these work is highly dependant on the doc type, have you set that correctly.

 

Many contribs include some javascript to avoid the doc type issue.

 

 

This is just simple CSS/HTML so no javascript was needed, just like my main menu, it was the same CSS/HTML....

 

I will mess around with the Doc Type Strict is what I think it should be. Regardless I'll check the other two.

Link to comment
Share on other sites
Guest

Guest

Posted
Posted

This was taken from your source code

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="LTR" lang="en">
<head>
<meta content="Leather goods, leather bags, leather handbags, leather, biker bags, chaps, belt bags, luggage bags, leather, Estelle's Leather, leather gloves, biker accessories, leather products, eleatherline, e leather, online leather" name="keywords">
<meta content="The best online source to find top quality leather goods at a truly low cost!" name="description">

<title>Home  - ELeatherline.com - Estelles Leather Stop</title>
<meta name="Description" content="Home Page of eleatherline.com - Welcome Online Home of Estelles Leather Stop" />
<meta name="Keywords" content="Leather goods, leather bags, leather handbags, leather, biker bags, chaps, belt bags, luggage bags, Estelles Leather, leather gloves, biker accessories, leather products, eleatherline, e leather, online leather, home, index, welcome, main, categories, safe, secure, leather" />
<meta name="robots" content="noodp" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- EOF: Generated Meta Tags -->


<base href="http://eleatherline.com/estellesleatherstop/">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
<!-- header //-->
<table width="800" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#800000">





 <tr>
   <td bgcolor="#ffffff">

<table border="0" width="100%" cellspacing="0" cellpadding="0">
 <tr class="header">
<td valign="middle"><a href="http://eleatherline.com/estellesleatherstop/index.php"><img src="images/logo.gif" border="0" alt="Estelle`s Leather Stop" title=" Estelle`s Leather Stop " width="999" height="217"></a></td>
 </tr>
</table>














<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="Author" content="Parker Lukjanovs" />

<link rel="stylesheet" type="text/css" href="stylesheet.css" />


</head>

<body>

2 doctypes head sections and body tags. Could be your problem.

Link to comment
Share on other sites
ELnew

ELnew

Posted
  • Author
Posted
2 doctypes head sections and body tags. Could be your problem.

 

Thank you for pointing this out, and now I know this is the problem....ONLY I have removed the doc type and body tags in my header file(that's were both menus are) but on default my site is set to transitional, does anyone know how to change this to strict? Because my menu's will only work with Strict css/html.

Link to comment
Share on other sites
ELnew

ELnew

Posted
  • Author
Posted

Well my main menu works with transitional, yet my new drop down and fly out menu seems to only function correctly when using a strict doc type.

Link to comment
Share on other sites
ELnew

ELnew

Posted
  • Author
Posted

Edited index.php to work properly with the menus :] Now all I have to do is fix the CSS....thanks much for the suggestion, it really helped!

 

~Parker

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...