Я знаю, что это довольно частый вопрос, но у меня были проблемы с поиском точного ответа на эту проблему.
Меню, которое я хочу, состоит из точек. Эти точки вертикальные. Текст для этих точек будет добавлен позже, так что не против этого сейчас. Я хочу подменю для некоторых из этих точек. Это подменю должно быть горизонтальным. Лучше всего иллюстрируется ниже.
x
x x x
x
x
x
Но пока это выглядит так:
x
x
xx
x
x
Таким образом, подменю находится на одну строку ниже того места, где оно должно располагаться поверх другого элемента. Надеюсь, это ясно
HTML-код, который у меня есть:
<ul id="mainmenu">
<li id="liHome" class="active">
<a href="#item-x1y1" class="panel" rel="none" id="Home">Home</a>
</li>
<li id="liServices" class=" ">
<a href="#item-x1y2" class="panel" rel="SubMenuY2" id="Services">Services</a>
<ul style="" id="SubMenuY2" class="submenu">
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
</ul>
</li>
<li id="liEnvironment">
<a href="#item-x1y3" class="panel" rel="none" id="Environment">Environment</a>
</li>
<li id="liCareer">
<a href="#item-x1y4" class="panel" rel="none" id="Career">Career</a>
</li>
<li id="liContact">
<a href="#item-x1y5" class="panel" rel="none" id="Contact">Contact</a>
</li>
</ul
И CSS это:
#mainmenu {
position: fixed;
left: 20px;
top: 50%;
z-index: 999999;
margin-top:-200px;
}
#mainmenu li {
height: 40px;
position: relative;
}
#mainmenu a {
display: block;
width: 40px;
height: 40px;
background: url(Images/dotnav.png) 0 100% no-repeat;
text-indent: -10000px;
overflow: hidden;
}
#mainmenu a:hover,
#mainmenu li.active a {
background-position: 0 0;
}
.submenu
{
list-style-type: none;
position:relative;
float:left;
}
.submenu li
{
display: inline;
float:left;
position:relative
}