0

您好，我需要一些有关 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 网站

4

1 回答 1

0

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

这同样适用于较低级别。

http://jsfiddle.net/4T5yW/

于 2013-04-07T18:25:08.027 回答