w3schools - wordpress logo css

transparent border in menu with css (4)

enter code herehttp://jsfiddle.net/gkbcj9sr/2/

use rgba colour, but check if all browsers support them or not.

I use a menu like below. How do I change the bottom-border from white to transparent so that the border appears as a transparent border. Now, when I set the border transparent, the entire menu is orange (background color of the menu):

ul#nav,
ul#nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul#nav li {
    position: relative;
    float: left;
    width: 118px;
}
#nav li ul {
    position: absolute;
    left: 0;
    top: auto;
    margin-left: -999em;
    border-top: 11px transparent;
}
#nav li  li {
    width: 135px;
    z-index: 1;
}
#nav li ul ul {
    position: absolute;
    left: 100%;
    top: -.1em;
    margin-left: -999em;
}
ul#nav li a {
    display: block;
    text-decoration: none;
    text-align: left;
    background: white;
    border: none;
}
* html ul#nav li a { height: 1% }
#nav li:hover a,
#nav li.over a,
#nav li:hover li:hover a,
#nav li.over li.over a,
#nav li:hover li:hover li:hover a,
#nav li.over li.over li.over a,
#nav li:hover li a:hover,
#nav li.over li a:hover,
#nav li:hover li:hover li:hover a:hover,
#nav li.over li li a:hover,
#nav li:hover li:hover li:hover li:hover a:hover,
#nav li.over li.over li.over li.over a:hover {
    color: #ff7f00;
    background-color: white;
}
#nav li:hover li a,
#nav li.over li a,
#nav li:hover li:hover li a,
#nav li.over li.over li a,
#nav li:hover li:hover li:hover li a,
#nav li.over li.over li.over li a {
    color: white;
    background: #ff7f00;
    margin-left: -10px;
    border-bottom: 1px solid #FFFFFF;
    filter: alpha(opacity=95);
    -moz-opacity: 0.95;
    opacity: 0.95;
}
#nav li ul li a { padding: 25px 7px 7px 7px }
ul#nav li:hover ul ul,
ul#nav li:hover ul ul ul,
ul#nav li.over ul ul,
ul#nav li.over ul ul ul { margin-left: -999em }
ul#nav li:hover ul,
ul#nav li li:hover ul,
ul#nav li li li:hover ul,
u#navl li li li li:hover ul,
ul#nav li.over ul,
ul#nav li li.over ul,
ul#nav li li li.over ul { margin-left: 0 }

Check this fiddle: http://jsfiddle.net/gkbcj9sr/6/

I changed a little your css in order to keep your html intact:

Changed the ul ul rule, to ul ul li in order to add the background to li and not to the entire ul which was causing you troubles.

Added border-top: transparent to your ul#root > li > ul rule, to have your transparent gap.

Here's the new css:

ul, li {
    list-style: none;
    margin: 0; padding: 0;
    color: #fff;
}
#root { border: 1px solid green; }
ul ul li { background-color: red; } /* Background only in your li elemnts
ul#root > li {
    background-color: blue;
    display: inline-block;
    position: relative
}
ul#root > li > ul {
    position: absolute;
    display: none;
    /* margin-top: 10px; want to have gap but the hover will trigger */
    border-top: 10px solid transparent; /* transparent border top */
}
ul#root > li:hover > ul {
    position: absolute;
    display: block;
}

Hope this was you were looking for.

this code is very difficult to read as it is presented. I presume you have tried border-bottom: 1px transparent; ?

border-bottom:2px solid rgba(0,0,0,.5);