Javascript 如何更改子菜单和子菜单的css'；我们的边界在一起

我有一个创建水平菜单的任务。每个菜单都有子菜单，这些子菜单都有子菜单。但是当我选择子菜单时，这些子菜单和子菜单之间有一个分隔。我希望在选中子项时清除其右侧边框，并放弃第一个子项的左侧边框。你可以查一下。 我怎样才能解决这个问题？ css页面是

 #wrapper {
     width:100%;
     height:500px;
 }
 h2 {
     color:#787878;
 }
 #menu, #menu ul {
     list-style: none;
     padding: 2px;
 }
 #nav{
     border-bottom: 1px solid #CCCCCC;
     border-spacing: 0;
     display: table;
     float: left;
     height: 25px;
     width: 100%;
 }
 #nav ul {
     margin: 0;
     padding: 0;
 }
 #nav > ul > li:hover {
     background: none repeat scroll 0 0 #FFFFFF;
     border-color: #ccc #ccc #FFFFFF;
     border-style: solid;
     border-width: 1px;
     padding-bottom: 0;
     border-radius:1px;
 }

 .menu-child {
     width:160px;
     display:block !important;

 }
 /*
 #menu ul li ul {
     border-radius:0px;
     border-color:#fff #ccc #ccc #ccc !important;
 }
 */
 #nav ul li ul li:hover {
     //border:0px;
     //border-color: #ccc #FFFFFF #FFFFFF #ccc;
 }
 #nav ul li ul :hover {
     //border:0px;
     //border-color: #FFFFFF #ccc #ccc;

 }
 #menu {
     float: left;
     height: 25px;
 }
 #menu> li {
     float: left;
 }
 #menu li a {
     display: block;
     height: 2em;
     line-height: 2em;
     padding: 0 1.5em;
     text-decoration: none;
 }
 #menu ul {
     position: absolute;
     display: none;
     z-index: 999;
 }
 #menu ul li a {
     /*width: 80px;*/
 }
 #menu li:hover ul {
     display: block;
 }
 #menu {
     font-family: Arial;
     font-size: 12px;
     //background: #F8F8F8;
 }
 #menu > li > a {
     font-family: Verdana, Arial, sans-serif;
     font-style: normal;
     color:#787878;
     font-weight: bold;
 }
 #menu > li > a:hover {
     /*color: #000;*/
 }
 #menu ul {
     background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 0 0 5px 5px;
    margin-top: 1px;
 }
 #menu ul li a {
     color: #000;
 }
 #menu ul li a:hover {
     background: #E0E0E0;
 }
 .logout {
     float:right;
     width:300px;
 }
 .title {
     float:left;
     width:300px;
 }
 #footer {
     width:100%;
     height:100px;
     float:left;
 }
 .subchild-list {
     margin:0;

     position: absolute !important;
     top:0;
     right:-89px;
     //border-color: #ccc #FFFFFF #ccc #FFFFFF;
 }
 .child-list ul {
     display: none !important;
     position: absolute !important;
     z-index: 999 !important;
 }
 .child-list li {
     position:relative !important;

 }
 .child-list li:hover ul {
     display: block !important;
 }

.child-list li{

    border-left:1px solid #C0C0C0; 
    border-right:1px solid #C0C0C0;
}

.child-list ul{
    border-top:1px solid #C0C0C0; 
    border-bottom:5px solid #C0C0C0; 
}

.child-list{
    border-bottom:5px solid #C0C0C0; 
}
.nav-subchild
{
border-color: #ccc #FFFFFF #ccc #FFFFFF;
}

---

以下2个css属性将满足需要

ul#menu li ul.child-list li.menu-child:hover { border-right:0 !important; }

li.menu-child ul li:first-child { border-left:0 !important; }

---

你为什么要发明轮子？您可以使用jquery，如果您希望它是水平的，也可以使用一些方法。每当我想解决一个非常古老和经典的问题时，我都会这样做

---

赢得一场战斗的最好方法是不必打一场

但是子菜单的左边框已完全删除。我是否可以仅删除第一个子菜单的左边框li：第一个子菜单仅删除子菜单的左边框。请检查更新的答案。它适用于我，在Firefox、Chrome、Safari、Opera和IE中进行了测试。在这里，我更改了给定文件的css。现在子菜单位于不同的位置。你可以检查它，在类“子孩子列表”添加属性左：160px；（与菜单子菜单的宽度相同）和顶部：-2px；移除右侧：-87px；这将正确放置子菜单。这可能是客户要求的原因。客户并不总是正确的。。如果他们是。。他们应该建立自己的网站。客户喜欢少花钱多花钱。