Question

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

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

导航栏的总宽度为950px。

1）问题是菜单并不完全位于背景图像上。左边有一些空间。如何删除该空间以使菜单在背景栏上定位？喜欢这个

enter image description here

2）当我将鼠标悬停在CATEGORIES上时，我希望看到下拉链接文本与左边对齐（左击下CATEGORIES链接文字。就像这样

enter image description here

这是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发布后意识到的那样，我没有包括子导航的左对齐。我编辑添加它。无论是他或我的应该做的。

Answer 2

除了Ted的答案之外，我的左边的子导航也是合理的http://jsfiddle.net/q50hpemk/1/

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

Answer 3

重置padding上的ul以修复左边的差距。
添加text-align:left并使用text-indent使下拉文字对齐到“C”类别的左边缘。（这是一种解决方法，但我想不出任何其他想法。）
调整导航容器的width以确保它可以携带行中的所有项目。

DEMO： 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下拉问题

3 个答案: