html - 带边框的 CSS 下拉菜单

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;。这将是绝对的，但相对于顶部菜单项。您可以使用负位置值来重叠元素。