0

このリンクのようなドロップダウンを作成しようとしています: http://k-prim.biz/ttpm/workspace-04d.png ここでのトリックは、背景が半透明で、名前の上に灰色の境界線があることです。ドロップダウンメニュー。これをcssのみで作成するアイデアはありますか?

より明確にするために-境界線のこの部分を避けたい-ユーザー名の下：k-prim.biz/ttpm/screen.png

前もって感謝します！

4

2 に答える 2

1

可能ですが、HTML を少し変更する必要があります

HTML 

<div id="user">
    <div id="username">
      ljubo_v 
    </div>
    <div id="userarrow"></div>
    <div id="userdrop">
        <div id="myhomecork">
          myhomecork
        </div>
    </div>
</div>

CSS 

#user{
  position:absolute;
  right:50px; 
  top: 8px; 
  cursor:pointer;
  text-align:right;
  width: 202px;
  overflow: 
  hidden;
  z-index:0;
}
#username{
    border: solid 1px transparent;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 2px;
    padding-left: 8px;
    text-align:right; z-index:5;
    right:0;
    position: relative;
    border-bottom: none;
    line-height: 1em;
    float: right;
}
#user:hover #username::after{
    content:'';
    height: 1px;
    width:100%;
    position: absolute;
    border-left: solid 202px #999;
    right: 0;
    bottom: 0;
}

#userarrow{
    float:right;
    display:block;
    width:9px;
    height:7px; 
    margin-right:5px;
    background-image: url(../images/interface/sort-down.png);
    background-repeat: no-repeat;
    clear: right;
    margin-top: 5px;
}

#user:hover > #username{
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;

    border-left-style: solid;
    border-top-color: #999;
    border-right-color: #999;
    border-left-color: #999;
    background-image: url(../images/interface/black50.png);
    background-repeat: repeat;
}

#userdrop{
    background-image: url(../images/interface/black50.png);
    background-repeat: repeat;
    display: none;
    width:200px;
    height:433px;
    float: right;
    margin-top: -12px;
    text-align:left;
    font-size:13px;
    border: solid 1px #999;
    border-top: none;
}
#user:hover #userdrop{display:block;}
于 2012-09-04T17:18:41.160 に答える
0

透明な背景 (CSS3):background: rgba(0,0,0,0.6);パラメータが(red, green, blue, opacity)(0% の場合は 0.00 から 100% の場合は 1.00)。

アイテムを重ねるには、メイン メニュー アイテムを作成しますposition: relative;(これは、以下が適切に機能するために必要です): サブ ナビゲーションを作成しposition: absolute;ます。それは絶対的ですが、一番上のメニュー項目に相対的です。負の位置の値を使用して要素を重ねることができます。

于 2012-09-04T14:59:21.380 に答える