Sub-menu item width

[Ixinho]

Hello,

i need to have a couple of dropdown menu sub items with bigger width.

When i target them like this and add "width: 400px" it simply doesn’t work as it should, it extends only when i hover it. Any hint?

.dropdown-menu-wrap ul.sub-menu li.menu-item-722 {
width: 400px;
}

[Ixinho]

See attached files for what i mean.
When i add width: 400px, it applies correctly to all items i want, but only when i hover them. When i don’t hover them, text width is increased but not the background.

[Veena]

Try the below custom CSS –

.dropdown-menu-wrap ul.sub-menu li > ul.sub-menu {
    left: 181px;
    width: 400px;
    top: 0;
}
You need to adjust the left value..

[Ixinho]

It does for all submenus, i need it only for specific 9 ID’s .

If i use .dropdown-menu-wrap ul.sub-menu li.menu-item-722 { and then your css, it won’t work, text goes out of field : /

[Veena]

Can you share a link to your site ?

[Ixinho]

This reply has been marked as private.

[Veena]

Try this example CSS and apply the changes to the required menu items.

li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-778 {
    width: 350px;
    background-color: blue;
}
li:hover.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-778 {
    background-color: red;
}

[Ixinho]

Hm, that doesn’t bring the desired results, i’ll stick to your first advice : )

[Author]

Posts