0

我有一个由无序列表组成的水平菜单，每个列表项都是一个链接，并且有特殊的扩展列表项，它们是可扩展的（它们打开了一个新的垂直样式菜单）。我想让菜单背景透明黑色，底部有白色边框。我还希望可扩展列表项有一个底部箭头突出。不幸的是，将外部三角形设置为白色，将内部三角形设置为透明黑色，显示下方的白色三角形。有没有办法获得一个真正透明的内部三角形，以便菜单可以放在背景图像或纹理上？

http://jsfiddle.net/RMCtk/2/

HTML：

<body>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li class="expand"><a href="#">Product</a>
                           <ul>
                               <li><a href="#">pro1</a></li>
                               <li><a href="#">pro2</a></li>
                               <li><a href="#">pro3</a></li>
                           </ul>
                    </li>
                    <li><a href="#">lalalalalalala</a></li>
                    <li><a href="#">Pickles</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
</body>

CSS：

nav {
    top:50px;
    line-height:20px;
    font-size:20px;
    width:calc(6*150px);
    height:auto;
    box-sizing:border-box;
    }
    nav ul {
    margin:0;padding:0;
    list-style-type:none;
    }
    nav ul li {
    border:1px solid blue;
    border-right:none;border-top:none;border-left:none;
    float:left;
    width:150px;
    background-color:white;
    box-sizing:border-box;
    }
    nav ul li a {
    display:block;
    width:150px;
    padding:5px 0;
    text-align:center;
    }
    nav ul li:hover {
    background:orange;
    }
    nav ul li ul {
    display:none;
    }
    nav ul li:hover > ul {
    display:block;
    position:absolute;
    left:-450px+900px; /*margin-left + width of #nav*/
    top:30px;
    width:150px;
    }
    a:link, a:visited {
    color:black;
    font-family:Arial;
    text-decoration:none;
    }
    li.expand:before {
    content:'';
    position:absolute;
    height:0; 
    width:0;
    border-left:15px solid transparent;  /* left arrow slant */
    border-right:15px solid transparent; /* right arrow slant */
    border-top:15px solid blue; /*bg color here*/
    margin-left:60px; /*75-15*/
    margin-top:29px;
    }
    li.expand:after {
    content:'';
    position:absolute;
    height:0; 
    width:0;
    border-left:14px solid transparent;  /* left arrow slant */
    border-right:14px solid transparent; /* right arrow slant */
    border-top:14px solid rgba(0,0,0,0.5); /*bg color here*/
    margin-left:60.5px;
    }
    li.expand:hover:after,li.expand:hover:before {
    display:none;
    }

正如您在示例中看到的，边框是蓝色的，背景应该是透明的，而不是白色的。白色将匹配 jsfiddle 内容框的背景，给人一种透明的错觉，但不是真正的透明。如果无法做到这一点，任何人都可以建议我可以做到这一点的“正确”方式吗？

4

1 回答 1

0

您用来创建三角形的技巧是控制边框宽度。箭头是边框 - 你不能在上面设置边框颜色（如果我理解你的意思正确的话）。

于 2013-06-07T10:11:07.523 回答