Resizing the width of submenu in dropdown menu

Question

In my wp based website , the submenu inherits the width of main menu . But I need to make it little bit bigger , so that the text in the sub menu fits within it . How can I do this ?

Here is my 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;
}

My working site : aniyanetworks.net/Blog

score 0 · Accepted Answer · answered Mar 23 '13 at 17:15

0

First of all remove/change the inline styles of the ul.sub-menu. You can see that in there the width is set to 100px. You can change that value or remove it and add this to the css code:

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 */
}

answered Mar 23 '13 at 17:15

bukka

4,973
3
19
21

Thanks a lot , it really works . Just one question what does actually "!important" do ? – Shuvro Shuvro Mar 23 '13 at 17:48
[Here](http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean) is a more detailed answer. You don't really need it if you remove the in-line styles. Also should add `width: 100%;` to `ul#mainmenu-menu ul.sub-menu li` elements to fix the hover effect. – bukka Mar 23 '13 at 17:58

Resizing the width of submenu in dropdown menu

1 Answers1