Есть исxодный вариант меню:
Ключевой момент - li:hover ul {} стиль содержит z-index: -1; только в таком варианте у меня нет линии между пунктом верхнего уровня «Second» и его вложенным ul при наличии верхней границы у этого блока, там, где блок выступает за пределы пункта «Second».
Но с этим z-index -1 если класс .clear показать, убрав display: none; меню второго уровня проваливается под его содержимое.
Есть идеи как и границу затереть между пунктом меню верхнего уровня и его вложенным блоком меню и этот вложенный блок расположить над тем что идёт ниже меню?
<ul class="mainmenu">
<li>First</li>
<li class="dir">
Second
<ul>
<li>Second .1</li>
<li>Second .2</li>
<li>Second .3</li>
</ul>
</li>
<li>Third</li>
</ul>
<div class="clear">
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</div>
ul.mainmenu {
font: 20px Arian,sans-serif;
padding: 5px;
}
li {
padding: 2px 5px;
display: block;
}
ul.mainmenu>li {
float: left;
display: block;
margin-right: 30px;
cursor: pointer;
position: relative;
border-left-width: 10px;
}
ul.mainmenu>li.dir:hover {
border: 1px solid #ddd;
border-bottom: none;
margin: -1px 29px 0 -1px;
}
ul.mainmenu>li:hover {
margin-top: -3px;
border-top: 3px solid black;
background: white;
}
li>ul {
display: none;
float: left;
position: absolute;
top: 27px;
left: -1px;
}
li:hover ul {
display: block;
border: 1px solid #ddd;
background: white;
z-index: -1;
}
li ul li {
clear: both;
margin: 0;
white-space:nowrap;
}
li ul li:hover {
border-left: 3px solid black;
margin-left: -3px;
}
.clear {
clear: both;
display: none;
}
