Всем привет. Есть вот такое меню на сайте порше
и у меня возник такой вопрос, как сделать так чтобы все пункты 3его уровня прижимались к потолку?
Сам вижу такую возможност только в прописывании по ай ди margin-top для всех пунктов 3-его уровня, но чт ото мне подсказывает что есть способ куда проще.
Вот что я натворил (Сырое демо + исодники ) :
http://duvanov.net/123.html
|
Код:
|
ul.porshe4
{
padding: 0;
margin: 0;
list-style: none;
}
ul.porshe4 li:last-child
{
border-bottom:1px solid #CCC;
}
ul.porshe4 li a
{
text-decoration:none;
display:block;
height:35px;
background-image:url(01boxster.gif);
background-repeat:no-repeat;
background-position:top;
}
ul.porshe4 li
{
background:url(hg.jpg);
background-repeat:no-repeat;
background-position:right;
border:1px solid #CCC;
border-bottom:none;
border-left:none;
border-right:none;
display: block;
width: 223px;
height:47px;
}
ul.porshe4 li ul
{
visibility: hidden;
position: absolute;
left: 223px;
top:-2px;
}
ul.porshe4 li ul li
{
height:20px;
background:url(fon.png);
}
ul.porshe4 li ul li a
{
background-image:none;
}
.porshe4 li:hover {
position: relative;
}
.porshe4 li:hover > ul {
visibility: visible;
}
ul.porshe4 li ul li:hover
{
position:relative;
background-color:#FF0;
}
ul.porshe4 li ul li > div
{
visibility:hidden;
left:223px;
position:inherit;
margin:0px;
padding:0px;
background:#000;
height:300px;
}
ul.porshe4 li ul li:hover >div
{
visibility:visible;
}
img
{
margin:0px;
} |
<div style=" width:223px; background:url(fon.png); padding:10px;">
<ul class="porshe4" >
<img src="logo.gif" width="223" height="128" />
<li><a href="#"> </a>
<ul class="porsheone" >
<li><a href="#">Уровень 2 п 1</a><div style="margin-top:-150px;"><img src="logo.gif" width="223" height="128" /></div></li>
<li><a href="#">Уровень 2 п 2</a><div><img src="logo.gif" width="223" height="128" /></div></li>
<li><a href="#">Уровень 2 п 3</a><div><img src="logo.gif" width="223" height="128" /></div></li>
</ul>
</li>
<li><a href="#"> </a>
<ul class="porshetwo" >
<li><a href="#">Уровень 2 п 1</a><div><img src="logo.gif" width="223" height="128" /></div> </li>
<li><a href="#">Уровень 2 п 2</a><div><img src="logo.gif" width="223" height="128" /></div></li>
<li><a href="#">Уровень 2 п 3</a><div><img src="logo.gif" width="223" height="128" /></div></li>
</ul>
</li>
<li><a href="#"> </a>
<ul class="porshethree" >
<li><a href="#">Уровень 2 п 1</a><div><img src="logo.gif" width="223" height="128" /></div> </li>
<li><a href="#">Уровень 2 п 2</a><div><img src="logo.gif" width="223" height="128" /></div></li>
<li><a href="#">Уровень 2 п 3</a><div><img src="logo.gif" width="223" height="128" /></div></li>
</ul>
</li>
</ul>
</div>