100分求一个菜单代码

<div style="margin: 0px auto; text-align: center; padding: 0px">
            <div class="hui">
                <div class="top">
                    <img src="/images/logo.gif" width="214" height="96" />
                    <ul class="nav">
                        <li id="navli"><a href="#" 首页</a></li>
                        <li><a href="#" >租房</a></li>
                        <li><a href="#" >二手房</a></li>
                        <li><a href="#" >新楼盘</a></li>
                        <li><a href="#" >商铺</a></li>
                        <li><a href="#" >写字楼</a></li>
                        <li><a href="#" ><font
                            color="#ffd800">登录/发布</font></a></li>
                    </ul>
                </div>
            </div>
鼠标放上去,菜单变暗其实就是鼠标放上去菜单上放一张图片,点击之后,选中的那个颜色变红,其他颜色不变,我知道用JS控制,可是不知道代码该怎么写.

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

鼠标js事件是onmousedown 当鼠标落下的时候触发的一个事件，但是楼主这样做就把菜单定死了，可以换用一个动态菜单啊，树状菜单，树状菜单里边可以加一些js或者样式之类的东西就可以实现楼主想要的效果
<style>
.conn_js{
width:214px;
height:96px;
background-image:url(1.jpg);//改变的图片；
background-repeat;no-repeat;
}
.conn_y{
width:214px;
height:96px;
border:2px solid #ccc; //原来的默认边框；
}
</style><div style="margin: 0px auto; text-align: center; padding: 0px">
            <div class="hui">
                <div class="top">
                    <img src="/images/logo.gif" width="214" height="96" />
                    <ul class="nav">
                        <li id="navli"> <a href="#" 首页 </a> </li>
                        <li> <a href="#" onmouseover="this.className='conn_js'" onmouseout="this.className='conn_y'">租房 </a> </li>
                        <li> <a href="#" onmouseover="this.className='conn_js'" onmouseout="this.className='conn_y'" >二手房 </a> </li>
                        <li> <a href="#" onmouseover="this.className='conn_js'" onmouseout="this.className='conn_y'" >新楼盘 </a> </li>
                        <li> <a href="#" onmouseover="this.className='conn_js'" onmouseout="this.className='conn_y'" >商铺 </a> </li>
                        <li> <a href="#" onmouseover="this.className='conn_js'" onmouseout="this.className='conn_y'" >写字楼 </a> </li>
                        <li> <a href="#" onmouseover="this.className='conn_js'" onmouseout="this.className='conn_y'" > <font
                            color="#ffd800">登录/发布 </font> </a> </li>
                    </ul>
            </div>
</div>
思路就是这样的；弄个图片就可以了；
用css也可以实现，通过a：link，a：hover等来实现。
那么CSS怎么触发换图片的功能呢；
用JS是一个比较好的方法,而且适合许多元素,一般用JQuery更简单,而对<A>来说用个样式就行了 <style>


        A:hover
        {
            color: #333333;
            text-decoration: underline;
        }
        A:active
        {
            color: Red;
            text-decoration: underline;
        }
    </style>
第一步:把如下代码加入<head>区域中
<style>

</style>第二步:把如下代码加入<body>区域中
<ilayer id="dropmenu01" height=35px>
<layer id="dropmenu02" visibility=show>
<span id="iewrap">
<span id="iewrap2" onClick="dropit2();event.cancelBubble=true;return false">
<font face="宋体"><a href="default.htm">点这里看本站栏目</a></font>
</span>
</span>
</layer>
</ilayer><SCRIPT language=javascript>
</SCRIPT>

<div id="dropmenu03" style="position:absolute;left:10;top:0;layer-background-color:seashell;background-color:seashell;width:100;visibility:hidden;border:1px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu03.style.padding='6px'
for (i=0;i<selection.length;i++)
document.write(selection[i])
</script>
</div><script language="JavaScript1.2">
if (document.layers){
document.dropmenu03.captureEvents(Event.CLICK)
document.dropmenu03.onclick=hidemenu2
}
</script>
<li id="navli"> <a href="#" 首页 </a> </li>  前面的已经实现,现在想问下用JS 控制li
选首页   首页的id ="navli" 其他id="" 选租房  li的id="navli" 其他不变  以此类推
第一步:把如下代码加入 <head>区域中
<style>

</style> 第二步:把如下代码加入 <body>区域中
<ilayer id="dropmenu01" height=35px>
<layer id="dropmenu02" visibility=show>
<span id="iewrap">
<span id="iewrap2" onClick="dropit2();event.cancelBubble=true;return false">
<font face="宋体"> <a href="default.htm">点这里看本站栏目 </a> </font>
</span>
</span>
</layer>
</ilayer> <SCRIPT language=javascript> 
</SCRIPT>

<div id="dropmenu03" style="position:absolute;left:10;top:0;layer-background-color:seashell;background-color:seashell;width:100;visibility:hidden;border:1px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu03.style.padding='6px'
for (i=0;i <selection.length;i++)
document.write(selection[i])
</script>
</div> <script language="JavaScript1.2">
if (document.layers){
document.dropmenu03.captureEvents(Event.CLICK)
document.dropmenu03.onclick=hidemenu2
}
</script>
直接用两个reperter替换div不就可以了吗