php侧拉菜单 漂亮，可以向右或者向左展开，支持FF，IE

<link href="../css/right_menu.css" rel="stylesheet" type="text/css">
<div class=c_l>
<div class=menu>
<ul>
<?php
mysql_select_db($database_lr, $lr);
$query = mysql_query("select * from bigclass order by sort");
while($row=mysql_fetch_array($query))
{
$bigclassid=$row['bigclassid'];
$bigclassname_leftmenu=$row['bigclassname'];
if ($htmlname==1){
$bigclass_htmlname_leftmenu=$bigclassname_leftmenu;//大类名称
$bigclass_htmlname_leftmenu=tihuan($bigclass_htmlname_leftmenu);
}
if ($htmlname==0){
$bigclass_htmlname_leftmenu=$bigclassid;
}
?>
<li <?php
//<!--判断是否有小类别-->
mysql_select_db($database_lr, $lr);
$query_num="select count(*) from smallclass where bigclassid='$bigclassid'";
$rs_num=mysql_query($query_num);
$myrow_num = @mysql_fetch_array($rs_num);
$smallclass_num=$myrow_num[0];
if ($smallclass_num>0){
echo "id=arrow";
}
?>>
<a href="<?php echo "../".$htmlcatalogue."".$bigclass_htmlname_leftmenu.".html"?>" class="bigclasslink" > <?php echo $row['bigclassname']?><!--[if ie 7]> <!--></a><!--<![endif]--><!--[if lte ie 6]><table><tr><td><![endif]-->
<?php
mysql_select_db($database_lr, $lr);
$query_small = mysql_query("select * from smallclass where bigclassid='$bigclassid' order by sort");
if ($smallclass_num==0)
{
echo "<ul style='display:none'><li><a title=
href=></a> </li></ul>";
}
else
{
?> <ul>
<?php
while($rs=mysql_fetch_array($query_small))
{
$smallclassid_small_leftmenu=$rs['smallclassid'];
$smallclassname_small=$rs['smallclassname'];//小类名称
if ($htmlname==1){
$smallclass_htmlname=$smallclassname_small;
$smallclass_htmlname= tihuan($smallclass_htmlname);
}
if ($htmlname==0){
$smallclass_htmlname=$smallclassid_small_leftmenu;
}
?>
<li class=b_top>
<a href="<?php echo "../".$htmlcatalogue."".$bigclass_htmlname_leftmenu."_".$smallclass_htmlname."_page_1.html"?>" class="smallclasslink"><?php echo $rs['smallclassname']?></a>
<!--[if lte ie 6.5]><![endif]-->
</li>
<?php
}
?>
</ul>
<?php }?>
<!--[if lte ie 6]></td></tr></table></a><![endif]--></li>
<?php
} ?>
</ul>
</div></div>

ul {
padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px; list-style-type: none
}
li {
padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px; list-style-type: none
}
.c_l {
float: left; width: 200px; background:url(../images/right_menu_bg.jpg);
}
.menu {
z-index: 9999; margin-bottom: 10px; width: 198px;
}
.menu li {
font-weight: bold;float: left; width: 198px; line-height: 26px; height: 26px ;
/*
background: url(../images/line01.gif) repeat-x 50% bottom;
*/
}
.menu li a {
line-height: 26px; height: 26px ;
/*
background: url(../images/line01.gif) repeat-x 50% bottom;
*/
}
#arrow{
background: url(../images/aw02.gif) no-repeat 185px 10px;
line-height: 26px; height: 26px ;
}
.menu li a:hover {
background: #eeeeee; line-height: 26px; position: relative; height: 26px
}
.menu ul ul {
z-index: 9999; right: 185px; position: absolute; top: -10000000px;background:url(../images/right_menu_bg.jpg);/*smallclass right kongzhi celafangxiang*/
}
.menu ul ul li {
display: block; font-weight: normal; background: url(../images/aw02.gif) no-repeat 10px 10px; line-height: 25px! important; top: 0px! important; height: 25px! important
}
.menu ul ul .b_top {
border-left-width: 0px; width: 199px;
}
.menu ul ul .b_top a {
display: block
}
.menu a {
padding-right: 0px; display: block; padding-left: 0px; float: left; padding-bottom: 0px; width: 198px; text-indent: 18px; padding-top: 0px; text-decoration: none
}
.menu a:visited {
padding-right: 0px; display: block; padding-left: 0px; float: left; padding-bottom: 0px; width: 198px; text-indent: 18px; padding-top: 0px; text-decoration: none
}
.menu ul ul li a {
display: block; background: none transparent scroll repeat 0% 0%; color: #000; top: 0px! important; height: 25px! important
}
.menu ul ul li a:visited {
display: block; background: none transparent scroll repeat 0% 0%; color: #000; top: 0px! important; height: 25px! important
}
.menu ul ul li a:hover {
display: block; background: url(../images/aw02.gif) #eee no-repeat 10px 10px; width: 198px; color: #d15400; border-top-style: none; border-right-style: none; border-left-style: none; top: 0px! important; height: 25px! important; border-bottom-style: none
}
.menu table {
padding-right: 0px; padding-left: 0px; padding-bottom: 0px; width: 0px; padding-top: 0px; border-collapse: collapse; height: 0px
}
* html .menu a:hover {
position: relative
}
.menu li:hover {
position: relative
}
.menu ul :hover ul {
top: -1px
}
.menu ul li:hover > a {
background: #eee; position: relative; text-decoration: none
}
.menu ul li ul li:hover > a {
border-top-style: none; border-right-style: none; border-left-style: none; position: relative; top: 0px; border-bottom-style: none
}