css控制某处位置样式失效,css样式不出现在该出现的位置?

1.鼠标移入时候样式显示了,控制台和Element也显示,但是Element显示的和页面中该出现的现象不一致,求解

代码如下

ul,li{

list-style: none;

}

.top{

position: absolute;

z-index: 1;

}

.top li{

height: 20px;

width: 80px;

display: inline-block;

margin: 0 10px;

border-bottom: 2px solid darkgray;

}

.boder{

position: absolute;

top: 0;

z-index: 0;

}

.boder li{

height: 28px;

width: 80px;

display: inline-block;

margin: 0 10px;

background: yellowgreen;

display: none;

}

• Airline
• Schedule
• Deals
• Arinks
• Settings

$(".top li").mouseover(function () {

$(this).css({color:"yellowgreen",borderBottom:"2px solid yellowgreen"}).siblings().css({color:"black",borderBottom:"2px solid darkgray"});

var x = $(this).index();

console.log(x);

$(".boder li").eq(x).slideDown(500).siblings().css("display","none");

})