0

对于一个网站，我需要制作一个这样的 css/html 菜单：

在此处输入图像描述

如您所见，菜单链接的左侧和右侧都有一些黄色边框，这些边框填充了可用宽度。菜单下方还有一个带有渐变的背景图像。

有人对如何实现这种菜单样式有任何想法吗？

到目前为止的代码：

<div id="submenu">
    <ul>
        <li class="selected">
            <a href="#">Wirtschaft<div></div></a>
            <ul>
                <li><a href="#">Kurzeinführung Wirtschaft</a></li>
                <li><a href="#">Wirtschaftstheorie</a></li>
                <li><a href="#">Arbeitsmarkt</a></li>
                <li class="selected"><a href="/test.html">Geld- und Konjunktur</a></li>
                <li><a href="#">Staatsfinanzen</a></li>
                <li><a href="#">Wirtschaft: alle Beiträge</a></li>
            </ul>
        </li>
    </ul>
</div>

#submenu {
    width: 225px;
}

#submenu ul {
    list-style-type: none;
}

#submenu ul li a {
    border-left: 6px solid transparent;
    padding-left: 4px;
    display: block;
    margin-bottom: 15px;
    color: #222624;
    font-size: 17px;
}

#submenu ul li a:hover,
#submenu ul li.selected > a {
    border-left: 6px solid #CAB106;
}

#submenu ul li ul li a {
    margin-bottom: 7px;
    font-size: 14px;
}

编辑：图片中的渐变实际上存在于正文中，我认为它不能用纯 css 完成，所以它必须是背景图像。

EDIT2：PeterVR 提供的解决方案效果很好！不幸的是，我被另一个具有相同样式的列表困住了，但是当 ul 结束时，没有完整的块结束。关于如何使用 PeterVR 提供的代码实现这一目标的任何想法？

新问题

4

2 回答 2

2

可能是这样的：http: //jsfiddle.net/AXze7/1/
我在你的css中改变了一些东西：
- 将主设置ul为溢出隐藏- 从标签
中删除显示块 - 将标签设置为相对位置，对于以下工作：<a>
<a>

#submenu ul li a:hover:after,
#submenu ul li.selected > a:after {
    background: #CAB106;
    content: ' ';
    display: block;
    height: 100%;
    width: 225px;
    margin-left: 4px;
    position: absolute;
    left: 100%;
    top: 0;
}

这会在锚标记之后添加绿色块。

编辑：
我为你的第二种情况更新了我的小提琴：http: //jsfiddle.net/AXze7/2/

更改内容的简短概述：

  • 我overflow:hidden从 中删除ul，然后将其放在li
  • 我调整了样式并使用了像素，使其看起来更像您的屏幕截图。将此与前面的示例进行比较应该可以帮助您了解如何实现目标。
  • 我为在悬停/选择时出现变化的箭头图标添加了一个额外的伪类:before。

代码如下所示： 

#submenu ul li a:before,
#submenu ul li.selected > a:before {
    background: #fcc; /* put your black arrow image here */
    content: ' '; 
    display: block;
    height: 12px;
    width: 12px;
    margin-left: 2px;
    position: absolute;
    left: -18px;
    top: 2px;
}
#submenu ul li a:hover:before,
#submenu ul li.selected > a:before {
    background: red; /* put your colored arraw image here */
}
于 2012-12-09T13:36:37.390 回答
0

检查 js fiddle 中的这个演示#eee。用图片上显示的手榴弹制作一个像素高度的图像，并替换为该图像。

于 2012-12-09T10:25:32.520 回答