Question

您好我需要一些CSS下拉菜单的帮助。

通常，您将水平显示顶级，然后将子页面（ul li ul li）垂直显示在彼此之下。但是（ul li ul）被锁定在其父级下面，我需要子页面级别跨越父菜单的宽度，就像在http://www.peverel.co.uk/中一样，但只是使用CSS。

这是一些基本代码......

nav#navigation, nav#navigation ul{ padding:0; margin:0}
/*set up a tags*/ 
nav#navigation a{display:block;}
/*position level 1 links horizontally*/ 
nav#navigation li{display:block; float:left;}
/*undo previous style for level 2 links*/
nav#navigation li ul li{float:none;}
/*position level 2 links vertically and hide*/ 
nav#navigation li ul{display:none; position:absolute; z-index:1}
/*unhide level 2 links on li:hover from level 1*/ 
nav#navigation li:hover ul{
display:inline-block;
clear:both;
float:left;
position:absolute; 
z-index:1
}

nav#navigation ul li ul li{
display:inline-block;
clear:both;
float:left;
position:absolute; 
z-index:1;

}

/*DROPDOWN STYLING:*/
nav#navigation{height:25px}
nav#navigation a{color:#09F; padding:5px 10px 5px 10px;}
nav#navigation a:hover{color:#0CF;}
nav#navigation li{background-color:#FFF; border:solid 1px #CCC;  margin-left:-1px}
nav#navigation li:hover{background-color:#F0F0F0}




 <nav id="navigation" class="clearfix" role="navigation">
<ul>
<li class="page_item">
<a href=#">
    <ul class='children'>
    <li class="page_item"><a href="#">Cookie Policy</a></li>
    <li class="page_item"><a href="#">example sub page</a></li>
    </ul>
</li>
<li class="page_item"><a href="#">Blocks of Flats Insurance</a>
    <ul class='children'>
    <li class="page_item"><a href="#">Becoming An Appointed Representative</a></li>
    <li class="page_item"><a href="#">CHU Policy Launched</a></li>
    <li class="page_item"><a href="#">FAQs</a></li>
    <li class="page_item"><a href="#">Get a Quote</a></li>
    </ul>
</li>
<li class="page_item"><a href="#">Products</a></li>
</ul>
</nav>

这也将进入WordPress网站

Answer 1

要均匀地获得100％的宽度，请使用表格和表格单元格。例如，导航应为table，第一级链接为table-cell。

适用于较低级别。

http://jsfiddle.net/4T5yW/

带有垂直子页面行的CSS下拉菜单

1 个答案: