2
我想創建一個CSS水平下拉菜單,將顯示水平subnav中的孩子。我至今是:(這是不完整的,但我堅持)創建一個水平子導航的基於CSS的水平下拉菜單
<ul class="menu">
<li class="top"><a href="/">Home</a></li>
<li class="top">
<a href="/company/">About</a>
<ul class="sub">
<?php wp_list_pages('title_li=&child_of=2') ?>
</ul>
</li>
<li class="top">
<a href="/">Services</a>
<ul class="sub">
<?php wp_list_pages('title_li=&child_of=5') ?>
</ul>
</li>
<li class="top">
<a href="/">Projects</a>
<ul class="sub">
<?php wp_list_pages('title_li=&child_of=7') ?>
</ul>
</li>
<li class="top">
<a href="/">Team</a>
<ul class="sub">
<?php wp_list_pages('title_li=&child_of=10') ?>
</ul>
</li>
</ul>
和CSS:
.menu {padding:50px 0 0; list-style:none; line-height:1; width:400px;}
.menu li.top {display:block; float:left; position:relative; padding:0 17px 0 0;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb;
text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px;
cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0
12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px;
height:40px; background:url(images/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(images/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(images/button4a.gif) no-repeat right
top;}
.menu li:hover > a.top_link {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(images/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(images/button4a.gif) no-repeat right
top;}
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0;
left:0;}
.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}
.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-
9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu :hover ul.sub {left:2px; top:20px; right:2px; background: #fff; padding:3px 0;
white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left;
width:250px;}
.menu :hover ul.sub li a {float:right;font-weight:normal;display:block; font-size:11px;
color:#000; text-decoration:none;}
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-
space:nowrap; width:93px; z-index:200; height:auto;}
我真的需要一些幫助,我不能讓這個在所有和工作需要儘快運行!
渲染HTML:
<ul class="menu">
<li class="top"><a href="/">Home</a></li>
<li class="top">
<a href="/company/">About</a>
<ul class="sub">
<li class="page_item page-item-33"><a href="http://localhost/cva/?page_id=33" title="Why CVA?">Why CVA?</a></li>
</ul>
</li>
<li class="top">
<a href="/">Services</a>
<ul class="sub">
</ul>
</li>
<li class="top">
<a href="/">Projects</a>
<ul class="sub">
</ul>
</li>
<li class="top">
<a href="/">Team</a>
<ul class="sub">
<li class="page_item page-item-19"><a href="http://localhost/cva/?page_id=19" title="Contact Us">Contact Us</a></li>
</ul>
</li>
</ul>
你能描述一下什麼不起作用嗎? – kafuchau 2010-11-03 23:42:57
下拉不居中列表下...我想要的是下拉跨度的頂部導航的長度,然後有 – EvanGWatkins 2010-11-03 23:44:33
列出的頁面給我們一些呈現的HTML來測試.. – 2010-11-03 23:46:44