Помогите с СSS

[Дерзкий]

HTML

<div id="wrap">
            <div id="headerSingle">
                <div id="menu-top">
                    <ul class="menu">
    <li class="s1"><a href="http://www.rai-spa.ru/page4.html">Главная</a></li>
    <li class="s2"><a href="http://www.rai-spa.ru/our-baths/">ggggg</a>
   
    <ul class="subnav">
        
                    <li><a href="http://www.rai-spa.ru/menyu-kuhnya.html">Меню Кухня</a></li>
                    <li><a href="http://www.rai-spa.ru/menyu-bar.html">Меню Бар</a></li>
                    <li><a href="http://www.rai-spa.ru/page1.html">Русская парная</a></li>
                    <li><a href="http://www.rai-spa.ru/tayskiy-massazh.html">Тайский массаж</a></li>
                </ul>
    </li>

    <li class="s3"><a href="http://www.rai-spa.ru/gallery/">Галерея</a></li>
    <li class="s4"><a href="http://www.rai-spa.ru/tour/tour.html">Виртуальный тур</a></li>
    <li class="s5"><a href="http://www.rai-spa.ru/page5.html">Контакты</a></li>
</ul>                   
                </div>
            </div>

CSS

#page #wrap #header #menu-top li.s2 {
    position: absolute;
    left: 308px;
    top: 500px;
}
#page #wrap #header #menu-top li.s2 a {
    background-image: url(../images/menu/2.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    height: 63px;
    width: 145px;
}

#page #wrap #header #menu-top li.s2 a:hover {background-position: 0px -63px;}


ul.menu {
    list-style:none;
    padding:0;
    margin: 0;
    font:12px Arial;
}

ul.menu li {
    float: left;
    margin: 0;   
    padding: 0;
    position: relative;
}

ul.menu li a{
   
    color: #fff;
    display: block;
    text-decoration: none;
    float: left;
    font-weight:bold;
   
   
   
}



ul.menu li ul.subnav {
margin-top: 10px;
    list-style: none;
    position: absolute;
    left: 0; top: 60px;
    background-image: url(../images/page.png);
    margin: 0; padding: 0;
    display: none;
    float: left;
    width: 400px;
   
    z-index:1;
}
ul.menu li ul.subnav a {

}

ul.menu li ul.subnav li a {
    float: left;
    width: 400px;
    border:0;
   
   
    padding-left: 25px;
}

javascript

<script type="text/javascript">
$(document).ready(function(){
   
     $("ul.menu li a").mouseover(function() {
            
        $(this).parent().find("ul.subnav").slideDown('fast').show();
        $(this).parent().hover(function() {
        }, function(){   
            $(this).parent().find("ul.subnav").slideUp('slow');
        });
        });
              $("ul.menu li ul li a").mouseover(function() {
            
        $(this).parent().find("ul.subnav2").slideDown('fast').show();
        $(this).parent().hover(function() {
        }, function(){   
            $(this).parent().find("ul.subnav2").slideUp('slow');
           
        });
        });
});
</script>

Есть сайт, на который давно заказали вёрстку у фрилансера, который пропал.
Сейчас появилась необходимость сделать выпадающие меню.

Не могу понять как убрать что бы название основной категории (картинка) не дублировалась в каждом подпункте выпадающего меню?

Пробовал кучу разных вариантов но так и не смог понять откуда они появляются пытался прописать background-image:none; не помогло.

Зарание спасибо.

 

[mozal]

Вопрос чуть не понятен, потому что не видно результата вывода. Скорее всего поможе ввод дополнительного класса.

 

[Exails]

У тебя в css, один класс задан меню и подкатегориям, естественно одна картанка/фон. Попробую раздели классы .menu и .subnav

 

[ITeshnik]

#page #wrap #header #menu-top li.s2 a {
    background-image: url(../images/menu/2.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    height: 63px;
    width: 145px;
}

Этот класс наследуют все теги "а" в этом подменю, т.е. если опуститься ниже по DOMу #page #wrap #header #menu-top li.s2 ul.subnav li a они тоже будут наследовать эти свойства.
выхода минимум два.
1. вот тут

ul.menu li ul.subnav li a {
    float: left;
    width: 400px;
    border:0;
  
  
    padding-left: 25px;
}

вставить свойство background-image:none, только следить что-бы в файле цсс это свойство было всегда ниже всех определений li.s1 a, li.s2 a, li.s3 a...

2. свойство background-image: url(../images/menu/2.png) вставлять инлайном в ХТМЛ код
<li class="s2"><a href="Для просмотра ссылки Войди или Зарегистрируйся" style="background-image: url(../images/menu/2.png)">ggggg</a>, тогда из цсс его нужно убрать

 

[vasyagr]

Или используйте конкретно для этого стиля
ul.menu li ul.subnav li > a {
float: left;
width: 400px;
border:0;
padding-left: 25px;
}

 

[DexMaster]

а почему просто не вписать строгое наследование ">"

вместо

#page #wrap #header #menu-top li.s2 a {
и
#page #wrap #header #menu-top li.s2 a:hover {

используем

#page #wrap #header #menu-top li.s2 > a {
и
#page #wrap #header #menu-top li.s2 > a:hover {

таким образом не ломаем все следующие ссылки ))

 

[ninetienne]

Создай проект на jsfiddle или codepen, так легче разбираться.

 

[denism300]

не могу пока что создавать темы, поэтому попрошу помочь разобраться тут.
верстаю шаблон, оформляю поля типа input. opera упорно отказывается воспринимать прописанные стили.
ниже код css и скрины в опере и в FF

input#modlgn-username {
    border: solid 1px #625234;
    background: #2c2c2c url(../images/personal/login_img.png) no-repeat left center !important;
}

вот так выглядит в опере:

вот так выглядит в FF (поле с паролем пока что не оформлено)

 

[Teceract]

вот так выглядит в опере:

когда в опере сохранен пароль, то сам браузер задает стиль инпутов, через css не получиться изменить
но есть "костыль" для отключения:

<script>
if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
    window.setInterval(function(){
        $('input:-webkit-autofill').each(function(){
            var clone = $(this).clone(true, true);
            $(this).after(clone).remove();
        });
    }, 20);
}
</script>

 

[denism300]

когда в опере сохранен пароль, то сам браузер задает стиль инпутов, через css не получиться изменить
но есть "костыль" для отключения:

Спасибо. Я нашел еще один способ. Через CSS. Правда, есть у него один минус: нельзя вставить картинку в бэкграунд.
Вот решение, его необходимо вставить в начале файла стилей:

input:-webkit-autofill {
    background-color: transparent !important;
    -webkit-box-shadow: inset 0 0 0 50px #2c2c2c !important; /* Цвет фона */
    -webkit-text-fill-color: #ECD08C !important; /* цвет текста */
    color: #ECD08C !important;
}