html - 圆 Angular 没有javascript或css3

Question

我有一个导航菜单，其中链接的悬停状态如下所示，

如您所见，在橙色背景上设置了圆 Angular 背景。客户要求这可以通过 IE6 正常工作(他们还没有达到可以升级的阶段)。现在我是最近才开始网络开发的，所以我还没有学习过实现这种效果的旧技术，请问有什么可以启发我吗？下面是我的代码，目前我正在使用 CSS3。

#navPrimary {
        background:#de4702;
        height:37px;
        margin:0px auto;
        width:517px;
        padding:5px 0px 0px 0px;
        display:block;
        overflow:hidden;
    }

        #navPrimary li {
            width:252px;
            float:left;
            display:block;
            height:100px;
            list-style-type:none;
            text-align:center;
            margin:0px 0px 0px 8px;
        }

            #navPrimary li.first {
                width:67px;
                padding:0px 14px 0px 14px;
                display:block;
                margin:0;
            }

            #navPrimary .last {
                width:154px;
            }

            #navPrimary li a {
                color:#fff;
                font-weight:bold;
                text-decoration:none;
                display:block;
                height:27px;
                padding:10px 0px 0px 0px;

            }

                #navPrimary li a:hover {
                    color:#de4702;
                    background:#fff;
                    -moz-border-radius:10px 10px 0px 0px;
                    -webkit-border-radius:10px 10px 0px 0px;
                    border-radius:10px 10px 0px 0px;
                }

<ul id="navPrimary">

      <li class="first"><a href="/" title="#request.sitename# | Home">Home</a></li>

      <li><a href="##" title="Free Admission">Free Admission </a></li>

      <li class="last"><a href="#request.public_vroot#index.cfm?fuseaction=game.terms" title="Terms &amp; Conditions">Terms &amp; Conditions</a></li>

    </ul>

Answer 1

实现此目的的技术称为滑动门。了解更多信息 here .
它基本上是关于在两个元素(门的两个部分)使用图像。一个在左侧，另一个在右侧。