ПриветCSS выпадающего меню абсолют - необходимость уточнения
У меня есть это меню жира код из http://nettuts.s3.amazonaws.com/819_megamenu/demo/index.html#:
<ul id="main">
<li><a href="" class="drop">Home</a>
<div class="dropdown_2columns"><!-- Begin 2 columns container -->
<div class="col_2">
<h2>Welcome !</h2>
</div>
<div class="col_2">
<p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p>
<p>This item comes with a large range of prepared typographic stylings such as headings, lists, etc.</p>
</div>
<div class="col_2">
<h2>Cross Browser Support</h2>
</div>
<div class="col_1">
<img src="img/browsers.png" width="125" height="48" alt="" />
</div>
<div class="col_1">
<p>This mega menu has been tested in all major browsers.</p>
</div>
</div
</li>
Соответствующая часть стиля является:
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
}
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px;
top:auto;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
#menu li:hover {
}
#menu li a {
display:block;
outline:0;
}
#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #ffffff;
}
#menu li .drop {
padding-right:21px;
background:url("img/drop.png") no-repeat right 8px;
}
Несмотря на то, что положение выпадающего меню упоминается как абсолютное - нет никакого упоминания об абсолютной позиции (т.е. координировать с). Если позиция position: absolute удаляется, последующие элементы (такие как «5 элементов» и т. Д.) Размещаются вокруг раскрывающегося меню (то есть, которое появляется после выбора меню «Главная» из меню). Следовательно, абсолютное означает, что выпадающее меню должно располагаться непосредственно под домом в строке меню, а следующее меню «5 столбцов» помещается рядом с «home» в строке меню, а не рядом с выпадающим меню. Тогда как это работает (т. Е. Как браузер понимает его как абсолютное), не упоминая значения координат top/bottom/left/right? В других примерах положения: абсолютное, например, для тех, что есть в w3schools, позиция упоминается непосредственно, т.е. top: 10px, left: 5px и т. Д. Но здесь это происходит как магия (но не помогает мне вообще понять). Поэтому, пожалуйста, помогите мне разобраться в этом и высоко ценят такую помощь.
Благодаря