Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript
Перезагрузить страницу

Помогите отредактировать выпадающее меню


Помогите отредактировать выпадающее меню

Обсуждение темы Помогите отредактировать выпадающее меню в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Помогите отредактировать выпадающее меню. CSS: Цитата: ul#cssmenu { margin: 0; border: 0 none; padding: 0; list-style: none; background: #005797; border-left:#005797 1px solid; } ...


Закрытая тема
Страница 1 из 2 1 2 >
 
Опции темы
Старый 15.04.2011, 08:18   #1
Помогите отредактировать выпадающее меню.

CSS:

Цитата:
ul#cssmenu {
margin: 0;
border: 0 none;
padding: 0;
list-style: none;
background: #005797;
border-left:#005797 1px solid;
}

ul#cssmenu li {
margin: 0;
border: 0 none;
padding: 0;
float: left;
display: inline;
list-style: none;
position: relative;
}

ul#cssmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 30px;
left: 0;
}

ul#cssmenu ul:after {
clear: both;
display: block;
content: ".";
height: 0;
visibility: hidden;
}

ul#cssmenu ul li {
width: 120px;
float: left;
display: block !important;
display: inline;
}

/* Main Menu */
ul#cssmenu a {
border: 0px;
padding: 0 10px;
float: none !important;
float: left;
display: block;
background: #005797;
color: #FFFFFF;
font: bold 12px/28px Tahoma;
text-decoration: none;
height: auto !important;
height: 1%;
}

/* Main Menu Hover */
ul#cssmenu a:hover,
ul#cssmenu li:hover a,
ul#cssmenu li.iehover a {
background: #FFFFFF;
color:#003366;
border-top:#003366 1px solid;
}

/* Second Menu */
ul#cssmenu li:hover li a,
ul#cssmenu li.iehover li a {
border-top: 1px solid #FFFFFF;
float: none;
background: #005797;
color: #FFFFFF;
}

/* Second Menu Hover */
ul#cssmenu li:hover li a:hover,
ul#cssmenu li:hover li:hover a,
ul#cssmenu li.iehover li a:hover,
ul#cssmenu li.iehover li.iehover a {
border-top: 2px solid #FFFFFF;
background: #005797;
color:#003366;
border:#003366 1px solid;
}

ul#cssmenu ul ul {
display: none;
position: absolute;
top: 0;
left: 170px;
}

ul#cssmenu li:hover ul ul,
ul#cssmenu li.iehover ul ul {
display: none;
}

ul#cssmenu li:hover ul,
ul#cssmenu ul li:hover ul,
ul#cssmenu li.iehover ul,
ul#cssmenu ul li.iehover ul {
display: block;
}

.menumain {
font-family: Tahoma; color: white; text-decoration: none;
}
.menumain:hover {
font-family: Tahoma; color: silver; text-decoration: none;
}
Часть менюшки:

Цитата:
<ul id="cssmenu">
<li><a class="menumain" href="">ГЛАВНАЯ</a>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
</ul>
</li>
</ul>

Вот что у меня получается:

http://i074.radikal.ru/1104/79/cda5171a3f37.jpg

http://s47.radikal.ru/i116/1104/b7/4f63b5ed33f4.jpg

А надо чтобы ссылка была выровнена по вертикали и горизонтали и при наведении был не белый фон, а который у остальных ссылок

Заранее спасибо
 
Старый 15.04.2011, 08:18
Ссылки
Старый 15.04.2011, 11:44   #2
Ссылка вроде и так выровнена.
А чтобы фон был правильный нужно убрать строку:
Код HTML:
background: #FFFFFF;
в блоке:
Код HTML:
ul#cssmenu a:hover,
ul#cssmenu li:hover a,
ul#cssmenu li.iehover a {
background: #FFFFFF;
color:#003366;
border-top:#003366 1px solid;
}
Изображения
Тип файла: jpg testMenu.jpg (5.9 Кб, 7 просмотров)
 
Старый 15.04.2011, 12:39   #3
круть!... а я как дурак все жавайскриптом пишу...
 
