0

我目前正在研究 underscores.me（由 Automattic wordpress 团队提供）启动主题以创建一个新的 wordpress 主题（我的第一个主题）。

我正在为我的主题设置样式，但停留在我想为导航菜单设置背景颜色的地方

/* =Menu
----------------------------------------------- */

.navigation-main {
    clear: both;
    display: block;
}
.navigation-main ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}
.navigation-main li {
    float: left;
    margin: 0.5em 0;
    position: relative;
    background-color: #ffffff;
}
.navigation-main a {
    display: block;
    color: #5fbfe7;
    margin-right: 20px;
    text-decoration: none;
}
.navigation-main ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    display: none;
    float: left;
    position: absolute;
        top: 1.5em;
        left: 0;
    z-index: 99999;
}
.navigation-main ul ul ul {
    left: 100%;
    top: 0;
}
.navigation-main ul ul a {
    width: 200px;
}
.navigation-main ul ul li {
}
.navigation-main li:hover > a {
}
.navigation-main ul ul :hover > a {
}
.navigation-main ul ul a:hover {
}
.navigation-main ul li:hover > ul {
    display: block;
}
.navigation-main li.current_page_item a,
.navigation-main li.current-menu-item a {
}

/* Small menu */
.menu-toggle {
    display: none;
    cursor: pointer;
}

.main-small-navigation ul {
    display: none;
}

@media screen and (max-width: 600px) {
    .menu-toggle,
    .main-small-navigation ul.nav-menu.toggled-on {
        display: block;
    }

    .navigation-main ul {
        display: none;
    }
}

这是我正在处理的主题的 header.php 文件：

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
    <?php do_action( 'before' ); ?>
    <header id="masthead" class="site-header" role="banner">
        <hgroup>
            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
        </hgroup>

        <nav id="site-navigation" class="navigation-main" role="navigation">
            <h1 class="menu-toggle"><?php _e( 'Menu', 'lemon' ); ?></h1>
            <div class="screen-reader-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'lemon' ); ?>"><?php _e( 'Skip to content', 'lemon' ); ?></a></div>

            <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
        </nav><!-- #site-navigation -->
    </header><!-- #masthead -->

    <div id="main" class="site-main">

当我设置列表或标签的背景颜色时没有问题，但是当我为 ul 标签或 .navigation-main 设置背景颜色时没有任何反应。

4

1 回答 1

1

尝试添加 float: left; 到.navigation-main。

所以改变这个：

.navigation-main {
    clear: both;
    display: block;
}
.navigation-main ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}
.navigation-main li {
    float: left;
    margin: 0.5em 0;
    position: relative;
    background-color: #ffffff;
}

对此：

.navigation-main {
    clear: both;
    display: block;
    background-color: #000000;
        float: left;
}
.navigation-main ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}
.navigation-main li {
    float: left;
    margin: 0.5em 0;
    position: relative;
    background-color: #ffffff;
}

这对我有用。这是 jsfiddle 的 URL 以查看它的工作原理：http: //jsfiddle.net/s9Lup/

于 2013-05-15T13:17:54.107 回答