Ключевой момент - 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;
}

Ссылка

←	nginx + uwsgi - перенаправление запросов.

Система учёта посещений страниц

→

Есть идеи как и границу затереть между пунктом меню верхнего уровня и его вложенным блоком меню и этот вложенный блок расположить над тем что идёт ниже меню?

Да, использовать http://twitter.github.com/bootstrap/components.html#navs

r_asian ★☆☆
(09.01.13 21:43:02 MSK)

А использовать jquery не хотите? Могу пошарить по своим исходникам, там есть годные кусочки.

sudo-s ★
(09.01.13 21:59:56 MSK)

Ответ на: комментарий от r_asian 09.01.13 21:43:02 MSK

Если ты имеешь в виду внешний вид табов, а именно - активный таб не имеет нижней границы, то это не то, там ul в котором показываются «корешки» табов имеет border-bottom, при таком подходе у меня в меню полоса ниже активного элемента меню верхнего уровня будет растянута на всю ширину ul самого верхнего уровня. А мне нужна граница для блока подменю.

Reaper ★★
(09.01.13 22:04:20 MSK) автор топика

Ссылка

Ответ на: комментарий от sudo-s 09.01.13 21:59:56 MSK

Покажите. Хотелось бы обойтись, конечно, средствами только CSS, там у вас с отключенными скриптами меню функционирует?

Reaper ★★
(09.01.13 22:08:33 MSK) автор топика

Ответ на: комментарий от Reaper 09.01.13 22:08:33 MSK

Нет, только со скриптами, ибо само позиционирование описывается скриптом.

function getOffsetRect(elem) 
	{
	    var box = elem.getBoundingClientRect()
	    var body = document.body
	    var docElem = document.documentElement
	    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
	    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
	    var clientTop = docElem.clientTop || body.clientTop || 0
	    var clientLeft = docElem.clientLeft || body.clientLeft || 0
	    var top  = box.top +  scrollTop - clientTop
	    var left = box.left + scrollLeft - clientLeft
	    return { top: Math.round(top), left: Math.round(left) }
	}
	$(document).ready(function()
{
	$(".top_menu li").hover
	(function()
	{
		var bro=navigator.appName;
		var ss; var tt; var xx=0;
		var br=getOffsetRect(this);
		var ss=br.left;
		var tt=br.top;
		//$(this).attr({style:""});
		if (bro=="Microsoft Internet Explorer") {/*alert('УМРИ')*/$(".fly", this).attr({ style: "left: "+(ss+0)+"px; top: "+(tt+32)+"px;"});
												$(".fly-2", this).attr({ style: "left: "+(ss+($(".fly").width()))+"px; top: "+(tt+32)+"px;"});	
												$(".fly", "a").attr({style:"color:white"});
												$(".fly-2", "a").attr({style:"color:white"});
												}
		else {$(".fly", this).attr({ style: "left: "+(ss+0)+"px; top: "+(tt+34)+"px; "});
				//alert ( $(".fly-2").attr("width") );
				
				$(".fly-2", this).attr({ style: "left: "+(ss+($(".fly").width()))+"px; top: "+(tt+34)+"px;"});	
			};
		$(".fly", this).show();//fadeIn("fast");
		$(".fly-2", this).show();
		
	},
	
	function()
	{
	$(".fly", this).hide();//fadeOut("fast");
	$(".fly-2", this).hide();//fadeOut("fast");
	//$(this).attr({style: "border:none; padding:2px"});
	//$("li" ,this).attr({style: "background-color:#00FF00"});
	}
	);
	
	$(".fly", this).hover(function()
	{
		$(".fly", this, "a").attr({style: "color:white;"});
	})
	}
);

fly - основное меню, fly2 - вложенное

sudo-s ★
(09.01.13 22:12:58 MSK)

Ссылка

Ответ на: комментарий от Reaper 09.01.13 22:08:33 MSK

Вот пример реализации, я верстал сайт мороженого

sudo-s ★
(09.01.13 22:14:08 MSK)

Но с этим z-index -1 если класс .clear показать, убрав display: none; меню второго уровня проваливается под его содержимое.

Поставь на ul.mainmenu>li { z-index: 1; }, а во втором уровне z-index: -1 убери. ССЗБ же.

Deleted
(09.01.13 22:19:16 MSK)

Ответ на: комментарий от sudo-s 09.01.13 22:14:08 MSK

Ясно, спасибо. Всё же без js меню должно функционировать, хоть я и придерживаюсь точки зрения, что маргиналы должны страдать. )

Reaper ★★
(09.01.13 22:19:23 MSK) автор топика

Ссылка

Ответ на: комментарий от Deleted 09.01.13 22:19:16 MSK

Поставь на ul.mainmenu>li { z-index: 1; }, а во втором уровне z-index: -1 убери. ССЗБ же.

Так полоска же: http://jsfiddle.net/fWJTL/

Reaper ★★
(09.01.13 22:22:07 MSK) автор топика

Кстати, если можно, то li>ul { top: 100% }, а не 27px.

Deleted
(09.01.13 22:22:24 MSK)

Ссылка

Ответ на: комментарий от Reaper 09.01.13 22:22:07 MSK

Я это полоску вижу и по первой ссылке в теме. Я что-то упускаю?

Deleted
(09.01.13 22:23:13 MSK)
Последнее исправление: Mystra_x64 09.01.13 22:23:23 MSK (всего исправлений: 1)

.clear {
  clear: both;
  display: block;
  position:absolute;
  z-index:-2;
  margin-top:30px;
}

sudo-s ★
(09.01.13 22:27:43 MSK)

Ответ на: комментарий от Deleted 09.01.13 22:23:13 MSK

Первый вариант: http://i.imm.io/Sh0s.png
Второй вариант: http://i.imm.io/Sh1u.png

Reaper ★★
(09.01.13 22:35:31 MSK) автор топика

Ответ на: комментарий от Reaper 09.01.13 22:35:31 MSK

У меня в обоих случаях одинаково. Возможно, это из-за разных шрифтов у нас с тобой.

У меня есть мысль впихать после заголовка («Second») div (на одном уровне со внутренним ul) и напичкать его позиционированием и белым фоном, чтобы он наехал на часть верхнего бордера, но пока что-то выходит не совсем так, как я ожидаю %)

Deleted
(09.01.13 22:39:36 MSK)

Ответ на: комментарий от Deleted 09.01.13 22:39:36 MSK

Попробуй так:

<ul class="mainmenu">
    <li>First</li>
    <li class="dir">
        Second
        <div class="wuzzah"></div>
        <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;
    z-index: 1;
}
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;
    position: absolute;            
    top: 100%;
    left: -1px;
}
li:hover ul {
    display: block;
    border: 1px solid #ddd;
    background: white;
}
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;
}
.wuzzah {
	bottom: -1px;
	left: 0;
	position: absolute;
	width: 100%;
	z-index: 2;
	background: #FFF;
	height: 1px;
}

Deleted
(09.01.13 22:42:46 MSK)

Ответ на: комментарий от Deleted 09.01.13 22:42:46 MSK

Если, конечно, у тебя есть возможность дёргать исходник.

Deleted
(09.01.13 22:43:12 MSK)

Ссылка

Ответ на: комментарий от sudo-s 09.01.13 22:27:43 MSK

Вот это значительно ближе к нужному. Position: absolute смущает. Главное меню оно же для всех страниц и оно довольно высокое (с дочерними сабменю). Такой подход потребует на каждой странице заботиться о том, чтобы контент позиционировать абсолютно.

Reaper ★★
(09.01.13 22:43:15 MSK) автор топика