Hello All
I am trying to rework an existing css dynamic menu
because we are having problems with its use of
backgroundImage in the <UL> tag. There is a huge lag
with the hover; the images go blank. Any thoughts on
why this is happening appreciated.
First a side question and then I will post some code.
(Hopefully not too lengthy)
What is the best tag(s) to use for css dynamic menus?
Table? Div? <P>? or List?
Here is a snippet of the css code and html:
CSS
.menu {
width: 164px;
/*border:solid 1px #003366;*/
border-style: none;
background:none;
padding: 0px;
margin: 0px;
}
.menu a, .menu .menu_top {
font-size: 8pt;
color:#000000;
font-family: Verdana, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: none;
border-color: #ccc #888 #555 #bbb;
margin: 0px;
padding:0px;
}
.menu .menu_top {
color: #ffffff;
text-transform: uppercase;
}
.menu1 {
width: 164px;
height: 19px;
background-image:url('/images/interior/aboutus_08.gif');
background-repeat:no-repeat;
}
.menu1:hover {
background-image:url('/images/interior/aboutus_ro_08.gif');
background-repeat:no-repeat;
}
/* Products */
.menu2 {
width: 164px;
height: 23px;
background-image:url('/images/interior/products_09.gif');
background-repeat:no-repeat;
}
.menu2:hover {
background-image:url('/images/interior/products_ro_09.gif');
background-repeat:no-repeat;
}
.submenu1 {
font-size: 8pt;
background-color:#cccccc;
color: #ffffff;
display: none;
visibility: hidden;
}
.submenu1Item {
font-size: 8pt;
font-family: Verdana, helvetica, sans-serif;
border-top:solid 1px #000000;
margin: 0;
background: #cccccc;
}
HTML
<div class="menu">
<ul class="menu1" ><li><span class="menu_top"><a
href="/about/index.php"><img src="/images/spacer.gif"
alt="About Us" width="140" height="10"
border="0"></a></span></li></ul>
<ul class="menu2">
<li><span class="menu_top"><a
href="/products/index.php" title="text"><img
src="/images/spacer.gif" alt="Products"
name="tab_products" id="tab_products" width="140"
height="15" border="0"></a></span>
<ul style="top:0px;left:164px;">
<li id="twopiece_top"><a
href="javascript:showSubMenu('twopiece',1);"
class="menulink"><img src="/images/home/menuPlus.gif"
alt="" name="twopiece_img" id="twopiece_img"
width="10" height="10" hspace="3" vspace="3"
border="0" align="right">text</a>
<div class="submenu1" id="twopiece">
<div class="submenu1Item"><a
href="/products/text.php" title="text"
class="submenulink" style="padding-left:30px;">text
</a></div>
<div class="submenu1Item"><a
href="/products/text.php"
title="text"class="submenulink"
style="padding-left:30px;">text</a></div>
<div class="submenu1Item"><a
href="/products/text.php"
title="text"class="submenulink"
style="padding-left:30px;">text</a></div>
<div class="submenu1Item"><a
href="javascript:showSubMenu('nonl',1);"
class="submenulink" style="padding-left:30px;"><img
src="/images/home/menuPlus.gif" alt="" name="nonl_img"
id="nonl_img" width="10" height="10" hspace="3"
vspace="3" border="0" align="right">v 22</a>
<div class="submenu2" id="nonl">
<div
class="submenu1Item2"><a
href="/products/vvs.php" title="vvs"
class="submenulink2"
style="padding-left:45px;">text</a></div>
<div
class="submenu1Item2"><a
href="/products/vsa.php" title="vsa"
class="submenulink2"
style="padding-left:45px;">text</a></div>
</div>
</div>
</div>
</li>
<li><a href="/products/text.php" title="text"
class="menulink">text</a></li>
<li><a href="javascript:showSubMenu('d',1);"
class="menulink"><img src="/images/home/menuPlus.gif"
alt="" name="dd_img" id="dd_img" width="10"
height="10" hspace="3" vspace="3" border="0"
align="right">text</a>
<div class="submenu1" id="d">
<div class="submenu1Item"><a
href="/products/d.php" title="d" class="submenulink"
style="padding-left:30px;">d</a></div>
<div class="submenu1Item"><a
href="/products/dd.php" class="submenulink"
style="padding-left:30px;">dd</a></div>
<div class="submenu1Item"><a
href="/products/ddd.php" title="ddd"
class="submenulink"
style="padding-left:30px;">ddd</a></div>
</div>
</li>
</ul>
</li>
</ul>
</div>
Thanks
Adam
____________________________________________________________________________________
Be a better sports nut! Let your teams follow you
with Yahoo Mobile. Try it now.
http://mobile.yahoo.com/sports;_ylt=At9_qDKvtAbMuh1G1SQtBI7ntAcJ
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
