Highlighted

Adjusting width of dropdown menus

New Here ,
Sep 13, 2018

Copy link to clipboard

Copied

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>

Views

183

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Adjusting width of dropdown menus

New Here ,
Sep 13, 2018

Copy link to clipboard

Copied

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>

Views

184

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 13, 2018 0
LEGEND ,
Sep 13, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 13, 2018 0
New Here ,
Sep 13, 2018

Copy link to clipboard

Copied

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;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 13, 2018 0
Adobe Community Professional ,
Sep 13, 2018

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 13, 2018 1
osgood_ LATEST
LEGEND ,
Sep 13, 2018

Copy link to clipboard

Copied

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

<html>

<head>

<meta charset="UTF-8">

<title>Menu</title>

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

<ul class="menu">

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

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

<ul class="sub-menu200">

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

<ul class="sub-menu100">

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

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 13, 2018 1