0
Я пытаюсь создать меню и подменю, я хочу сделать подменю, которое появляется для всех элементов с фиксированным размером. Что-то вроде этого меню этого сайта: http://designscrazed.org/Подменю с фиксированным размером
<div id="menu">
<ul>
<li class="current-menu-item"> element 1
<ul>
<li> <a href="#">sub element 1.2</a></li>
<li> sub element 2.2</li>
</ul>
</li>
<li> element 2
<ul>
<li> sub element 1.2</li>
<li> sub element 2.2</li>
</ul>
</li>
<li> element 3
<ul>
<li> sub element 1.3</li>
<li> sub element 2.3</li>
</ul>
</li>
<li> element 4
<ul>
<li> sub element 1.4</li>
<li> sub element 2.4</li>
</ul>
</li>
<li> element 5
<ul>
<li> sub element 1.5</li>
<li> sub element 2.5</li>
</ul>
</li>
<li> element 6
<ul>
<li> sub element 1.6</li>
<li> sub element 2.6</li>
</ul>
</li>
<li> element 7
<ul>
<li> sub element 1.7</li>
<li> sub element 2.7</li>
</ul>
</li>
</ul>
</div>
и это мой CSS:
#menu{
background-color:magenta;
float:right;
width:auto;
height:auto;
/*display:inline-block;*/
margin:10px 90px;
padding: 0 0px;
text-align:center;
}
#menu ul li{
width:100px;
height:20px;
list-style:none;
position:relative;
top:0px;
float:left;
margin:0 5px;
padding:8px 0;
cursor:pointer;
}
#menu ul li.current-menu-item
{
background:#ddd
}
#menu ul li:hover{
background-color:#7F7F7F;
}
#menu ul ul{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0;
right: 50%;
margin-right: -85px;
}
#menu ul ul li{
float:none;
width:20em;
background-color:cyan;
margin:0px 0;
}
#menu ul li:hover > ul{
display:block;
left:auto;
right:0;
margin-right:-10px;
}
Только примечание: с использованием фиксированного размера собирается быть грязной работой, когда вы пытаетесь сделать свой сайт отзывчивым. Как насчет использования '%' или 'em' –
@ kode.Error404 Я хочу иметь подменю для всех родительских элементов с одинаковой шириной и высотой и только изменять содержимое внутри каждого подменю, но я хочу их. –