|
Спрайтовое выпадающее меню?Обсуждение темы Спрайтовое выпадающее меню? в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Столкнулся с проблемой наследования свойств в CSS. Оно мне не к месту, надо бы как-то обойти. В общем вот код: Описание для всей ... |
|
Опции темы |
27.08.2009, 17:34 | #1 |
|
Столкнулся с проблемой наследования свойств в CSS. Оно мне не к месту, надо бы как-то обойти. В общем вот код:
Описание для всей менюшки: #globalheader { width: 770px; height: 37px; position: relative; } #globalheader #globalnav { margin: 0; padding: 0; } #globalheader #globalnav li { display: inline; } #globalheader #globalnav li a { float: left; height: 0; padding-top: 34px; overflow: hidden; } #globalheader #globalnav li a, #globalheader #globalsearch { background-image: url(../i/menu_sprite.png); _background-image: url(../i/menu_sprite.png); background-repeat: no-repeat; } Координаты с фоновой картинки выставляем для каждой кнопки меню, как на сайте apple.com: #globalheader #globalnav li#main a { background-position: 1px -1px; width: 83px} #globalheader #globalnav li#about a { background-position: -83px -1px; width: 84px} #globalheader #globalnav li#service a { background-position: -167px -1px; width: 85px} #globalheader #globalnav li#prod a { background-position: -252px -1px; width: 85px} #globalheader #globalnav li#solutions a { background-position: -337px -1px; width: 85px} #globalheader #globalnav li#contact a { background-position: -422px -1px; width: 85px} #globalheader #globalnav li#partners a { background-position: -507px -1px; width: 89px} #globalheader #globalnav li#main a:active { background-position: 1px -1px} #globalheader #globalnav li#about a:active { background-position: -83px -1px} #globalheader #globalnav li#service a:active { background-position: -167px -1px} #globalheader #globalnav li#prod a:active { background-position: -252px -1px} #globalheader #globalnav li#solutions a:active { background-position: -337px -1px} #globalheader #globalnav li#contact a:active { background-position: -422px -1px} #globalheader #globalnav li#partners a:active { background-position: -507px -1px} #globalheader #globalnav li#main a:hover { background-position: 1px -36px} #globalheader #globalnav li#about a:hover { background-position: -83px -36px} #globalheader #globalnav li#service a:hover { background-position: -167px -36px} #globalheader #globalnav li#prod a:hover { background-position: -252px -36px} #globalheader #globalnav li#solutions a:hover { background-position: -337px -36px} #globalheader #globalnav li#contact a:hover { background-position: -422px -36px} #globalheader #globalnav li#partners a:hover { background-position: -507px -36px} А здесь начинается описание выпадающего списка меню: #globalheader #globalnav li ul { display: none; } #globalheader #globalnav li:hover ul { position: absolute; top: 22px; left: 14px; display: block;} #globalheader #globalnav li#about ul #1 a { background-position: 1px -70px; width: 83px} #globalheader #globalnav li#about ul #2 a { background-position: 1px -90px; width: 84px} #globalheader #globalnav li#about ul #3 a { background-position: 1px -110px; width: 85px} #globalheader #globalnav li#about ul #4 a { background-position: 1px -130px; width: 85px} #globalheader #globalnav li#about ul #5 a { background-position: 1px -150px; width: 85px} #globalheader #globalnav li#about ul #6 a { background-position: 1px -170px; width: 85px} HTML: (каракули-как бе ссылки, копипаст поковеркал русские слова) <div id="globalheader"> <ul id="globalnav"> <li id="main"><a href="/">Ãëàâíàÿ</a></li> <li class="about"><a href="/company">Î êîìïàíèè</a> <ul> <li id="1"><a href="/company/?id=16">Ðóêîâîäèòåëþ</a></li> <li id="2"><a href="/company/?id=12">Íà÷àëüíèêó IT-îòäåëà</a></li> <li id="3"><a href="/company/?id=2693">Äèëåðàì</a></li> <li id="4"><a href="/company/?id=214">Íàøè ïàðòíåðû</a></li> <li id="5"><a href="/company/?id=13">Íàøè êëèåíòû</a></li> <li id="6"><a href="/archive/?id=1731">Àðõèâ ìåðîïðèÿòèé</a></li> </ul></li> <li id="service"><a href="/service">Ñåðâèñ</a></li> <li id="prod"><a href="/production">Ïðîäóêöèÿ</a></li> <li id="solutions"><a href="/solutions">Ðåøåíèÿ</a></li> <li id="contact"><a href="/contacts">Êîíòàêòû</a></li> <li id="partners"><a href="/partners">Ïàðòíåðàì</a></li> </ul> <div id="globalsearch"> <form name="searchform" method="post" action="../search/"> <input type="text" class="cf1" name="search"> <input type="button" value="ïîèñê" onclick="check_form()" id="button"> </form> </div> Так вот... надо бы для выпадающего UL выставить координаты для каждой кнопки, точно так же как и для верхних LI (которые постоянно отображаются в линию, как нормальное горизонтальное меню). А CSS наследует свойства бекграунда из вышестоящих LI и вложенный в LI список со своими LI уже меня не слушается и не хочет применять к себе ни свойства ширины, ни свойства бэк-а. Пробовал применить св-ва ширины к выпадающему UL и к вложенным в него LI, одна фигня - не слушается. Как же мне сделать красивое меню на основе одной картинки??? Без нее никуда... тут простым заданием цвета фона не обойтись, крысата нужна блин. |
|
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Выпадающее меню | Chupacaber | Технологии Flash | 1 | 11.04.2011 15:49 |
выпадающее меню и show('***') | web_smile | HTML, CSS, JavaScript | 0 | 29.05.2010 19:08 |
глючит выпадающее меню | baho | ASP, Perl, PHP и MySQL | 2 | 09.01.2006 16:36 |
Выпадающее меню | anton | HTML, CSS, JavaScript | 3 | 01.09.2005 14:15 |
как сделать выпадающее меню | Hunter | ASP, Perl, PHP и MySQL | 2 | 09.05.2005 16:52 |
Реклама на форуме
Условия размещения рекламы
Биржа ссылок
Заработай на сайте!
|