Старый 15.04.2011, 14:15   #4
http://s012.radikal.ru/i320/1104/9c/1c6cc00d71a4.jpg

Уже лучше )))

Как теперь выравнять ссылку "ГЛАВНАЯ" по середине, уменьшить отступ (выделен красным) и сделать выпадающие столбцы тоже посередине?

CSS:
Цитата:
ul#cssmenu {
margin: 0;
border: 0 none;
padding: 0;
list-style: none;
background: #005797;

}

ul#cssmenu li {
margin: 0;
border: 0 none;
padding: 0;
float: left;
display: inline;
list-style: none;
position: relative;

text-align: center;
}

ul#cssmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 170px;
list-style: none;
display: none;
position: absolute;
top: 30px;
left: 0;
}

ul#cssmenu ul:after {
clear: both;
display: block;
content: ".";
height: 0;
visibility: hidden;
}

ul#cssmenu ul li {
width: 120px;
float: left;
display: block !important;
display: inline;
}

/* Main Menu */
ul#cssmenu a {
border: 0px;
float: none !important;
display: block;
background: #005797;
color: #FFFFFF;
font-family: Tahoma;

text-align: center;
text-decoration: none;
height: auto !important;
height: 1%;
}

/* Main Menu Hover */

ul#cssmenu a:hover,
ul#cssmenu li:hover a,
ul#cssmenu li.iehover a {
color:silver;
}

/* Second Menu */
ul#cssmenu li:hover li a,
ul#cssmenu li.iehover li a {
border-top: 1px solid #FFFFFF;
float: none;
background: #005797;
color: white;
}

/* Second Menu Hover */
ul#cssmenu li:hover li a:hover,
ul#cssmenu li:hover li:hover a,
ul#cssmenu li.iehover li a:hover,
ul#cssmenu li.iehover li.iehover a {
border-top: 2px solid #FFFFFF;
color:silver;
border:#003366 1px solid;
}

ul#cssmenu ul ul {
display: none;
position: absolute;
top: 0;
left: 200px;
}

ul#cssmenu li:hover ul ul,
ul#cssmenu li.iehover ul ul {
display: none;
}

ul#cssmenu li:hover ul,
ul#cssmenu ul li:hover ul,
ul#cssmenu li.iehover ul,
ul#cssmenu ul li.iehover ul {
display: block;
}
Последний раз редактировалось IDen; 15.04.2011 в 14:18..
 
Старый 15.04.2011, 17:16   #5
Тут заменить свойство:
top: Ypx; Y - рассчитать исходя из высоты ul#cssmenu li.
left: Xpx; X - рассчитать исходя из ширины ul#cssmenu li или подобрать примерно.
Код HTML:
ul#cssmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 170px;
list-style: none;
display: none;
position: absolute;
top: 30px;
left: 0;
}
Тут заменить:
border-top: 2px solid #FFFFFF;
Код HTML:
/* Second Menu */
ul#cssmenu li:hover li a,
ul#cssmenu li.iehover li a {
border-top: 1px solid #FFFFFF;
float: none;
background: #005797;
color: white;
}
Последний раз редактировалось Макс-Текс; 15.04.2011 в 17:19..
 
Старый 15.04.2011, 17:52   #6
Получилось, теперь только остался 1 вопрос: как выравнять ссылку "ГЛАВНАЯ" по вертикали и по горизонтали чтобы она был в центре, а не у левого края?
 
Старый 15.04.2011, 18:07   #7
У меня она по центру, по тем кодам, что вы дали.
Давайте весь код меню тогда.
 
Старый 15.04.2011, 18:31   #8
хм...

Щас посмотрел в IE, все по центру

Но в FireFox 4 прижат к левому краю...

Что делать?

CSS:
Цитата:

ul#cssmenu {
margin: 0;
border: 0 none;
padding: 0;
list-style: none;
background: #005797;

}

ul#cssmenu li {
margin: 0;
border: 0 none;
padding: 0;
float: left;
display: inline;
list-style: none;
position: relative;

text-align: center;
}

