css menu works on part of my site but not on the other,
I am working on a site that I have hacked together for many years, hardly
knowing what I was doing when I started and never having the time to
refactor it. I just added DOCTYPE to the top because it had never been
there. Some part of the code on the second link is obviously interfering
with the menu, but I'm not sure where to start.
So, I have Main Page and Item Search I think the main page works in IE and
FF. The item search page displays the menu, but when I mouse over them,
the flyouts do not appear.
I can't post the full source of the page. It's larger than the post limit,
but here's the CSS of the menu: I did not write it myself, but I may have
tweak a part here and there to try to get it closer to what I wanted.
@charset 'UTF-8';
#menu28a{
z-index:99999;
}
/* Some stylesheet reset */
#menu28a > ul {
list-style: none;
margin: 0;
padding: 0;
vertical-align: baseline;
line-height: 1;
text-align: left;
}
/* The container */
#menu28a > ul {
display: block;
position: relative;
width: 174px;
}
/* The list elements which contain the links */
#menu28a > ul li {
display: block;
position: relative;
margin: 0;
padding: 0;
width: 100%;
}
/* General link styling */
#menu28a > ul li a {
display: block;
position: relative;
margin: 0;
border-top: 1px solid #194085;
padding: 7px 20px;
padding-left: 3px;
font-family: Arial, sans-serif;
color: #FFF;
text-decoration: none;
text-transform: capitalize;
font-size: 13px;
font-weight: bold;
background: #0360A3;
}
#menu28a > ul li.active>a {background-color:red;}
/* Rounded corners for the first link of the menu/submenus */
#menu28a > ul li:first-child > a {
border-top: 0;
}
/* Rounded corners for the last link of the menu/submenus */
#menu28a > ul li:last-child > a {
border-bottom: 0;
}
/* The hover state of the menu/submenu links */
#menu28a > ul li > a:hover,
#menu28a > ul li:hover > a {
color: #FF0;
background: #0257AE
}
/* The arrow indicating a submenu */
#menu28a > ul .has-sub > a::after {
content: '';
position: absolute;
top: 10px;
right: 5px;
width: 0px;
height: 0px;
/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #d8d8d8;
}
/* The same arrow, but with a darker color, to create the shadow effect */
#menu28a > ul .has-sub > a::before {
content: '';
position: absolute;
top: 11px;
right: 5px;
width: 0px;
height: 0px;
/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #000;
}
/* Changing the color of the arrow on hover */
#menu28a > ul li > a:hover::after,
#menu28a > ul li:hover > a::after {
border-left: 4px solid #ffffff;
}
#menu28a > ul li > a:hover::before,
#menu28a > ul li:hover > a::before {
border-left: 4px solid rgba(0, 0, 0, 0.3);
}
/* THE SUBMENUS */
#menu28a > ul ul {
position: absolute;
left: 100%;
top: -9999px;
/* padding-left: 5px; */
padding-left: 3px;
opacity: 0;
/* width: 174px; */
/* The fade effect, created using an opacity transition */
-webkit-transition: opacity 0.3s ease-in;
-moz-transition: opacity 0.3s ease-in;
transition: opacity 0.3s ease-in;
}
#menu28a > ul ul.wide { /* we may need several of these */
width: 240px;
}
#menu28a > ul ul li a {
background-color:#0374C7;
}
#menu28a > ul ul li.sub-title a {
background-color:#333333;
color:#FF0;
text-align: center;
font-size: 14px;
font-weight: 700;
text-transform:uppercase;
}
#menu28a > ul ul li.sub-title a:hover {
background-color:#333333;
color:#FF0;
cursor: default;
}
/* Showing the submenu when the user is hovering the parent link */
#menu28a > ul li:hover > ul {
top: 0px;
left: 100%;
opacity: 1;
}
/* ********************************************************** */
/* allow for special HOT color, probably red with yellow text */
/* ********************************************************** */
#menu28a > ul li.hot>a {background-color:red; color: #FF0;}
#menu28a > ul li.hot>a:hover {background-color:red; color: #FF0;}
#menu28a > ul li:hover.hot > a {
color: #FFF;
}
#menu28a > ul ul li.hot a {
background-color:red;
color:#FF0;
}
#menu28a > ul ul li.hot a:hover {
background-color:red;
color:#FF0;
cursor: default;
}
/* ********************************************************** */
Here is part of the code from the page where it does not work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<title>Ball Logo Imprinted Premium Promotional Products & Customer
Appreciation Gifts. Discount Promo Items!</title>
<meta name="description" content="Ball Imprinted with Company Logo. Custom
Printed Ball are Perfect for Trade Shows, Customer Gifts and Premiums.">
<meta name="keywords" content="ball promotional products, ball promotional
products, ball promotional items, promotional items ball, discount ball,
cheap ball, cheap ball, affordable ball, ball affordable, logo imprinted
ball, ball logo imprinted, logo printed ball, ball logo printed, custom
ball, ball custom, ball cutom printed, ball custom imprinted, custom
imprinted ball, discount ball, ball discount, ball at discount prices,
ball trade show giveaways, ball tradeshow giveaways, ball trade show
handouts, ball tradeshow handouts, ball door prizes, ball custom gifts">
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<LINK href="jh-css.css" type='text/css' rel='stylesheet'>
<LINK href="zpromo/zpromo.css" type='text/css' rel='stylesheet'>
<link rel="icon" type="image/png" href="/images/jhstudios.png">
<script type="text/javascript">
function switchDIV(divid){
var divstyle = document.getElementById(divid).style; //declare
the div style into variable
divstyle.display = divstyle.display? "":"block"; //change
display style between default value and block (visible);
}
function showhide(linkid, divid) {
linktext = new
String(document.getElementById(linkid).innerText); //place
link text into variable to compare
hidevar = "Less Info"; //hide text variable
showvar = "More Info"; //show text variable
switchDIV(divid); //switch div style of the referenced div in
the javascript hyperlink
if (linktext == showvar) {
document.getElementById(linkid).innerText =
hidevar; //compare link text variable
} else if (linktext == hidevar) {
document.getElementById(linkid).innerText = showvar;
}
}
</script>
<style>
.hidebox
{
display:none;
padding:10 px;
}
</style>
<script type="text/javascript" src="_pgtres/stmenu.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/slimbox2.js"></script>
<link rel="stylesheet" href="/css/slimbox2.css" type="text/css"
media="screen" />
<script language="javascript" src="zpromo/js_pgselectors.js"></script>
<script type="text/javascript" src="zpromo/js/ajax_filler.js"></script>
</head>
<body>
<div align="center">
<div id="wait">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div id="zpromo_main_wrapper">
<div id="zpromo_header">
<a href="http://www.jhstudios.com" rel="nofollow">
<img class="align-left" src="images/promozjhhdr.jpg" width="415"
height="74" alt="Promotional Products"></a>
<a href="http://www.jhstudios.com/index.php?content=contact"
rel="nofollow"><img class="align-right" src="images/hder2/jhv2_04.gif"
width="249" height="74" alt=""></a>
</div>
<div id="top_nav_holder">
</div>
<script type="text/javascript">
ajax_filler('http://www.jhstudios.com','GET','core_only_page=zp_ajaxable_nav',document.getElementById('top_nav_holder'));
</script>
<div id="zpromo_headIMG" align="center" style="width:972px;
background-color:#000;">
<img border="0" src="zpromo/images/subheaders/default_hdr.jpg" alt=""
width="972" ></div>
<div id="zpromo_content"><style>
.cat_desc_top {
font-family: arial;
font-size: 10pt;
margin-top: 0px;
z-index: 500;
background-color: white;
margin-bottom: 10px;
width: 750;
text-align: justify;
}
.cat_desc_bottom {
font-family: arial;
font-size: 10pt;
margin-top: 15px;
width: 750;
text-align: justify;
}
.catdes { /* category descriptions header */
margin-top:0px;
font-family: arial;
font-size: 12pt;
font-weight: 700;
color: #2F5BE2;
}
.catdesc_bottom { /* category descriptions bottom header */
font-family: arial;
font-size: 18pt;
font-weight: 700;
color: #03427D;
margin-bottom:0px;
}
.author{
font-family: arial;
font-size: 8pt;
font-weight: 500;
color: #9c9c9c;
}
</style>
<table border="0" style="border-collapse: collapse" width="972"
cellpadding="0" cellspacing="0">
<tr>
<td width="175" bgcolor="#0474C8" valign="top" align="center">
<img src="../images/zpromo/left_col_top.jpg" width="175"
height="25"><br><br>
<form style="margin-bottom: 0px;" name="mini_search" method="POST"
action="?promo_premiums=cheap"
onSubmit="mini_search.action=actionchange(mini_search.promotional.value);return
true;">
<input type="text" name="promotional" size="20"><br>
<input type="submit" value="Search" name="B1" style="margin-bottom: 16px;">
</form>
<br>
<a name="quickscroll"></a>
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#111111" width="150"
id="AutoNumber1" bgcolor="#0374C7">
<tr>
<td width="80%"><img src="images/spacer.gif" height="3px"><center>
<font face="Verdana" color="#FFFFFF" style="font-size: 11pt">
<script type="text/javascript">
function showcontact()
{
if (document.getElementById("promo_form").style.display="")
{
return true;
}
else
{
document.getElementById("promo_form").style.display="";
return true;
}
}
</script>
<span id="form_title" style="font-weight: 700; cursor: pointer;
text-decoration: underline;" onClick="showcontact();"><img
src="http://www.jhstudios.com/zpromo/images/col-z-contact-jh.jpg"></span></font></center>
<font color="#FFFFFF" face="Arial" style="font-size: 8pt">
</font>
<center>
<form id="promo_form" style="width: 150px; display: none;" name="contact"
method="post"
action="/?promotional=ball&logo_printed=cheap&css_menu=1&ModPagespeed=0#quickscroll">
<input type="hidden" name="submitted" value="yes">
<p align="left">
<label>
<font color="#FFFFFF" style="font-size: 8pt" face="Arial">*</font><font
face="Verdana"><font color="#FFFFFF" style="font-size: 9pt">Name:
</font><font size="2"><b><br>
</b></font>
<input id="Name" style="FONT-WEIGHT: 700" accessKey="N" tabIndex="1"
size="18" value="" name="Name"><b><font size="2"><br>
</font></b></font><b><font color="#FFFFFF" face="Arial"
style="font-size: 8pt">
*</font></b></label><font face="Verdana"><font style="font-size:
9pt"><font color="#FFFFFF"><label for="Phone">Phone
Number:</label></font><b> </b>
</font>
<input id="Phone" style="FONT-WEIGHT: 700" accessKey="P" tabIndex="2"
size="18" value="" name="Phone"><b><font size="2"><br>
</font>
</b></font><b><font color="#FFFFFF" style="font-size: 8pt"
face="Arial">*</font></b><font face="Verdana"><font color="#FFFFFF"
style="font-size: 9pt"><label for="Email">E-mail
Address:</label></font><font size="2"><b>
</b></font>
<input id="Email" style="FONT-WEIGHT: 700" accessKey="E" tabIndex="3"
size="18" value="" name="Email"><br>
<font color="#FFFFFF"><span style="font-size: 9pt">Subscribe to our
newsletter:</span><span style="font-size: 9pt; font-weight: 700">
</span></font></font>
<font style="font-size: 9pt; font-weight: 700" face="Verdana"
color="#FFFFFF">
<br>
<input type="radio" CHECKED value="yes" name="subscribe"></font><font
face="Verdana" color="#FFFFFF"><font style="font-size: 9pt"
face="Verdana">yes</font><span style="font-size: 9pt; font-weight:
700">
</span></font>
<font style="font-size: 9pt; font-weight: 700" face="Verdana"
color="#FFFFFF">
<input type="radio" value="no" name="subscribe"></font><font
style="font-size: 9pt" face="Verdana"><font
color="#FFFFFF">no</font><br>
</font><font face="Verdana"><font size="2"><b> </b></font><label
for="Question"><font color="#FFFFFF" style="font-size: 9pt">How
may we help you?</font></label><font size="2"><b>
</b></font></font><font color="#000000">
<textarea id="Question" accessKey="H" tabIndex="4" name="Question"
rows="8" wrap="physical" cols="16"></textarea></font>
<center>
<input type="submit" value="Submit" name="Submit"></center>
</form>
</center>
</td>
</tr>
</table>
</center>
</div>
<div align="left" style="width: 175px; overflow: hidden;">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link id="cssmenu_loader" rel="stylesheet" type="text/css"
href="/cssmenu/blue_menu.css" />
<div id="menu28a">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li class="has-sub hot"><a name="hot"><span>Hot Products</span></a>
<ul class="wide">
<li class="sub-title hot"><a name="popular"><span>Most Popular
Products</span></a></li>
<li><a
href="http://www.jhstudios.com/?microfiber=adhesive_phone_cleaning_pads"><span>Cell
Phone Screen Cleaners</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional_giveaways=pizza_cutters"><span>Pizza
Cutters</span></a></li>
<li><a
href="http://www.jhstudios.com/?full_color_custom=mouse_pads"><span>Custom
Mouse Pads</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=tumblers_straw&affordable_premiums=advanced_search_results&Category=94"><span>Tumblers</span></a></li>
</ul>
</li>
<li class=" has-sub"><a name="apparel"><span>Apparel & Headwear</span></a>
<ul class="wide">
<li class="sub-title"><a name="clothing"><span>Clothing &
Headwear</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=aprons&logo_imprinted=cheap"><span>Aprons</span></a></li>
<li class="has-sub"><a name="headwear"><span>Headwear</span></a>
<ul>
<li><a
href="http://www.jhstudios.com/?promotional=bandanas&logo_printed=cheap"><span>Bandanas</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=baseball_caps&logo_printed=cheap"><span>Baseball
Caps</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=beanie_not_bamboo_not_nylon&logo_printed=advanced_search_results&Category=143"><span>Beanies</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=brim_hat&logo_printed=cheap"><span>Hats</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=hard_hat_not_toy_not_party&branded_items=advanced_search_results&Category=143"><span>Hard
Hats</span></a></li>
<li class="last"><a
href="http://www.jhstudios.com/?promotional=tennis_visor&affordable_premiums=cheap"><span>Tennis
Visor</span></a></li>
</ul>
</li>
<li><a
href="http://www.jhstudios.com/?promotional=t-shirts&affordable_premiums=cheap"><span>T-Shirts</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=golf_shirts&branding_products=cheap"><span>Golf
Shirts</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=dress_shirts&promotional_items=cheap"><span>Dress
Shirts</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=hoodies&branded_items=advanced_search_results&Category=833"><span>Hoodies</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=sweatshirt_not_hood_not_hoodie&affordable_promotional_products=advanced_search_results&Category=262"><span>Sweatshirts</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=jackets&premiums=cheap"><span>Jacktes</span></a></li>
<li class="last"><a
href="http://www.jhstudios.com/?promotional=uniforms&handouts=advanced_search_results&Category=295"><span>Uniforms</span></a></li>
</ul>
</li>
<li class=" has-sub"><a name="awards_recognition"><span>Awards &
Recognition</span></a>
<ul class="wide">
<li class="sub-title"><a name="awards"><span>Awards &
Recognition</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=aprons&logo_imprinted=cheap"><span>Awards</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=certificate_frames&promo_items=advanced_search_results&Category=427"><span>Certificate
& Diploma Holders</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=clocks&promo_items=advanced_search_results&Category=82"><span>Clocks</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=coins&promo_items=advanced_search_results&Category=86"><span>Commemorative
Coins</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=ribbon&affordable_promotional_items=advanced_search_results&Category=392"><span>Medals</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=plaques&imprinted_marketing_items=advanced_search_results&Category=231"><span>Plaques</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=trophies&affordable_premiums=advanced_search_results&Category=293"><span>Trophies</span></a></li>
<li class="last"><a
href="http://www.jhstudios.com/?promotional=watches_not_heart_not_lightweight&marketing_handouts=advanced_search_results&PriceLow=136.84&PriceHigh=842.11&Qty=6&Category=301"><span>Recognition
Watches</span></a></li>
</ul>
</li>
<!-- xxxxxxxxxxxx -->
<li class=" has-sub"><a name="awards_recognition"><span>Bags &
Totes</span></a>
<ul class="wide">
<li class="sub-title"><a name="awards"><span>Bags &
Totes</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=backpacks&logo_printed=advanced_search_results&Category=357"><span>Backpacks</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=mesh_not_duffel_not_cooler&trade_show_giveaways=advanced_search_results&Category=20"><span>Canvas
& Beach Bags</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=bag&logo_printed=advanced_search_results&Category=91"><span>Cooler
Bags</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=drawstring&promotional_items=advanced_search_results&Category=20"><span>Drawstring
Bags</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=duffel&promotional_items=advanced_search_results&Category=20"><span>Duffel
Bags</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=gift_not_plastic&branding_products=advanced_search_results&Category=20"><span>Gift
Bags</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=gym_not_tote_not_backpack&branding_products=advanced_search_results&Category=20"><span>Gym
Bags</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=laptop_bag&imprinted_premiums=cheap"><span>Laptop
Bags</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=lunch&imprinted_premiums=advanced_search_results&Category=20"><span>Lunch
Bags</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=document_bag&promotional_items=advanced_search_results&Category=20"><span>Messenger
& Document Bags</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=euro_tote&promotional_products=advanced_search_results&Category=20"><span>Paper
Bags</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=die_cut&promotional_items=advanced_search_results&Category=20"><span>Plastic
Bags</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=reusable_bags&affordable_promotional_items=advanced_search_results&Category=20"><span>Reusable
Bags</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=shopping_bag_not_woven&affordable_promotional_products=advanced_search_results&Category=20&pagenum=2"><span>Shopping
Bags</span></a></li>
<li class="last"><a
href="http://www.jhstudios.com/?promotional=bag&logo_printed=advanced_search_results&Category=375"><span>Travel
Bags</span></a></li>
</ul>
</li>
<!-- xxxxxxxxxxxx -->
<!-- xxxxxxxxxxxx -->
<li class=" has-sub"><a name="awards_recognition"><span>Awards &
Recognition</span></a>
<ul class="wide">
<li class="sub-title"><a name="awards"><span>Awards &
Recognition</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=aprons&logo_imprinted=cheap"><span>Awards</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=certificate_frames&promo_items=advanced_search_results&Category=427"><span>Certificate
& Diploma Holders</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=clocks&promo_items=advanced_search_results&Category=82"><span>Clocks</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=coins&promo_items=advanced_search_results&Category=86"><span>Commemorative
Coins</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=ribbon&affordable_promotional_items=advanced_search_results&Category=392"><span>Medals</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=plaques&imprinted_marketing_items=advanced_search_results&Category=231"><span>Plaques</span></a></li>
<li><a
href="http://www.jhstudios.com/?promotional=trophies&affordable_premiums=advanced_search_results&Category=293"><span>Trophies</span></a></li>
<li class="last"><a
href="http://www.jhstudios.com/?promotional=watches_not_heart_not_lightweight&marketing_handouts=advanced_search_results&PriceLow=136.84&PriceHigh=842.11&Qty=6&Category=301"><span>Recognition
Watches</span></a></li>
</ul>
</li>
<!-- xxxxxxxxxxxx -->
<li class=" has-sub"><a href="#"><span>Store</span></a>
<ul>
<li class="sub-title"><a href="#"><span>our Store</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li class="has-sub"><a href="#"><span>Product 1</span></a>
<ul>
<li><a href="#"><span>Sub Product</span></a></li>
<li class="last"><a href="#"><span>Sub Product</span></a></li>
</ul>
</li>
<li><a href="#"><span>About</span></a></li>
<li class="has-sub"><a href="#"><span>Product 2</span></a>
<ul>
<li><a href="#"><span>Sub Product</span></a></li>
<li class="last"><a href="#"><span>Sub Product</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>
<div style="clear:both; margin: 0 0 30px 0;"> </div></div>
No comments:
Post a Comment