如何调整下拉菜单的宽度？

Question

我正在尝试调整下拉菜单的宽度，以匹配水平菜单分隔符的宽度，在＆＃34;实习计划＆＃34;

非常感谢任何帮助，谢谢你。

网站如下：http://amchaminternship.org/testimonials.html

＆＃13;

＆＃13;

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

＆＃13;

<ul class="menu">
  <p style="margin-top: 0pt; margin-bottom: 0pt;"></p>
  <li class="menu-item"><a href="index.html">Home</a></li>
  <li class="menu-item"><a
 href="internship_program.html">Internship Program</a>
    <ul class="menu-submenu">
      <li class="menu-submenu-item"><a href="faq.html">FAQ</a></li>
      <li class="menu-submenu-item"><a
 href="testimonials.html">Testimonials</a></li>
    </ul>
  </li>
  <li class="menu-item"><a href="alumni.html">Alumni</a></li>
  <li class="menu-item"><a href="donations.html">Donations</a></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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

试一试。

.menu-submenu{
   min-width: 140px;
   max-width: 140px;
   width: auto;
   margin-left: -5px;
   text-indent: 5px;
}

我希望它能满满你的要求。

Answer 2

尝试为子菜单项提供宽度，例如

.menu-submenu {
width: 140px;
}

Answer 3

在.menu-submenu类中添加这两行

width: 140px;
padding-left: 10px;

请参阅给定的代码：

 .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;
    }

我希望它可以帮助你理解这个想法。现在您可以根据需要调整宽度

感谢。

Answer 4

你需要改变的是

.menu-submenu {
  margin: 0;
  margin-left:-2em;
  padding: 0 3em;
  width:inherit;
}

通过负边距我们移动框并通过继承宽度我们给出与父母相同的宽度

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"><a href="index.html">Home</a></li>
  <li class="menu-item"><a
 href="internship_program.html">Internship Program</a>
    <ul class="menu-submenu">
      <li class="menu-submenu-item"><a href="faq.html">FAQ</a></li>
      <li class="menu-submenu-item"><a
 href="testimonials.html">Testimonials</a></li>
    </ul>
  </li>
  <li class="menu-item"><a href="alumni.html">Alumni</a></li>
  <li class="menu-item"><a href="donations.html">Donations</a></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

添加以下代码。

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