-
Добро пожаловать на компьютерный форум Tehnari.ru. Здесь разбираемся с проблемами ПК и ноутбуков: Windows, драйверы, «железо», сборка и апгрейд, софт и безопасность. Форум работает много лет, сейчас он переехал на новый движок, но старые темы и аккаунты мы постарались сохранить максимально аккуратно.
Форум не связан с магазинами и сервисами – мы ничего не продаём и не даём «рекламу под видом совета». Отвечают обычные участники и модераторы, которые следят за порядком и качеством подсказок.
Если вы у нас впервые, загляните на страницу о форуме и правила – там коротко описано, как задать вопрос так, чтобы быстро получить ответ. Чтобы создавать темы и писать сообщения, сначала зарегистрируйтесь, а затем войдите под своим логином.
Не знаете, с чего начать? Создайте тему с описанием проблемы – подскажем и при необходимости перенесём её в подходящий раздел.Задать вопрос Новые сообщения Как правильно спроситьЕсли пришли по старой ссылке со старого Tehnari.ru – вы на нужном месте, просто продолжайте обсуждение.
Выпадающее меню
- Автор темы areostar
- Дата начала
Xploit
Новые
- Регистрация
- 3 Июл 2008
- Сообщения
- 588
- Реакции
- 30
- Баллы
- 0
Обозначь это правило классом или кусок кода в div помести тогда оно будет только на ту часть распространяться, в которой обозначено меню.
допустим в
Код:
<div id="tvoe_menu">
<ul>
<li>bla bla bla...</li>
<li>bla bla bla...</li>
<li>bla bla bla...</li>
</ul>значит в css пишем
Код:
#tvoe_menu {
color: #000;
background: #fff;
bla bla bla.....
}
#a_tut_drugie_pravila {
color: #fff;
background: #000;
bla bla bla.....
}а если стилем - то там также, только
в блоке задаем класс
Код:
<div class="tvoe_menu">
<ul>
<li>bla bla bla...</li>
<li>bla bla bla...</li>
<li>bla bla bla...</li>
</ul>а в css тогда
Код:
.tvoe_menu {
color: #000;
background: #fff;
bla bla bla.....
}
.a_tut_drugie_pravila {
color: #fff;
background: #000;
bla bla bla.....
}Попытался вставить в код страницы вот Этот фрагмент
Отображается просто весь список!!! Без всяких выподающих влажений!!
Код:
<style type='text/css'>
.menu
{
ul
{
margin: 0;
padding: 0;
list-style: none;
width: 250px;
border-bottom: 1px solid #ccc;
}
ul li { position: relative; }
li ul
{
position: absolute;
left: 249px;
top: 0;
display: none;
}
ul li a
{
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
li:hover ul { display: block; }
}
</style>
<div class ="menu" >
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Недвижимость</a> </li>
<li><a href="#">Домашний ремонт</a>
<ul>
<li><a href="#">Ремонт Крыш</a></li>
<li><a href="#">Сантехника</a></li>
<li><a href="#">Установка и ремонт дверей</a></li>
<li><a href="#">Электрики</a></li>
<li><a href="#">Устаовка бойлеров</a></li>
</ul>
</li>
<li><a href="#">Автомобили</a>
<ul>
<li><a href="#">Купля\Продaжа</a></li>
<li><a href="#">Прокат Автомобилей</a></li>
<li><a href="#">Ремонт и обслуживание</a></li>
</ul>
</li>
<li><a href="#">Компютеры</a>
<ul>
<li><a href="#">Продажа компютеров</a></li>
<li><a href="#">Ремонт и Обслуживание</a></li>
<li><a href="#">Разработка сайтов и программ </a></li>
</ul>
</li>
<li><a href="#">Перевозки</a></li>
<li><a href="#">Юр. Услуги</a>
<ul>
<li><a href="#">Адвокаты</a></li>
<li><a href="#">Натариусы</a></li>
</ul>
</li>
<li><a href="#">Торговля</a>
<ul>
<li><a href="#">Продукты питания</a></li>
<li><a href="#">Товары для дома</a></li>
<li><a href="#">Предметы роскаши</a></li>
</ul>
</li>
<li><a href="#">Финансы</a>
<ul>
<li><a href="#">Бугатера и Аудиторы</a></li>
<li><a href="#">Советники по налогам</a></li>
<li><a href="#">Советники по инвестициям</a></li>
</ul>
</li>
<li><a href="#">Медицина и Здоровье</a>
<ul>
<li><a href="#">Стоматология</a></li>
<li><a href="#">Пластическая Хирургия</a></li>
<li><a href="#">Часные Клиники</a></li>
<li><a href="#">Врачи частной практики</a></li>
</ul>
</li>
<li><a href="#">Туризм</a>
<ul>
<li><a href="#">Турагенство</a></li>
<li><a href="#">Услуги Гида</a></li>
<li><a href="#">Заказ Билетов</a></li>
</ul>
</li>
</ul>
</div>Отображается просто весь список!!! Без всяких выподающих влажений!!
Xploit
Новые
- Регистрация
- 3 Июл 2008
- Сообщения
- 588
- Реакции
- 30
- Баллы
- 0
На примере этого куска кода :
Код:
<li><a href="#">Туризм</a>
<ul>
<li><a href="#">Турагенство</a></li>
<li><a href="#">Услуги Гида</a></li>
<li><a href="#">Заказ Билетов</a></li>
</ul>
</li>можно задать для <li> свой класс
Код:
<li><a href="#">Туризм</a>
<ul>
<li class="klass_punkta_menu1"><a href="#">Турагенство</a></li>
<liclass="klass_submenu2"><a href="#">Услуги Гида</a></li>
<liclass="klass_submenu2"><a href="#">Заказ Билетов</a></li>
</ul>
</li>потом в ксс для каждого класса можно задать свой стиль
Код:
.klass_submenu2 li {
height: 25px;
color:fff;
}
li.klass_submenu2 {
color:aaa;
}
Код:
#menu ul a:hover{
color: fff;
}Cделал влт что:
Только выподаюший пункт выдвигается неже родительского пункта!!!
Как переделать чтоб пункты были поралелны!:tehnari_ru_203:
Код:
<style type='text/css'>
.menu ul {
margin: 0;
padding: 0;
list-style: none;
width: 250px;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.menu ul li {
position: relative;
height: 44px; /*тут высота*/
border-bottom: 1px solid #ccc;
}
li ul{
position: absolute;
left: 250px;
top: 10;
display: none;
}
.menu ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 15px; /*тут отступ*/
}
.menu li:hover ul { display: block; }
}
</style>Только выподаюший пункт выдвигается неже родительского пункта!!!
Как переделать чтоб пункты были поралелны!:tehnari_ru_203:
Xploit
Новые
- Регистрация
- 3 Июл 2008
- Сообщения
- 588
- Реакции
- 30
- Баллы
- 0
Код:
<style type='text/css'>
.menu ul {
margin: 0;
padding: 0;
list-style: none;
width: 250px;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.menu ul li {
position: relative;
height: 44px; /*тут высота*/
border-bottom: 1px solid #ccc;
}
li ul{
position: absolute;
left: 250px;
top: 0;
display: none;
}
.menu ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 15px; /*тут отступ*/
}
.menu li:hover ul { display: block; }
}
</style>li ul{
position: absolute;
left: 250px;
top: 0; <--- вот тут надо поставить 0
display: none;
}