here comes the HTML:
<ul id="plugins_fullMenu">
<li><a href="/"> Főoldal </a></li>
<li><a href="introduce"> Bemutatkozás </a></li>
<li><a href="products"> Termékek </a></li>
<li><a href="NYETT"> Kategóriák </a>
<ul class="plugins_fullMenu first">
<li><a href="asdasdsada"> kateg1 </a></li>
<li><a href="bxcvxcvxcv"> kateg2 </a></li>
<li><a href="NYETT"> prognyelv </a>
<ul class="plugins_fullMenu ">
<li><a href="3.1"> C# </a></li>
<li><a href="3.2"> C </a></li>
<li><a href="3.3"> C++ </a></li>
</ul></li>
</ul></li>
<li><a href="links"> Linkek </a></li>
<li><a href="NYETT"> Admin felület </a>
<ul class="plugins_fullMenu">
<li><a href="1"> a </a></li>
<li><a href="2"> b </a></li>
</ul></li>
<li><a href="veg"> veg </a></li></ul>
and the CSS:
#plugins_fullMenu, .plugins_fullMenu, #plugins_fullMenu .plugins_fullMenu li
{
margin:0px;
padding:0px;
display: table;
}
#plugins_fullMenu li
{
float:left;
display: inline;
cursor:pointer;
list-style:none;
padding:0px 0px 0px 0px;
border:1px #000 solid;
position:relative;
}
#plugins_fullMenu li ul.first
{
left:-1px; top:100%;
background-color: red;
}
li, li a
{
color:#000;
text-decoration:none;
padding: 10px 0px 10px 0px;
}
#plugins_fullMenu .plugins_fullMenu li
{
width:100%;
/* text-indent:10px;
line-height:30px;
margin-right:10px;*/
border-top:1px #000 solid;
border-bottom:1px #000 solid;
border-left:none;
border-right:none;
background:red;
}
#plugins_fullMenu li a
{
display:block;
width:inherit;
height:inherit;
}
ul.plugins_fullMenu
{
display:none;
}
#plugins_fullMenu li:hover > a, #plugins_fullMenu li:hover
{
color:#fff;
background:green;
}
li:hover > .plugins_fullMenu
{
display:block;
position:absolute;
width:auto;
top:-1px;
left:50%;
z-index:1000;
border:1px #000 solid;
}
li:hover
{
position:relative;
z-index:2000;
}
now the problem is the two submenu of "admin felület" overlaps it. It should not, whats wrong?
