样式设置wp_NAV_MENU-水平,子菜单下拉菜单

时间:2013-09-07 作者:user1255049

live site.

我正在使用名为“博客导航”的wp\\u nav\\u菜单。它显示正常,但我希望它水平排列,并带有子菜单下拉菜单(所有小写项目都应位于下拉部分)。我在这里搜索了很多帖子,Alistaphat。com等,但似乎没有什么工作是完全正确的。我可能错过了什么?

我用的是-

功能。php

<?php
    add_theme_support( \'menus\' );
?>
标题博客。php

<body>
<div id="container">
    <div id="blog-header">
        <div class="logo">
            <h1><a href="<?php echo get_option(\'home\'); ?>"/><img src="<?php bloginfo(\'template_directory\'); ?>/img/blog-logo.png" alt="#" /></a></h1>
        </div><!-- end logo -->

        <div class="blog-nav"><?php wp_nav_menu(array(\'menu\' => \'blog-nav\', \'container\' => false, \'items_wrap\' => \'<ul id="%1$s" class="%2$s">%3$s</ul>\')); ?></div><!-- end blog-nav -->

    </div><!-- end blog-header -->
样式。css

#access ul ul { display: none }
#access ul li:hover > ul { display: block }
有什么办法把这一切结合起来吗?

2 个回复
最合适的回答,由SO网友:Mayeenul Islam 整理而成

由于您不会发布任何带有菜单示例的实时网站,因此如果我没有误解您的意思,那么可以使用如下不错的下拉菜单:

+--------+--------+--------+
| Menu 1 | Menu 2 | Menu 3 |
+--------+--------+--------+
         | Sub Menu 1 |
         +------------+
         | Sub Menu 2 |
         +------------+
可以通过使用THIS 菜单CSS。虽然它是原始HTML、CSS,但在WordPress中也非常有用。:)

SO网友:Loreto Gabawa Jr.

您错过了元素的正确结构:

#access ul li ul { display: none }
#access ul li:hover > ul { display: block }
您可能希望将子菜单放置在右侧,这样当访问者试图在其他菜单上悬停时,不会感到烦人,例如:

#access ul li ul { display: none; position: relative; }
#access ul li:hover > ul { display: block; position: absolute; top: 0; right: 0; }

结束

相关推荐

我真的需要在主题文件中链接我的主题的style.css吗

因此,我正在开发一个wordpress主题,使用一系列较少的CSS文件。这些使用codekit编译成一个组合的小型样式表,我用它来设置主题的样式。我理解wordpress主题必须有一种风格。css,它在注释中包含有关主题的信息,但需要链接此样式。标题中的css。php?当然,我可以只把主题信息放在里面,而不放在其他任何东西里,并且在主题文件夹中保持不变。我实际使用的样式表可以称为样式。css或main。css之类的。有人能证实这一点或给出为什么这可能是个坏主意的原因吗?