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

时间:2013-04-07 17:12:06

标签: css menu

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

1 个答案:

答案 0 :(得分:0)

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

适用于较低级别。

http://jsfiddle.net/4T5yW/