CSS 半径和悬停填充整个区域

Question

我正在尝试创建一个标签式导航。

我无法让我的悬停颜色填满我的选项卡的整个区域(左上角/右上角圆 Angular )。现在，悬停仅覆盖选项卡中的链接文本，并且悬停没有圆 Angular 。

我希望悬停能够完美覆盖选项卡区域 - 圆 Angular 和所有区域。

HTML:

<div id="tabbed-widget-2" class="widget tabbed-widget">
    <div class="widget-wrap">
        <div class="tw-tabs ui-tabs ui-widget ui-widget-content ui-corner-all">
            <ul class="tw-tabbed-nav ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
                <li id="tab-link-2-0" class="ui-state-default ui-corner-top">
                    <a href="#tw-content-2-0">Welcome</a>
                </li>
                <li id="tab-link-2-1" class="ui-state-default ui-corner-top">
                    <a href="#tw-content-2-1">Topics</a>
                </li>
                <li id="tab-link-2-2" class="ui-state-default ui-corner-top">
                    <a href="#tw-content-2-2">Archives</a>
                </li>
                <li id="tab-link-2-3" class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
                    <a href="#tw-content-2-3">Social</a>
                </li>
            </ul>

CSS

#tab-link-2-0, #tab-link-2-1, #tab-link-2-2, #tab-link-2-3  {
        background: green;
        padding: 2px 12px;
        margin: 0 8px 0 0;
        -moz-border-radius: 8px 8px 0 0;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }   

#tab-link-2-0 a:hover, #tab-link-2-1 a:hover, #tab-link-2-2 a:hover, #tab-link-2-3 a:hover {
        background: none repeat scroll 0 0 #ffab35;
    }

Answer 1

绿色背景是 li 标签，你设置了 :hover 标签不是 li
和 <a>是行内元素添加display:block对它
http://tinkerbin.com/aqHTscEE