Question

在我的基于wp的网站中，子菜单继承了主菜单的宽度。但我需要让它更大一点，以便子菜单中的文本适合它。我怎么能这样做？

这是我的CSS

#edited_menubar {

    width: 620px;
    height:22px;
    /*
    margin-left: 528px;
    padding-left: 10px;
    margin-right: 10px;

    margin-bottom:5px ;
    */

    padding-left: 360px;
    padding-top:35px;

}

#mainmenu {
    margin: 30px 20px 0px 0px;
    word-wrap: break-word;

}

ul#mainmenu-menu {
    position: relative;

    background: rgb(247,247,247);
    background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(244,244,244,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,247,1)), color-stop(100%,rgba(244,244,244,1)));
    background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
    background: -o-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
    background: -ms-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
    background: linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
    border: 1px solid #E2E2E2;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f4f4f4',GradientType=0 );
}

ul#mainmenu-menu li {
    width: 100px;
}

ul#mainmenu-menu li.menu-item {
    position: relative;

    border-right: 1px solid #E2E2E2;
    display: block;
    float: left;
    font-size: 11px;
    font-weight: bold;
}

ul#mainmenu-menu > li:nth-child(6) {
    border-right: none;
}

ul#mainmenu-menu li.menu-item a {
    color: #5e5e5e;
    display: block;
    padding: 5px 8px;
    text-decoration: none;
}

ul#mainmenu-menu li.menu-item a:hover {
    background: #F9F9F9;
}

/* =Main Menu  : Scaled Menu 
-------------------------------------------------------------- */

#mainmenu.scaled .container > div {
    width: 100%;
    height: 32px;

    display: table;
}

#mainmenu.scaled ul#mainmenu-menu {
    height: 32px;

    display: table-row;
}

#mainmenu.scaled li.menu-item {
    width: auto;
    height: 52px;

    border: none;
    display: table-cell;
    float: none;
}

#mainmenu.scaled li.menu-item a {
    border: 1px solid #E2E2E2;
    border-width: 1px 1px 1px 0;
    text-align: center;
}

#mainmenu.scaled li.menu-item:first-child a {
    border-left-width: 1px;
}
#mainmenu.scaled li.menu-item:first-child a {
    border-right-width: none;
}

#mainmenu.scaled ul#mainmenu-menu ul.sub-menu li {
    border-width: 0;
    display: block;
}

#mainmenu.scaled ul#mainmenu-menu ul.sub-menu a {
    border: none;
}
#mainmenu ul li > ul li {

    width:300px;
}
/* =Main Menu  : Main Dropdown 
-------------------------------------------------------------- */

ul#mainmenu-menu li.menu-item a {
    height: 28px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #5e5e5e;
    display: block;
    padding: 10px 20px; /*spacing between list item */
    text-decoration: none;
}

ul#mainmenu-menu ul.sub-menu {
    position: absolute;
    top: 27px;
    left: 0px;
    width: 100%;

    background: white;
    border: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    display: none;
    z-index: 99;
}


ul#mainmenu-menu li:hover ul.sub-menu {
    display: block;
}

ul#mainmenu-menu ul.sub-menu li {
    border: none;
    display: block;
    float: none;
    font-weight: normal;
    white-space: nowrap;

}

ul#mainmenu-menu ul .sub-menu.li a {
    height: auto;

    line-height: 15px;
    padding: 15px 15px 15px 15px;
}

我的工作网站：aniyanetworks.net/Blog

Answer 1

首先删除/更改ul.sub-menu的内联样式。你可以看到那里的宽度设置为100px。您可以更改该值或将其删除，并将其添加到css代码中：

ul#mainmenu-menu ul.sub-menu { /*This is on line 474 in your style.css */
width: 160px !important; 
/* Or whichever value fits, I also added the 
"!important rule if you don't know how to remove 
the inline styles */
}

在下拉菜单中调整子菜单的宽度

1 个答案: