Adjusting width of dropdown menus

Report · Sep 13, 2018

How do you make a specific dropdown item wider? I would like to give the following its own width <li><a href="#">Benefits</a></li>

<ul>

<li>

<a href="#">Products</a> See what we offer

<ul>

<li class="blue"> <a href="#">Portable Call Buttons</a></li>

<li><a href="#">Wall-mounted Transmitters </a></li>

<li><a href="#">Pagers </a></li>

<li><a href="#">Repeaters </a></li>

</ul>

</li>

<li><a href="#">Benefits </a>

<ul>

<li><a href="#">Benefits</a></li>

</ul>

</li>

<li><a href="#">Our Customers</a>What & why they bought from us</li>

<li><a href="#">About US</a></li>

<li><a href="#">Contact Us</a> </li>

</ul>

</Div>

Report · Sep 13, 2018

Add a class to your <ul> like below and use css to set the width.

<li><a href="#">Benefits</a></li>

</ul>

.sub-menu {

width: 300px;

}

See if that works. It should do if your sub-menus are positioned absolutely for desktop devices.

Report · Sep 13, 2018

It does not change anything. What I am trying to accomplish is that when you hover over benefits in the main menu, the dropdowns Benefits and FAQs are 75px, now they are 200px as set by the following CSS. I want the dropdowns under Products to remain at 200px.

/Changes height and width of sub menu/

#Menu ul li ul li a

/Formats dropdown when hover changes the width and background/

#Menu ul li ul li a:hover{

background-color: white;

width: 200px;

}

Report · Sep 13, 2018

Please post a URL to your problem page so we can see it.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Sep 13, 2018

See example below: I dont use css dropdown navigation but I dont think the hover will work on mobile devices

<html>

<head>

<style>

* {

box-sizing: border-box;

}

.menu {

display: flex;

justify-content: center;

margin: 0;

padding: 0;

width: 100%;

background-color: #000;

padding: 0 40px;

}

.menu ul {

position: absolute;

list-style: none;

margin: 0;

padding: 0;

display: none;

}

.menu li {

list-style: none;

margin: 0;

padding: 0;

}

.menu li:hover .sub-menu200 {

display: block;

width: 200px;

}

.menu li:hover .sub-menu100 {

display: block;

width: 100px;

}

.menu a {

background-color: #000;

color: #fff;

display: block;

padding: 10px 20px;

text-decoration: none;

}

</style>

</head>

<body>

<li><a href="#">Products</a>

<li><a href="#">Portable Call Buttons</a></li>

<li><a href="#">Wall-mounted Transmitters </a></li>

<li><a href="#">Pagers </a></li>

<li><a href="#">Repeaters </a></li>

</ul>

</li>

<li><a href="#">Benefits </a>

<li><a href="#">Benefits</a></li>

</ul>

</li>

<li><a href="#">Our Customers</a></li>

<li><a href="#">About US</a></li>

<li><a href="#">Contact Us</a> </li>

</ul>

</body>

</html>