扩大下拉菜单的宽度答案

【问题标题】：expanding the width of drop down menu扩大下拉菜单的宽度
【发布时间】：2013-04-10 07:08:43
【问题描述】：

如何增加下拉菜单的宽度... 当您将鼠标悬停在服务链接上时，会出现一个下拉菜单弹出...... 在这个弹出窗口中，我已经包含了文本字段，所以我需要增加下拉菜单的宽度...... 我尝试增加子类的宽度，所有表单字段都变为内联但不起作用.... 在下面提供我的代码....

http://jsfiddle.net/3VBQ6/1/embedded/result/

<ul class="sub">
    <li><a href="#nogo23"><span class='label'>Name</span>
        <span><input type="text" name="lastname" /></span></a>

    </li>
    <li><a href="#nogo24">Company <span><input type="text" name="lastname" /></span></a>

    </li>
    <li><a href="#nogo25">Email <span><input type="text" name="lastname" /></span></a>

    </li>
    <li><a href="#nogo25"><input type="submit" value="Submit" /></a>

    </li>
</ul>

【问题讨论】：

#nav li:hover ul.sub {left:1px;顶部：38px；背景：#bbd37e；填充：3px；边框：1px 实心 #5c731e;空白：nowrap；宽度：90 像素；高度：自动； z-index:300;}

标签： javascript jquery html css

【解决方案1】：

尝试将ul 和li 宽度更改为自动并添加min-width:90px

像这样：

#nav li:hover ul.sub {
   left:1px;
   top:38px;
   background: #bbd37e;
   padding:3px;
   border:1px solid #5c731e;
   white-space:nowrap;
   width: auto;
   min-width:90px;
   height:auto;
   z-index:300;
}
#nav li:hover ul.sub li {
   display:block;
   height:20px;
   position:relative;
   float:left;
   width: auto;
   min-width:90px;
   font-weight:normal;
}
#nav li:hover ul.sub li a {
   display:block;
   font-size:11px;
   height:18px;
   width: auto;
   min-width:90px;
   line-height:18px;
   text-indent:5px;
   color:#000;
   text-decoration:none;
   border:1px solid #bbd37e;
}

我还为输入字段添加了一些样式

#nav li:hover ul.sub li a input {
   font-size:11px;
   height:18px;
   width: auto;
   min-width:90px;
   line-height:18px;
   color:#000;
   text-decoration:none;
}

【讨论】：

【解决方案2】：

所有不需要的子菜单都有硬编码的宽度。

如果您从不需要的“ul.sub li”中删除所有宽度和 float:left; 项目

您可以通过向其添加类来定位该特定菜单项，您可以通过 CSS 仅调整该项目。

#nav li:hover ul.sub.frm { width: 155px; }
.frm a .label { display: inline-block; width: 60px; }
.frm a input[type="text"] { width: 80px; }

UPDATED FIDDLE

【讨论】：