CSS-将菜单移动到悬停上方

我有一个菜单，需要移动一个项目的顶部悬停，但它不工作。这就是我要做的

.menu li{
    display: inline-block;      
}    

.menu li a{
    display: block; 
    line-height: 20px;
    padding: 0 20px;
    border-bottom: 5px solid #000000;   

}

.menu li a:hover{
    margin-top: -5px;
    border-bottom-width: 10px;
}

一种可能的解决办法：

.menu li{
    display: inline;      
}    

.menu li a{
    display:block; 
    float:left;
    line-height: 20px;
    padding: 0 20px;
    border-bottom: 5px solid #000000;   
    margin:0;
    background-color:#cecece;

}

.menu li a:hover{
    margin-top: -5px;
    border-bottom-width: 10px;
}

---

代码还没有完成，最好发布一个演示，你说的“到顶端”是什么意思？到什么的顶部？从另一个菜单项移动到顶部约5px。

.menu li{
    display: inline;      
}    

.menu li a{
    display:block; 
    float:left;
    line-height: 20px;
    padding: 0 20px;
    border-bottom: 5px solid #000000;   
    margin:0;
    background-color:#cecece;

}

.menu li a:hover{
    margin-top: -5px;
    border-bottom-width: 10px;
}