jasonpc1
05-10-2010, 08:02 AM
I have a menu with a sub menu.
all menu items have the same background image
when an item is click the background changes to the menubutton-active background
when someone hovers over this item there is an menubutton-active:hover background
when someone clicks a sub menu item the fist click menu stays the same background and the sub item has yet another background 'SUBmenubutton'
and like above when hovered over it has a new background 'SUBmenubutton:hover'
but for some reason i can not figure out how to do this.
i previously had this all working in tables and have moved over to CSS but can not get the same results.
here is my non working css version...
what i would like is to do away with the tables completely
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
*{ margin:0; padding:0; }
body { background: #fff; }
#wrap { width: 99%; margin: 0 auto; min-width: 700px; }
#header { height: 60px; padding: 0px 5px 3px 10px; background: #7AB3D2; font-style: italic; font-size: 3em; font-family: Blackadder ITC;}
#menu { list-style: none; background: #7AB3D2; padding: 10px; float: left; width: 155px; } /* the width here should be 20 less than the width in the content */
#menu li a { display: block; padding: 3px 0px 3px 0px; margin: 5px 0 5px 0; background: url(images/menubutton.gif); background-repeat: no-repeat; background-position: center center; text-decoration: none; text-align: center; }
#menu li a:hover { display: block; padding: 3px 0px 3px 0px; margin: 5px 0 5px 0; background: url(images/menubutton_h.gif); background-repeat: no-repeat; background-position: center center; text-decoration: none; text-align: center; }
menubutton { background: url(images/menubutton.gif); background-repeat: no-repeat; background-position: center center; text-align: center; }
menubutton:hover { background: url(images/menubutton_h.gif); background-repeat: no-repeat; background-position: center center; text-align: center; }
menubutton-active { background: url(images/menubutton_h.gif); background-repeat: no-repeat; background-position: center center; text-align: center; }
menubutton-active:hover { background: url(images/menubutton.gif); background-repeat: no-repeat; background-position: center center; text-align: center; }
div.menuindent { margin: 0px 0px 0px 4px; }
SUBmenubutton { background: url(images/SUBmenubut ton.gif); background-repeat: no-repeat; background-position: center center; }
SUBmenubutton:hover { background: url(images/SUBmenubutton_h.gif); background-repeat: no-repeat; background-position: center center; }
SUBmenubutton-active { background: url(images/SUBmenubutton_h.gif); background-repeat: no-repeat; background-position: center center; }
SUBmenubutton-active:hover { background: url(images/SUBmenubutton.gif); background-repeat: no-repeat; background-position: center center; }
a.one { color: #fff; text-decoration: none; }
td a.one { display:block; height:100%; }
</style>
</head>
<body>
<ul id="menu">
<li><a href="?ac=item1" class="one">item1</a></li>
<? if ($_GET['ac'] == "item1") { ?>
<table>
<tr>
<td align="left" valign="top" <? if ($_GET['ac'] == "item1") { ?>class="SUBmenubutton-active"<? } else { ?>class="SUBmenubutton"<? } ?>>
<div class="menuindent">
<? if ($_GET['i'] != '1') {?><a href="?ac=item1&i=1" class="menu"><? }?>item1-1<? if ($_GET['i'] != '1') {?></a><? }?>
</div>
</td>
</tr>
</table>
<? } ?>
<li><a href="?ac=item2" class="one">item 2</a></li>
<? if ($_GET['ac'] == "item2") { ?>
<table>
<tr>
<td align="left" valign="top" <? if ($_GET['ac'] == "item2") { ?>class="SUBmenubutton-active"<? } else { ?>class="SUBmenubutton"<? } ?>>
<div class="menuindent">
<? if ($_GET['i'] != '1') {?><a href="?ac=item2&i=1" class="menu"><? }?>item2-1<? if ($_GET['i'] != '1') {?></a><? }?>
</div>
</td>
</tr>
</table>
<? } ?>
</ul>
</body>
</html>
all menu items have the same background image
when an item is click the background changes to the menubutton-active background
when someone hovers over this item there is an menubutton-active:hover background
when someone clicks a sub menu item the fist click menu stays the same background and the sub item has yet another background 'SUBmenubutton'
and like above when hovered over it has a new background 'SUBmenubutton:hover'
but for some reason i can not figure out how to do this.
i previously had this all working in tables and have moved over to CSS but can not get the same results.
here is my non working css version...
what i would like is to do away with the tables completely
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
*{ margin:0; padding:0; }
body { background: #fff; }
#wrap { width: 99%; margin: 0 auto; min-width: 700px; }
#header { height: 60px; padding: 0px 5px 3px 10px; background: #7AB3D2; font-style: italic; font-size: 3em; font-family: Blackadder ITC;}
#menu { list-style: none; background: #7AB3D2; padding: 10px; float: left; width: 155px; } /* the width here should be 20 less than the width in the content */
#menu li a { display: block; padding: 3px 0px 3px 0px; margin: 5px 0 5px 0; background: url(images/menubutton.gif); background-repeat: no-repeat; background-position: center center; text-decoration: none; text-align: center; }
#menu li a:hover { display: block; padding: 3px 0px 3px 0px; margin: 5px 0 5px 0; background: url(images/menubutton_h.gif); background-repeat: no-repeat; background-position: center center; text-decoration: none; text-align: center; }
menubutton { background: url(images/menubutton.gif); background-repeat: no-repeat; background-position: center center; text-align: center; }
menubutton:hover { background: url(images/menubutton_h.gif); background-repeat: no-repeat; background-position: center center; text-align: center; }
menubutton-active { background: url(images/menubutton_h.gif); background-repeat: no-repeat; background-position: center center; text-align: center; }
menubutton-active:hover { background: url(images/menubutton.gif); background-repeat: no-repeat; background-position: center center; text-align: center; }
div.menuindent { margin: 0px 0px 0px 4px; }
SUBmenubutton { background: url(images/SUBmenubut ton.gif); background-repeat: no-repeat; background-position: center center; }
SUBmenubutton:hover { background: url(images/SUBmenubutton_h.gif); background-repeat: no-repeat; background-position: center center; }
SUBmenubutton-active { background: url(images/SUBmenubutton_h.gif); background-repeat: no-repeat; background-position: center center; }
SUBmenubutton-active:hover { background: url(images/SUBmenubutton.gif); background-repeat: no-repeat; background-position: center center; }
a.one { color: #fff; text-decoration: none; }
td a.one { display:block; height:100%; }
</style>
</head>
<body>
<ul id="menu">
<li><a href="?ac=item1" class="one">item1</a></li>
<? if ($_GET['ac'] == "item1") { ?>
<table>
<tr>
<td align="left" valign="top" <? if ($_GET['ac'] == "item1") { ?>class="SUBmenubutton-active"<? } else { ?>class="SUBmenubutton"<? } ?>>
<div class="menuindent">
<? if ($_GET['i'] != '1') {?><a href="?ac=item1&i=1" class="menu"><? }?>item1-1<? if ($_GET['i'] != '1') {?></a><? }?>
</div>
</td>
</tr>
</table>
<? } ?>
<li><a href="?ac=item2" class="one">item 2</a></li>
<? if ($_GET['ac'] == "item2") { ?>
<table>
<tr>
<td align="left" valign="top" <? if ($_GET['ac'] == "item2") { ?>class="SUBmenubutton-active"<? } else { ?>class="SUBmenubutton"<? } ?>>
<div class="menuindent">
<? if ($_GET['i'] != '1') {?><a href="?ac=item2&i=1" class="menu"><? }?>item2-1<? if ($_GET['i'] != '1') {?></a><? }?>
</div>
</td>
</tr>
</table>
<? } ?>
</ul>
</body>
</html>