与wordpress的水平子菜单

时间:2012-06-29 19:39:52

标签: wordpress

我正在使用wordpress 3.4.1和前进的主题。我不确定进展是否会搞砸,但我希望有人能指出我正确的方向。

基本请求 - 悬停或单击主菜单项时水平显示的子菜单。

这是我的html(块ID和许多代码都是通过前进插入的):

<nav id="block-10" class="custom_YAP_menu block block-type-navigation block-fluid-height block-mirrored block-mirroring-10 block-original-97">
<div class="block-content">
<div class="nav-horizontal nav-align-center">
<ul id="menu-yap-menu" class="menu">

<li id="menu-item-750" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-750">
<a href="#" title="Solutions">Solutions</a>
<ul class="sub-menu">
<li id="menu-item-764" class="nav2 menu-item menu-item-type-post_type menu-item-object-page menu-item-764">
<a href="http://youradminpro.com/business-solutions-2/business-solutions/">Business Solutions</a>
</li>
<li id="menu-item-780" class="nav2 menu-item menu-item-type-post_type menu-item-object-page menu-item-780">
<a href="http://youradminpro.com/pricing/">Pricing</a>
</li>
</ul>

这是css:

body.custom #block-10 {position: relative; width: 100%;}

.block {-moz-box-sizing: float: left;}

menu, nav {display: block;}

.block-type-navigation li ul.sub-menu {left: -9999px; position: absolute; width: auto;
    z-index: 150;}

.block-type-navigation ul { display: inline-block; }

ol, ul {    list-style: none outside none;}

body.custom .block-type-navigation ul.sub-menu li a {margin: 5px 0 -5px -48px !important;     padding: 3px 0 30px; }

body.custom .block-type-navigation ul li a {margin: 0 -10px 0 -20px; }

.block-type-navigation li ul.sub-menu li a {-moz-box-sizing: border-box; max-width: 500px;
    min-width: 175px; width: auto; }

.block-type-navigation ul li a {display: block; white-space: nowrap; }

继承自:ul.sub-menu ol, ul { list-style: none outside none; }

我希望我复制了你需要的一切。 该网站是:youradminpro.com

0 个答案:

没有答案