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 に答える