Question

在将网站构建为儿童主题的同时，基于Wordpress二十世主题，我遇到了一个奇怪的问题。

我试图让它尽可能地响应。当我调整窗口大小时，项目会根据需要移动和缩放。在600px的屏幕尺寸下，主题设置启动并向我显示切换菜单的按钮。我能够根据自己的喜好自定义按钮。到目前为止一切都很好。

但是，单击菜单按钮会显示一个混乱的菜单。主菜单没问题，子菜单没问题，但似乎是子菜单出错了。请参阅屏幕截图。我已经审查了我的加价和CSS，但我无法弄清楚。更改css规则时，它会影响很多其他内容。

仅当受媒体查询影响的菜单启动时才会发生。

这是截图.....任何人都有想法？

enter image description here

我真的希望有人花时间帮助我。提前谢谢。

修改

这是来自原生二十世纪主题的CSS。它在600px以上的screesize开始。

@media screen and (min-width: 600px) {
.author-avatar {
    float: left;
    margin-top: 8px;
    margin-top: 0.571428571rem;
}
.author-description {
    float: right;
    width: 80%;
}
.site {
    margin: 0 auto;
    max-width: 960px;
    max-width: 68.571428571rem;
    overflow: hidden;
}
.site-content {
    float: left;
    width: 65.104166667%;
}
body.template-front-page .site-content,
body.attachment .site-content,
body.full-width .site-content {
    width: 100%;
}
.widget-area {
    float: right;
    width: 26.041666667%;
}
.site-header h1,
.site-header h2 {
    text-align: left;
}
.site-header h1 {
    font-size: 26px;
    font-size: 1.857142857rem;
    line-height: 1.846153846;
    margin-bottom: 0;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
    border-bottom: 1px solid #ededed;
    border-top: 1px solid #ededed;
    display: inline-block !important;
    text-align: left;
    width: 100%;
}
.main-navigation ul {
    margin: 0;
    text-indent: 0;
}
.main-navigation li a,
.main-navigation li {
    display: inline-block;
    text-decoration: none;
}
.main-navigation li a {
    border-bottom: 0;
    color: #6a6a6a;
    line-height: 3.692307692;
    text-transform: uppercase;
    white-space: nowrap;
}
.main-navigation li a:hover,
.main-navigation li a:focus {
    color: #000;
}
.main-navigation li {
    margin: 0 40px 0 0;
    margin: 0 2.857142857rem 0 0;
    position: relative;
}
.main-navigation li ul {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    z-index: 1;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}
.main-navigation li ul ul {
    top: 0;
    left: 100%;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li:focus > ul,
.main-navigation .focus > ul {
    border-left: 0;
    clip: inherit;
    overflow: inherit;
    height: inherit;
    width: inherit;
}
.main-navigation li ul li a {
    background: #efefef;
    border-bottom: 1px solid #ededed;
    display: block;
    font-size: 11px;
    font-size: 0.785714286rem;
    line-height: 2.181818182;
    padding: 8px 10px;
    padding: 0.571428571rem 0.714285714rem;
    width: 180px;
    width: 12.85714286rem;
    white-space: normal;
}
.main-navigation li ul li a:hover,
.main-navigation li ul li a:focus {
    background: #e3e3e3;
    color: #444;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
    color: #636363;
    font-weight: bold;
}
.menu-toggle {
    display: none;
}
.entry-header .entry-title {
    font-size: 22px;
    font-size: 1.571428571rem;
}
#respond form input[type="text"] {
    width: 46.333333333%;
}
#respond form textarea.blog-textarea {
    width: 79.666666667%;
}
.template-front-page .site-content,
.template-front-page article {
    overflow: hidden;
}
.template-front-page.has-post-thumbnail article {
    float: left;
    width: 47.916666667%;
}
.entry-page-image {
    float: right;
    margin-bottom: 0;
    width: 47.916666667%;
}
.template-front-page .widget-area .widget,
.template-front-page.two-sidebars .widget-area .front-widgets {
    float: left;
    width: 51.875%;
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
}
.template-front-page .widget-area .widget:nth-child(odd) {
    clear: right;
}
.template-front-page .widget-area .widget:nth-child(even),
.template-front-page.two-sidebars .widget-area .front-widgets + .front-widgets {
    float: right;
    width: 39.0625%;
    margin: 0 0 24px;
    margin: 0 0 1.714285714rem;
}
.template-front-page.two-sidebars .widget,
.template-front-page.two-sidebars .widget:nth-child(even) {
    float: none;
    width: auto;
}
.commentlist .children {
    margin-left: 48px;
    margin-left: 3.428571429rem;
}
}

/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
body {
    background-color: #e6e6e6;
}
body .site {
    padding: 0 40px;
    padding: 0 2.857142857rem;
    margin-top: 48px;
    margin-top: 3.428571429rem;
    margin-bottom: 48px;
    margin-bottom: 3.428571429rem;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body.custom-background-empty {
    background-color: #fff;
}
body.custom-background-empty .site,
body.custom-background-white .site {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    box-shadow: none;
}
}

这是我二十岁儿童主题的css，因为你可以看到它从599像素（及以下）的屏幕宽度开始。

@media screen and (max-width: 599px) {

    .main-navigation {
        text-align: left;
    }

    .nav-menu.toggled-on {
            width: 100%;
            padding-right: 40px;

}
.main-navigation li a,
.main-navigation li {
            margin-top: 0px;
    display: block;
            border-top-width: 1px;
            border-top-style: solid;
            border-top-color: #c8bfc6;
            color: #fff;
    line-height: 3.692307692;
    text-transform: uppercase;
    white-space: nowrap;
            text-decoration: none;
}

    .main-navigation li a:hover,
.main-navigation li a:focus {
    color: #c8bfc6;
}

    li#woocommerce_product_search-2{
        border-top: 0px;
    }

    .main-navigation li{
            width: 100%;
}

.main-navigation li ul {
            width: 100%;
    margin-left: 20px;
    padding: 0;
}

    #menu-hoofdmenu li ul li a,
    #menu-topmenu li ul li a {
            color: #fff;
            border: none;
    }

    #menu-hoofdmenu li ul li a:hover,
    #menu-topmenu li ul li a:hover {
            color: #c8bfc6;
            border: none;
    }

    .main-navigation .menu-social li{
        border-top-width: 0px;
        border-top-style: none;
        margin-right: 12px;
    }

    .main-navigation .menu-social li a{
        border-top-width: 0px;
        border-top-style: none;
    }

    #logo-alignment{
        display: inline-block;
        position: absolute;
        margin-top: 24px;
        margin-left: 10px;
    }

    #logo-alignment .site-logo{
        max-width: 97%;
    }

    #topbar-navigation{
        clear: both;
    }

    #menu-topmenu{
        padding-left: 0px;
        padding-right: 0px;
        margin-right: 0px;
        width: 90%;
        overflow: hidden;
    }

    #menu-topmenu li ul li{
        margin-top: 0px;
        margin-bottom: 0px;
    }
}

在wordpress二十世纪儿童主题中搞砸了子子菜单

0 个答案: