Дерзкий
Мой дом здесь!
- Регистрация
- 27 Июн 2009
- Сообщения
- 101
- Реакции
- 403
- Автор темы
- #1
HTML
CSS
javascript
Есть сайт, на который давно заказали вёрстку у фрилансера, который пропал.
Сейчас появилась необходимость сделать выпадающие меню.
Не могу понять как убрать что бы название основной категории (картинка) не дублировалась в каждом подпункте выпадающего меню?
Пробовал кучу разных вариантов но так и не смог понять откуда они появляются пытался прописать background-image:none; не помогло.
Зарание спасибо.
Код:
<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==](https://leto23g.storage.yandex.net/rdisk/4fa430df81a9cad85f8cb7208a3299e7/mpfs/44mLB1LELV-LydP-s5ddKAUytLL7jv7Mwgg2A0gRHGw2aUSXKiANgY_5b8liDc1q4Vy_ucFYKxysuyowUMKVOw==?uid=0&filename=2014-07-10%2005-20-56%20%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0.png&disposition=inline&hash=&limit=0&content_type=image%2Fpng&rtoken=a6656a1ca2ba414e32b4441ec9928195&rtimestamp=53bdeb73&force_default=no)
Пробовал кучу разных вариантов но так и не смог понять откуда они появляются пытался прописать background-image:none; не помогло.
Зарание спасибо.