Pure CSS Dropdown issues

Question

Я работаю над этим выпадающим меню CSS, и мне удалось добраться сюда.

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

Общая ширина панели навигации является 950px.

1) Проблема в том, что меню не сидит точно на фоновом изображении. Слева находится некоторое пространство. Как я могу удалить это пространство, чтобы меню располагалось на панели фона? Как это

2) Когда я парить над КАТЕГОРИЯМИ, я хотел бы видеть выпадающий текст ссылки для выравнивания слева (слева приземляться КАТЕГОРИИ Текста ссылки. Как это

Вот 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

1. Сброс padding на ul зафиксировать левый пробел.

2. Добавить text-align:left и использовать text-indent, чтобы выпадающий текст выровнялся с левым краем категорий «C». (Это обходное решение, но я не могу придумать никаких других идей.)

3. Отрегулируйте width контейнера nav, чтобы убедиться, что он может нести все элементы в строке.

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; 
} 

Answer 2

Добавить 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 3

В дополнение к ответу Теда, шахта также оправдывает суб-Nav к левому http://jsfiddle.net/q50hpemk/1/

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