html - 垂直 CSS 菜单，链接内有边框，填满整个宽度

Question

对于一个网站，我需要像这样制作一个 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 结束时 block 没有结束。关于如何使用 PeterVR 提供的代码实现此目的有什么想法吗？

Answer 1

也许是这样的:http://jsfiddle.net/AXze7/1/
我更改了您的 CSS 中的一些内容:
- 设置主要ul溢出隐藏
- 从您的 <a> 中删除了显示 block 标签
- 设置 <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;
}

这会在 anchor 标记之后添加绿色 block 。

编辑:
我为你的第二个案例更新了我的 fiddle :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 */
}