纯 CSS 下拉问题

Question

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

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

导航栏的总宽度为950px。

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

2) 当我将鼠标悬停在 CATEGORIES 上时，我希望看到下拉 link 文本向左对齐（左侧点亮 CATEGORIES link 文本。像这样

这里是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

将 padding:0 添加到您的第一个 <ul>...喜欢：

HTML

<div id="navigations">
    <div id="navs" class="navs">
      <ul class="no-pad">
      ...

CSS

.no-pad{padding:0;}

并将这些更改为左对齐子导航：

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

见this updated fiddle

**正如我在 Zachs post 之后意识到的那样，我没有包括子导航的左对齐。我编辑添加那个。他的或我的都可以。

Answer 2

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

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

Answer 3

重置 ul 上的 padding 以修复左侧间隙。
添加 text-align:left 并使用 text-indent 使下拉文本与 "C" 类别的左边缘对齐。（这是一个解决方法，但我想不出任何其他想法。）
调整导航容器的width以确保它可以承载该行中的所有项目。

演示： http://jsfiddle.net/g2xk3jun/

#navigations {
    background-image:url(http://www.prabhuvurayabari.com/wp-content/uploads/2015/03/navbg2015.gif);
    background-repeat:no-repeat;
    width:962px;
    height:34px;
    font-family:Arial, "Trebuchet MS", Calibri;
    font-size:10px;
    text-transform:uppercase;
}
.navs {
    z-index:5;
}
.navs ul {
    list-style:none;
    padding: 0;
    margin: 0;
}
.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 ul a {
    text-align: left;
    text-indent: 62px;
}
.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;
}

纯 CSS 下拉问题

Pure CSS Dropdown issues

html

css

drop-down-menu