How to adjust the width of drop-down menu? - html

Question

I am trying to adjust the width of the drop down menu, to match the width of the horizontal menu divider, under "Internship Program"
Any assistance would be greatly appreciated, thank you in advance.
Website is as following: http://amchaminternship.org/testimonials.html
a {
color: white;
}
.menu {
background: url(http://amchaminternship.org/images/menu-tail.gif) repeat-x 0% 0%;
margin: 0; padding: 0;
width: 100%;
height: 43px;
position: relative;
z-index: 1;
top: 175px;
right: 0;
}
.menu-item {
background: url(http://amchaminternship.org/images/menu-divider.gif) no-repeat 0% 50%;
display: block;
line-height: 40px;
float: left;
font-size: 1.083em;
padding: 0em 2em;
}
.menu-item:nth-of-type(1) {
background: none;
}
.menu-submenu {
margin: 0;
padding: 0;
position: absolute;
left: -9999em;
top: -9999em;
background-color: #123f69;
border-radius: 5px 5px 5px 5px;
border: 1px solid white;
}
.menu-item:hover > .menu-submenu {
left: auto;
top: auto;
}
.menu-submenu-item {
display: block;
}
.menu:after {
content: "";
display: table;
clear: both;
}
<ul class="menu">
<p style="margin-top: 0pt; margin-bottom: 0pt;"></p>
<li class="menu-item">Home</li>
<li class="menu-item">Internship Program
<ul class="menu-submenu">
<li class="menu-submenu-item">FAQ</li>
<li class="menu-submenu-item">Testimonials</li>
</ul>
</li>
<li class="menu-item">Alumni</li>
<li class="menu-item">Donations</li>
<li class="menu-item"><a href="who_we_are.html">Who
We Are</a></li>
<li class="menu-item"><a href="photo_gallery.html">Photo
Gallery</a></li>
<li class="menu-item"><a href="contact_us.html">Contact
Us</a></li>
</ul>

Answer 1

just try it.
.menu-submenu{
min-width: 140px;
max-width: 140px;
width: auto;
margin-left: -5px;
text-indent: 5px;
}
I hope it will full fill your requirement.

Answer 2

Try giving width to the submenu item e.g.
.menu-submenu {
width: 140px;
}

Answer 3

Add this two lines in your .menu-submenu class
width: 140px;
padding-left: 10px;
Please Refer the given code :
.menu-submenu {
margin: 0;
padding: 0;
position: absolute;
left: -9999em;
top: -9999em;
background-color: #123f69;
border-radius: 5px 5px 5px 5px;
border: 1px solid white;
width: 140px;
padding-left: 10px;
}
I hope it may help you to get the idea. Now you can adjust width according your requirements
Thanks.

Answer 4

what you have to change is as
.menu-submenu {
margin: 0;
margin-left:-2em;
padding: 0 3em;
width:inherit;
}
by negative margin we shift the box and by inheriting width we give same width as parent
a {
color: white;
}
.menu {
background: url(http://amchaminternship.org/images/menu-tail.gif) repeat-x 0% 0%;
margin: 0; padding: 0;
width: 100%;
height: 43px;
position: relative;
z-index: 1;
top: 175px;
right: 0;
}
.menu-item {
background: url(http://amchaminternship.org/images/menu-divider.gif) no-repeat 0% 50%;
display: block;
line-height: 40px;
float: left;
font-size: 1.083em;
padding: 0em 2em;
}
.menu-item:nth-of-type(1) {
background: none;
}
.menu-submenu {
margin: 0;
margin-left:-2em;
padding: 0 3em;
width:inherit;
position: absolute;
left: -9999em;
top: -9999em;
background-color: #123f69;
border-radius: 5px 5px 5px 5px;
border: 1px solid white;
}
.menu-item:hover > .menu-submenu {
left: auto;
top: auto;
}
.menu-submenu-item {
display: block;
}
.menu:after {
content: "";
display: table;
clear: both;
}
<ul class="menu">
<p style="margin-top: 0pt; margin-bottom: 0pt;"></p>
<li class="menu-item">Home</li>
<li class="menu-item">Internship Program
<ul class="menu-submenu">
<li class="menu-submenu-item">FAQ</li>
<li class="menu-submenu-item">Testimonials</li>
</ul>
</li>
<li class="menu-item">Alumni</li>
<li class="menu-item">Donations</li>
<li class="menu-item"><a href="who_we_are.html">Who
We Are</a></li>
<li class="menu-item"><a href="photo_gallery.html">Photo
Gallery</a></li>
<li class="menu-item"><a href="contact_us.html">Contact
Us</a></li>
</ul>

Answer 5

Add below code.
.menu-submenu{
width:120px !important;
padding-left:10px;
}