Javascript 需要帮助使子菜单水平和子链接的边框不'；Don’不要走出去

html部分 试验 标题{ 溢出：自动； }

ul{
列表样式类型：无；
保证金：0；
填充：0；
宽度：300px；
}
ulli{
浮动：左；
利润率：0.4px 0；
字体大小：15px；
}
ullia{
颜色：#0076d1；
高度：20px；
文字装饰：无；
显示：块；
背景：白色；
填充：6px 10px 8px 10px；
左边框：1px实心#FFFFFF；
右边框：1px实心#FFFFFF；
边框顶部：1px实心#FFFFFF；
过渡：边框颜色0.23s线性；
}
悬停{
颜色：#232628；
}
ul li.toplevel a：悬停，ul li.toplevel a.hoversub{
颜色：232628；
高度：19px；
左边框：1px实心#d3；
右边框：1px实心#D3；
边框顶部：1px实心#D3；
背景：白色；
填充底部：9px；
边框颜色：#D3
}
ul.子菜单：前{
背景色：#D3；
内容：“；
高度：1px；
左：71px；
位置：绝对位置；
排名：0；
宽度：120px；
}
ul子菜单{
位置：绝对位置；
列表样式类型：无；
宽度：187px；
保证金：0；
填充：0；
显示：无；
z指数：999999；
背景：#FFFFFF；
/*边框顶部：1px实心#D3*/
左边框：1px实心#d3；
右边框：1px实心#D3；
边框底部：1px实心#D3；
}
ul.子菜单li.子列表{
清除：左；
保证金：0；
填充：0；
宽度：187px；
高度：30px；
填充物：5px；
边缘底部：2px；
字号：17px；
}
ul li.子列表a{
边界：无；
背景：无；
}
ul li.子列表a：悬停{
边界：无；
背景：无；
颜色：#FF0000；
}

js部分
$（'ul>li.toplevel'）。悬停( 函数（）{
$（'ul.submenu'，this）.fadeIn（230）；
$（this.find（'a:first'）.addClass（“hoversub”）； }, 函数（）{
$（'ul.submenu'，this）.fadeOut（230）； $（this.find（'a:first'）.removeClass（“hoversub”）； } ); 这里有一个

根据您的

字体系列

和

字体大小

，您必须更改下面代码中的

宽度

和

左侧

位置

ul .submenu:before {
  background-color: #d3d3d3;
  content: "";
  width: 105px;  /* If border is too wide reduce the width */
  height: 1px;
  top: 0;
  left: 82px;    /* Also change left distance till you achieve desired look */
  position: absolute;
}

ul .submenu:before {
  background-color: #d3d3d3;
  content: "";
  width: 105px;  /* If border is too wide reduce the width */
  height: 1px;
  top: 0;
  left: 82px;    /* Also change left distance till you achieve desired look */
  position: absolute;
}