css - css下拉问题

Question

那里！我被一个简单的 CSS 下拉菜单困住了。您可以在下面的链接中看到代码。我的问题是，当我在用户名之前放置一些链接时，由于悬停在下拉菜单上，它无法使用。我需要仅在将鼠标悬停在用户名而不是整个#userdrop div 时触发下拉菜单。请注意，z-index 属性不是我的解决方案。

http://k-prim.biz/ttpm/demo.html

Answer 1

这是因为#user 上的绝对定位。失去它，并切换到浮动：右，带有一些边距（或其他东西），这应该会自行解决。

改变这个：

#user{
    position:absolute;right:30px; top:5px;  
    text-align:right;
    width: 202px;
    overflow: hidden;
}

对此：

#user{
    float:right;right:30px; top:5px;  
    text-align:right;
    width: 202px;
    overflow: hidden;
}

我刚刚更改position:absolute为float:right，它工作得很好，除了需要对边距进行微调。

Answer 2

根据此代码替换css和锚标记

#link {
    display: block;
    height: 20px;
    position: absolute;
    right: 124px;
    top: 5px;
}





#user {
    overflow: hidden;
    position: absolute;
    right: 30px;
    text-align: right;
    top: 5px;
    width: 202px;
    z-index: -1;
}



<a href="#" style="display: block; height: 28px; text-align: right; width: 76px;">Link here</a>

有小提琴http://jsfiddle.net/7jexs/2/