0

我在我的网站上使用 wordpress,marlesandmore.com,并且有一个我目前正在调整的主题。该网站使用内置于 wordpress 的菜单功能,项目使用 cufon 和 css。

问题如下: - 最后两个项目有一个偏移量......?- 这仅在 chrome 和 IE 中可见。

使用的php:

<div id="menu">
            <?php $menuClass = 'nav superfish clearfix';
            $menuID = 'secondary-menu';
            $secondaryNav = '';
            if (function_exists('wp_nav_menu')) {
                $secondaryNav = wp_nav_menu( array( 'theme_location' => 'secondary-menu', 'container' => '', 'fallback_cb' => '', 'menu_class' => $menuClass, 'menu_id' => $menuID, 'echo' => false, 'walker' => new description_walker() ) ); 
            };
            if ($secondaryNav == '') { ?>
                <ul id="<?php echo $menuID; ?>" class="<?php echo $menuClass; ?>">
                    <?php if (get_option('estore_swap_navbar') == 'false') { ?>
                        <?php show_categories_menu($menuClass,false); ?>
                    <?php } else { ?>
                        <?php if (get_option('estore_home_link') == 'on') { ?>
                            <li <?php if (is_home()) echo('class="current_page_item"') ?>><a href="<?php bloginfo('url'); ?>"><?php esc_html_e('Home','eStore') ?></a></li>
                        <?php }; ?>

                        <?php show_page_menu($menuClass,false,false); ?>
                    <?php } ?>
                </ul> <!-- end ul#nav -->
            <?php }
            else echo($secondaryNav); ?>
</div> <!-- #menu -->

CSS:

ul#secondary-menu { padding: 24px 0px 0px 23px; margin-top:24px; }
ul#secondary-menu li { padding-right: 20px; }
ul#secondary-menu li.current_page_item > a > strong, ul#secondary-menu li.current-menu-item > a > strong { color:#ede7c2; }
ul#secondary-menu li a strong { color:#000000;  text-transform: lowercase; font-size:16px; font-weight:normal; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); margin-bottom:-3px; }
ul#secondary-menu li a span { color: #828282; font-family: arsmaquettepro,Helvetica, sans-serif; /*text-shadow: 1px 1px 1px #2d2d2d;*/ } 
ul#secondary-menu li a:hover { text-decoration: none; }
ul#secondary-menu li a:hover strong { color: #ede7c2; }
ul#secondary-menu li a:hover span, ul#secondary-menu li > a > span { color: #7b786a; }

前 4 项和后 2 项之间应该没有区别。

知道是什么导致了偏移吗?

Marblesandmore.com

编辑:下面的答案似乎是正确的,所以解决方案必须在子菜单的 css 中:

ul#secondary-menu ul { width: 178px; background: url(images/secondary-dropdown.png) repeat-y; padding: 3px 0px 15px; box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.5); -moz-box-shadow:3px 6px 7px 1px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.5); border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; -webkit-border-top-left-radius: 0px; border-top-right-radius: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; border: 1px solid #ffffff; border-top: none; }
ul#secondary-menu li:hover ul, ul#secondary-menu li.sfHover ul { left:0px; top:43px; }
ul#secondary-menu li:hover ul ul, ul#secondary-menu li.sfHover ul ul { left:173px; top:-3px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border: 1px solid #232323; }                          
ul#secondary-menu ul li { background: url(images/secondary-dropdown-bottom.png) repeat-x bottom left; padding: 0px 0px 2px 2px; }
ul#secondary-menu ul li a { display: block; padding: 9px 3px 9px 28px; width: 145px; /*font-weight: bold; */font-size:14px; color: #000000; font-family: arsmaquettepro, Helvetica, Arial, sans-serif; /*text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); background: url(images/secondary-dropdown-bullet.png) no-repeat 15px 17px;*/ }
ul#secondary-menu ul li a:hover { background-color: #383838; color: #ede7c2; }
4

3 回答 3

0

@Bart van Sleeuwen 请从 style.css 中删除此类

ul#secondary-menu li#menu-item-3604 strong { color:#666666; }
ul#secondary-menu li#menu-item-3606 strong { color:#666666; }

并在 html 中找到 li 类

<li id="menu-item-3604" class="menu-item menu-item-type-post_type menu-item-object-page">

改成这样

<li id="menu-item-3604" class="menu-item menu-item-type-custom menu-item-object-custom">
于 2013-03-04T13:54:32.037 回答
0

我认为您的问题可能是由以下原因引起的:

margin-bottom:-3px;

ul#secondary-menu li a strong

选择器。

我看不到你的页面,所以我不确定那个答案。

于 2013-03-04T11:41:20.103 回答
0

最后 2 个对象的高度只有 16 像素,而其他菜单对象的高度为 18 像素。

编辑:对不起,我刚刚意识到这个答案有多糟糕,但没有告诉你问题出在哪里..会尝试检查它。

我认为这与最后两个菜单项没有子菜单这一事实有关,不知何故,子菜单的那些 ul 标签似乎将 2px 添加到高度。

好的,这不是一个“好”的解决方案,说实话相当难看,但我认为它有效。您可以通过使用它们的 id 并在顶部添加边距来定位菜单中的最后 2 个项目。

#menu-item-3606, #menu-item-3604 {
margin-top: 2px;
}

请记住,如果您以任何方式更改这些菜单项,它们将具有新的标识符,因此您需要更改 css 中的 id。正如我所说,这不是一个好的解决方案,但它有效。

如果您出于某种原因在这两个菜单项中添加了子菜单,也会出现问题。

于 2013-03-04T11:30:17.807 回答