Skip to main content
j_c_l11411800
Participant
September 13, 2018
Question

Adjusting width of dropdown menus

  • September 13, 2018
  • 1 reply
  • 341 views

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>

<Div ID="Menu">

<ul>

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

<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>

<li><a href="#">FAQs</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>

This topic has been closed for replies.

1 reply

Legend
September 13, 2018

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

<ul class="sub-menu">

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

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

</ul>

.sub-menu {

width: 300px;

}

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

j_c_l11411800
Participant
September 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;

}

Nancy OShea
Community Expert
Community Expert
September 13, 2018

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

Nancy O'Shea— Product User & Community Expert