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