2

我正在尝试创建如下所示的内容：

落下

问题是我认为最好将其保留在一个 div 中，因为下拉菜单有一个内部阴影和阴影。

在此先感谢，如果您需要有关该问题的更多详细信息，请告诉我。

这是我到目前为止所拥有的：

CSS

.rectangle {
    background: #1f8dda;
    background-image: -moz-linear-gradient(270deg, #1f8dda 0%, #114dbc 100%);
    background-image: -webkit-linear-gradient(270deg, #1f8dda 0%, #114dbc 100%);
    background-image: -o-linear-gradient(270deg, #1f8dda 0%, #114dbc 100%);
    background-image: linear-gradient(180deg, #1f8dda 0%, #114dbc 100%);
    -moz-box-shadow: 0px 0px 2px 0px #000000;
    -webkit-box-shadow: 0px 0px 2px 0px #000000;
    -o-box-shadow: 0px 0px 2px 0px #000000;
    box-shadow: 0px 0px 2px 0px #000000;
    border-radius: 0px;
    margin: 0px;
    width: 145px;
    height: 138px;
}

我还为此创建了一个小提琴：http: //jsfiddle.net/yHy5n/

4

1 回答 1

2

除了你的菜单结构看起来很奇怪之外，这里有一个我为你做的快速草图作为起点：演示
它并不是一个完整的解决方案，而是一个你可以使用的想法。

给定下面的标记，基本思想是分别对主列表 ( h2) 和子列表的列表元素进行样式设置，并使渐变具有平滑过渡。

<ul class="nav">
    <li>HOME</li>
    <li class="active"><h2>DUNGEONS PIECES</h2>
    <ul class="subnav">
        <li>Floor<span class="count">123</span></li>
        <li>Walls<span class="count">54</span></li>
        <li>Sets<span class="count">7</span></li>
    </ul>
    </li>
</ul>

CSS：

.active {
    background: #1f8dda;
    /* ... */
}
.active h2{
    background-image: linear-gradient(180deg, #1f8dda 34%, #228fdd 100%);
    /* ...                                                    /\ */
}            /*            gradient transition   --------------- */
.active ul { /*                                  \/              */
    background-image: linear-gradient(180deg, #228fdd 34%, #114dbc 100%);
    /* ... */
}

此外，您的大部分兼容性 css 也不再需要 - 看看：

渐变
框阴影

于 2013-02-05T15:33:43.370 回答