html - 纯 CSS 下拉问题

Question

我正在研究这个 CSS 下拉菜单，我设法到达这里。

http://jsfiddle.net/iamkrishnam/3hbbvnkq/

导航栏的总宽度为950px。

1) 问题是菜单没有完全位于背景图像上。左边有一些空间。我怎样才能删除那个空间，以便菜单将自己定位在背景栏上？像这样

2) 当我将鼠标悬停在 CATEGORIES 上时，我希望看到下 zipper 接文本向左对齐(向左点亮 CATEGORIES 链接文本。像这样

这是CSS

#navigations {
    background-image:url(http://www.prabhuvurayabari.com/wp-content/uploads/2015/03/navbg2015.gif); 
    width:950; align-content:center; background-repeat:no-repeat;;
    height:34px;
    font-family:Arial, "Trebuchet MS", Calibri;
    font-size:10px;
    text-transform:uppercase;


}

.navs{
    z-index:5;

}
.navs ul{
    width:auto;
    list-style:none;

}



.navs ul li{
    display:inline-block;
    font-family:Arial, "Trebuchet MS", Calibri;
    font-size:10px;
    text-transform:uppercase;   
}

.navs ul li a{
    text-decoration:none;
    text-align:center;
    color:#222;
    display:block;
    width: 190px;
    line-height:29px;
    background-color:gray;

}

.navs ul li a:hover{
    background-color:#EEC;   
}
.navs ul li ul{
    margin-top:0px;
    padding-left:0px;
    position:absolute;
    display:none;
}

.navs ul li:hover ul{
    display:block;
}

.navs ul li ul li{
    display:block;
}

.navs ul li:hover ul li ul{
    margin-left:100%;
    margin-top:-30px;
    visibility:hidden;
}

.navs ul li ul li:hover ul{
    margin-left:100%;
    border-left:4px solid #111;
    visibility:visible;
}

.navs ul li:hover ul li ul li ul{
    margin-left:100%;
    margin-top:-30px;
    visibility:hidden;
}

.navs ul li ul li ul li:hover ul{
    margin-left:100%;
    border-left:4px solid #111;
    visibility:visible;
}

.navs ul li:hover ul li ul li ul li ul{
    margin-left:100%;
    margin-top:-30px;
    visibility:hidden;
}

.navs ul li ul li ul li ul li:hover ul{
    margin-left:100%;
    border-left:4px solid #111;
    visibility:visible;
}

这是HTML

<div id="navigations">

    <div id="navs" class="navs">
      <ul>


          <li>
            <a href="#">CATEGORIES</a>
            <ul>
                <li><a href="#">DVD FILMS</a></li>
                <li><a href="#">BLU RAY FILMS</a></li>
                <li><a href="#">3D FILMS</a></li>
                <li><a href="#">FILM BOXSETS</a>
             <ul>
                    <li><a href="#">Demo1</a></li>
                    <li><a href="#">Demo2</a></li>
                    <li><a href="#">Demo3</a></li>
                </ul>
                </li>
                <li><a href="#">TV BOXSETS</a>
                <ul>
                    <li><a href="#">Demo1</a></li>
                    <li><a href="#">Demo2</a></li>
                    <li><a href="#">Demo3</a></li>
                    <li><a href="#">Demo3</a></li>
                </ul>

                </li>
                <li><a href="#">TV SEASONS</a></li>
            </ul>
        </li>


        <li><a href="#">ABOUT US</a></li>
        <li><a href="#">DELIVERIES AND RETURNS</a></li>
        <li><a href="#">CONTACT US</a></li>
                <li><a href="#">TERMS AND CONDITIONS</a></li>

    </ul>
    </div>
</div>

请帮忙!

非常感谢。

Answer 1

除了 Ted 的回答，我的还证明了左侧的子导航http://jsfiddle.net/q50hpemk/1/。

.navs ul li ul a{
  text-align: left;
  padding: 0 5px;
}