ul#cssmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 170px;
list-style: none;
display: none;
position: absolute;
top: 28px;
left: 8px;

}

ul#cssmenu ul:after {
clear: both;
display: block;
content: ".";
height: 0;
visibility: hidden;
}

ul#cssmenu ul li {
width: 120px;
float: left;
display: block !important;
display: inline;
}

/* Main Menu */
ul#cssmenu a {
border: 0px;
float: none !important;
display: block;
background: #005797;
color: #FFFFFF;
font-family: Tahoma;

text-align: center;
text-decoration: none;
height: auto !important;
height: 1%;
}

/* Main Menu Hover */

ul#cssmenu a:hover,
ul#cssmenu li:hover a,
ul#cssmenu li.iehover a {
color:silver;
}

/* Second Menu */
ul#cssmenu li:hover li a,
ul#cssmenu li.iehover li a {
border-top: 1px solid #FFFFFF;
float: none;
background: #005797;
color: white;
}

/* Second Menu Hover */
ul#cssmenu li:hover li a:hover,
ul#cssmenu li:hover li:hover a,
ul#cssmenu li.iehover li a:hover,
ul#cssmenu li.iehover li.iehover a {
border-top: 1px solid #FFFFFF;
color:silver;
border:#003366 1px solid;
}

ul#cssmenu ul ul {
display: none;
position: absolute;
top: 0;
left: 200px;
}

ul#cssmenu li:hover ul ul,
ul#cssmenu li.iehover ul ul {
display: none;
}

ul#cssmenu li:hover ul,
ul#cssmenu ul li:hover ul,
ul#cssmenu li.iehover ul,
ul#cssmenu ul li.iehover ul {
display: block;
}
.menumain {
font-family: Tahoma; color: white; text-decoration: none;
}
.menumain:hover {
font-family: Tahoma; color: silver; text-decoration: none;
}
HTML:
Цитата:
<tr>
<td width="88" height="39"><img src="img/1_1.jpg"></td><td align="center" valign="middle" width="140" height="39">

<ul id="cssmenu">
<li><a class="menumain" href="">ГЛАВНАЯ</a>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
</ul>
</li>
</ul>
</td><td width="23" height="39"><img src="img/1_2.jpg"></td><td align="center" valign="middle" width="140" height="39"><a class="menumain" href="tariffs/">ТАРИФЫ</a></td><td width="21" height="39"><img src="img/1_3.jpg"></td><td align="center" valign="middle" width="140" height="39">
<a class="menumain" href="users/">АБОНЕНТАМ</a>
</td><td width="20" height="39"><img src="img/1_4.jpg"></td><td align="center" valign="middle" width="140" height="39"><a class="menumain" href="about/">О НАС</a></td><td width="88" height="39"><img src="img/1_5.jpg"></td></tr>
 
Старый 17.04.2011, 20:32   #9
Нужно добавить такое свойство для ul#cssmenu:

Код HTML:
ul#cssmenu {
display: inline-block;
}
 
Старый 17.04.2011, 21:38   #10
ОГРОМНОЕ СПАСИБО!!!

А если я в IE не успеваю курсор перевести - меню пропадает быстро, нужно его просто чуть выше поднять?
 
Старый 17.04.2011, 21:38
Закрытая тема
Страница 1 из 2 1 2 >

« Убрать фон под картинками | JS - разные примочки »



Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите отредактировать меню в CSS alphoss HTML, CSS, JavaScript 3 12.08.2015 08:21
Выпадающее меню. Помогите убрать отступ UL Peter Soloviev HTML, CSS, JavaScript 6 04.07.2013 08:32
Помогите сделать нестандартное выпадающее меню zaqwsx_ HTML, CSS, JavaScript 4 26.10.2009 11:23
Помогите отредактировать меню на корейском sanja Технологии Flash 12 02.04.2007 17:37
Выпадающее меню anton HTML, CSS, JavaScript 3 01.09.2005 14:15


Текущее время: 03:15. Часовой пояс GMT +4.



Справка - Обратная связь - Web-silver.ru - Архив - Календарь - Карта - Вверх

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Дизайнерский форум