如何实现这样的菜单效果？

Question

有一多行垂直菜单，借鉴网上菜单效果，显示正常，把菜单中的文字添加上链接，效果有点问题，先上代码：
    <style>.list_dt{
    background:rgb(0,37,82);
    color:rgb(255,255,255);
    width:160px;
    padding:0 25px 0 24px;
    height:68px;
    line-height:68px;
    cursor:pointer;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    position:relative;
}
.list_dt:hover{
    background:rgb(0,37,82);
    color:rgb(235,141,41);
}
.list_dt:hover ._after{
    display:block;
    width:6px;
    height:40px;
    position:absolute;
    left:0;
    top:0;
    margin-top:10px;
    background:rgb(235,141,41);
}#open{
     background:rgb(0,37,82);
     color:rgb(235,141,41);
 }#open ._after{
       display:block;
       width:6px;
       height:40px;
       position:absolute;
       left:0;
       top:0;
       margin-top:10px;
       background:rgb(235,141,41);
   }
    </style>    <dl class="list_dl">
                <dt class="list_dt">
                    <span class="_after"></span>
                <p><a href="jibenxinxi.html">基本信息</a></p>
                <i class="list_dt_icon"></i>
                </dt>
                <dt class="list_dt">
                    <span class="_after"></span>
                <p><a href="rongyuqiang.html">班级</a></p>
                <i class="list_dt_icon"></i>
                </dt>
                <dt class="list_dt">
                    <span class="_after"></span>
                <p><a href="yujingxinxi.html">预警信息</a></p>
                <i class="list_dt_icon"></i>
                </dt>
</dl><script type="text/javascript">
    $(".list_dt").on("click",function () {
        $('.list_dd').stop();
        $(this).siblings("dt").removeAttr("id");
        if($(this).attr("id")=="open"){
            $(this).removeAttr("id").siblings("dd").slideUp();
        }else{
            $(this).attr("id","open").next().slideDown().siblings("dd").slideUp();
        }
    });</script>在没有给文字添加链接之前，文字颜色为白色，鼠标放到文字上，文字显示橙色，文字前面也有6个像素的区域变成黄色，点击这个文字，文字也变成橙色，文字前的区域保持黄色，鼠标移动到其他文字，该文字变橙色，该文字前面的区域也变成黄色，点击其他文字，该文字变色，该文字前区域保持橙色，之前点击的文字那里恢复原来样式，也就是文字恢复为白色，文字前区域不显示橙色。现在给这些文字添加上a标签以后，我需要的效果还是同刚才描述的一样，为此添加了A标签相关样式，        a:link{
        color:rgb(255,255,255);
        }
        a:hover {
            color:rgb(235,141,41);
        }
        a:visited{
            color:rgb(255,255,255);
        }我在JS中添加了这样一段
    $(".list_dt a").on("click",function () {
        $(this).css("color","orange");    });
但是不起作用。

Answer 1

改下css<style>
.list_dt{
    background:rgb(0,37,82);
    color:rgb(255,255,255);
    width:160px;
    padding:0 25px 0 24px;
    height:68px;
    line-height:68px;
    cursor:pointer;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    position:relative;
}
.list_dt a{
    color:rgb(255,255,255); display:block; width:100; height:100%; text-decoration:none;
}
.list_dt:hover, .list_dt a:hover{
    background:rgb(0,37,82);
    color:rgb(235,141,41);
}
.list_dt:hover ._after{
    display:block;
    width:6px;
    height:40px;
    position:absolute;
    left:0;
    top:0;
    margin-top:10px;
    background:rgb(235,141,41);
}
#open{
     background:rgb(0,37,82);
     color:rgb(235,141,41);
}
#open ._after{
   display:block;
   width:6px;
   height:40px;
   position:absolute;
   left:0;
   top:0;
   margin-top:10px;
   background:rgb(235,141,41);
}
</style>

Answer 2

哥们，好像这样也不行哈，页面上我的代码没有变，还是
<script type="text/javascript">
    $(".list_dt").on("click",function () {
        $('.list_dd').stop();
        $(this).siblings("dt").removeAttr("id");
        if($(this).attr("id")=="open"){            $(this).removeAttr("id").siblings("dd").slideUp();
        }else{
            $(this).attr("id","open").next().slideDown().siblings("dd").slideUp();
        }
    });
</script>
<script type='text/javascript' language='javascript'>
    $(document).ready(function(){
        $("body").find(".list_dt").eq(0).click();
    });
</script>现在的效果是点击任何一个菜单上的文字链接，该链接不变成橙色，鼠标移动上去这个文字链接可以变成橙色，另外，我的页面初始状态是第一个链接默认被点击选中了，也就是文字默认是橙色的，使用你的CSS的话，还是没有达到这个效果。