Выпадающее меню

93

sportmaster

3 июля 2009, 19:10

679

Вот пример выпадающего меню с помощью css. Только вот не пойму что здесь обозначает "ul" в начале каждой заполненной строчки в css (отмечу первые 5ть жирным)??? Вот, к примеру, взять эту часть "ul#hmenu".

html-код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<li><a href="#">About</a>

<ul>

<li><a href="#">Contacts</a></li>

<li><a href="#">Sitemap</a></li>

</ul>

</li>

<li><a href="#">Products</a>

<ul>

<li><a href="#">Group #1</a></li>

<li><a href="#">Group #2</a></li>

<li><a href="#">Group #3</a></li>

<li><a href="#">Group #4</a></li>

<li><a href="#">Group #5</a></li>

</ul>

</li>

<li><a href="#">Support</a>

<ul>

<li><a href="#">Download center</a></li>

</ul>

</li>

</ul>

</body>

</html>

css-код

ul#hmenu {

margin: 0;

border: 0 none;

padding: 0;

list-style: none;

background: #565766;

height: 28px;

font: bold 12px/28px Verdana, Arial;

}

ul#hmenu li {

margin: 0;

border: 0 none;

padding: 0;

float: left;

display: inline;

list-style: none;

position: relative;

height: 28px;

}

ul#hmenu ul {

margin: 0;

border: 0 none;

padding: 0;

width: 160px;

list-style: none;

display: none;

position: absolute;

top: 28px;

left: 0;

}

ul#hmenu ul:after {

clear: both;

display: block;

font: 1px/0px serif;

content: ".";

height: 0;

visibility: hidden;

}

ul#hmenu ul li {

width: 160px;

float: left;

display: block !important;

display: inline;

}

/* Main Menu */

ul#hmenu a {

border: 0px;

padding: 0 6px;

float: none !important;

float: left;

display: block;

background: #565766;

color: #FFFFFF;

font: bold 12px/28px Verdana, Arial;

text-decoration: none;

height: auto !important;

height: 1%;

}

/* Main Menu Hover */

ul#hmenu a:hover,

ul#hmenu li:hover a,

ul#hmenu li.iehover a {

background: #808298;

color: #FFFFFF;

}

/* Second Menu */

ul#hmenu li:hover li a,

ul#hmenu li.iehover li a {

border-top: 1px solid #FFFFFF;

float: none;

background: #565766;

color: #FFFFFF;

}

/* Second Menu Hover */

ul#hmenu li:hover li a:hover,

ul#hmenu li:hover li:hover a,

ul#hmenu li.iehover li a:hover,

ul#hmenu li.iehover li.iehover a {

border-top: 1px solid #FFFFFF;

background: #808298;

color: #FFFFFF;

}

ul#hmenu ul ul {

display: none;

position: absolute;

top: 0;

left: 160px;

}

ul#hmenu li:hover ul ul,

ul#hmenu li.iehover ul ul {

display: none;

}

ul#hmenu li:hover ul,

ul#hmenu ul li:hover ul,

ul#hmenu li.iehover ul,

ul#hmenu ul li.iehover ul {

display: block;

}

199

Arsh

3 июля 2009, 19:24

#1

Селекторы также можно определять с помощью атрибута id, используя для этого символ #. В следующем примере стиль соответствует любому дескриптору, у которого значение атрибута id является "ducie"
#ducie {border-color: yellow}

10 букварей

S

93

sportmaster

3 июля 2009, 19:37

#2

Arsh:
10 букварей

Ничего не понятно...

Что означает "#hmenu" понятно, а вот что означает "ul#hmenu" - не понятно. Ведь если убрать все эти "ul", то абсолютно ничего не произойдет....

176

Linkpusher

3 июля 2009, 19:49

#3

sportmaster, а если заюзать <ol id="hmenu"> до «убрать» и после?

Точу ножи. Буквально. Есть отзывы. Заказать заточку в МСК и Подольске можно через Телеграмм.

199

Arsh

3 июля 2009, 19:51

#4

sportmaster:
если убрать все эти "ul", то абсолютно ничего не произойдет....

Только списки начнут "выпадать" не только в меню :)

Ну, прочтите главу "Селекторы в CSS", а?

S

93

sportmaster

3 июля 2009, 20:15

#5

toxic steel:
sportmaster, а если заюзать <ol id="hmenu"> до «убрать» и после?

Я в шоке.... вместо того, чтобы написать посуществу, показываете какой вы Гуру. Лучше тогда вообще не отвечать...😎

sportmaster добавил 04.07.2009 в 01:46

Arsh:
Только списки начнут "выпадать" не только в меню :)

Попробуйте убрать и ничего не изменится.... почему не только?

sportmaster добавил 04.07.2009 в 01:52

Итак понятно, что для ul, потому что id там стоит. И больше нигде на страничке таких id не будет - их нельзя дублировать.

Что делать, если ваша email-рассылка попала в спам

В 2023 году Google заблокировал более 170 млн фальшивых отзывов на Картах