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>
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.
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;
}
Copy link to clipboard
Copied
Please post a URL to your problem page so we can see it.
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>