垂直子頁面行的CSS下拉菜單

通常情況下，您將頂部水平顯示爲水平，然後將相互垂直顯示的子頁面（多個頁面）垂直顯示。然而，（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站點

來源

2013-04-07 PhillBooth

右鍵點擊http://www.peverel.co.uk/導航和命中檢查元素或查看頁面源代碼，你可以看到他們究竟是如何做到的。在Chrome或Firefox中效果最佳。 – apaul 2013-04-07 17:22:07

得到100％的寬度均勻塗抹，使用表和表細胞。例如，導航應該是table，第一級鏈接爲table-cell。

它的應用類似於較低級別。

http://jsfiddle.net/4T5yW/

來源

2013-04-07 18:25:08

垂直子頁面行的CSS下拉菜單

回答

相關問題