css - cssドロップダウンの問題

Question

そこの！シンプルなCSSドロップダウンで立ち往生しています。以下のリンクでコードを確認できます。私の問題は、ユーザー名の前にリンクを配置すると、ドロップダウンのホバーのために使用できないことです。#userdrop div全体ではなく、ユーザー名にカーソルを合わせたときにのみドロップダウンをトリガーする必要があります。z-index 属性は私の解決策ではないことに注意してください。

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

Answer 1

これは、＃userの絶対位置が原因​​です。それを失い、float：rightに切り替えて、マージン（または何か）を付けます。これで解決するはずです。

これを変える：

#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/