Question

我正在尝试按照此链接制作下拉列表：http://k-prim.biz/ttpm/workspace-04d.png 这里的诀窍是背景是半透明的，我在名称和下拉菜单上有一个灰色边框。有没有想过用css做这个的想法？

更清楚 - 我想避开这部分边界 - 用户名：k-prim.biz/ttpm/screen.png

提前谢谢！

Answer 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;}

Answer 2

透明背景（CSS3）：background: rgba(0,0,0,0.6);，参数为(red, green, blue, opacity)（0.00为0％至1.00为100％）。

要重叠项目，请设置主菜单项position: relative;（以下内容正常工作所需）：制作子导航position: absolute;。它将是绝对的，但相对于顶部菜单项。您可以使用负位置值来重叠元素。

带边框的css下拉菜单

2 个答案: