Помогите с СSS

Дерзкий

Мой дом здесь!
Регистрация
27 Июн 2009
Сообщения
101
Реакции
403
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>

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

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


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

Зарание спасибо.
 
Вопрос чуть не понятен, потому что не видно результата вывода. Скорее всего поможе ввод дополнительного класса.
 
У тебя в css, один класс задан меню и подкатегориям, естественно одна картанка/фон. Попробую раздели классы .menu и .subnav
 
Код:
#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>, тогда из цсс его нужно убрать
 
Или используйте конкретно для этого стиля
ul.menu li ul.subnav li > a {
float: left;
width: 400px;
border:0;
padding-left: 25px;
}
 
а почему просто не вписать строгое наследование ">"

вместо

#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 {

таким образом не ломаем все следующие ссылки ))
 
Создай проект на jsfiddle или codepen, так легче разбираться.
 
не могу пока что создавать темы, поэтому попрошу помочь разобраться тут.
верстаю шаблон, оформляю поля типа input. opera упорно отказывается воспринимать прописанные стили.
ниже код css и скрины в опере и в FF
Код:
input#modlgn-username {
    border: solid 1px #625234;
    background: #2c2c2c url(../images/personal/login_img.png) no-repeat left center !important;
}
вот так выглядит в опере:
4045d5588851.png

вот так выглядит в FF (поле с паролем пока что не оформлено)
997c7a8f8626.png
 
вот так выглядит в опере:
4045d5588851.png
когда в опере сохранен пароль, то сам браузер задает стиль инпутов, через css не получиться изменить
но есть "костыль" для отключения:
HTML:
<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>
 
когда в опере сохранен пароль, то сам браузер задает стиль инпутов, через css не получиться изменить
но есть "костыль" для отключения:
Спасибо. Я нашел еще один способ. Через CSS. Правда, есть у него один минус: нельзя вставить картинку в бэкграунд.
Вот решение, его необходимо вставить в начале файла стилей:
HTML:
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;
}
 
Назад
Сверху