垂直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結束時沒有塊結束完成。 有關如何使用PeterVR提供的代碼實現此目的的任何想法？

Answer 1

也許這樣的事情： 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 overflow:hidden ，並把它放在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 */
}

Answer 2

在js fiddle中查看此演示 。使用圖片上顯示的石榴汁原液將圖像高度設置為一個像素高度，並將#eee替換#eee圖像。