带边框的CSS下拉菜单

Question

I am trying to make a drop-down like in this link: http://k-prim.biz/ttpm/workspace-04d.png The trick here is that the background is semitransparent and I have a gray border over the name and the drop-down menu. Any ideas to make this with css only?

to be more clear - I want to avoid this part of the border - under the username: k-prim.biz/ttpm/screen.png

Thank you in advance!

Answer 1

It is posible, but you need to change your HTML a little bit

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

Transparent background (CSS3): background: rgba(0,0,0,0.6); with Parameters being (red, green, blue, opacity) (0.00 for 0% through 1.00 for 100%).

To overlap items, make your main menu item position: relative; (which is required for the following to work properly): make the sub navigation position: absolute; . it will be absolute, but relative to the top menu item. you can use negative position values to overlap the element.