扩展下拉菜单的宽度
expanding the width of drop down menu
如何增加下拉菜单的宽度…当您将鼠标悬停在服务链接上时,会弹出一个下拉菜单....在这个弹出框中,我包含了文本字段,所以我需要增加下拉菜单....的宽度我试着增加子类的宽度所有的表单字段成为内联但不工作....提供下面的代码....
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>
尝试将ul
和li
的宽度更改为auto,并添加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;
}
你已经有了所有你不需要的子菜单的硬编码宽度。
如果您从'ul '中删除所有宽度和float:left;
项。不需要的子li'
你可以通过添加一个类来定位特定的菜单项,你可以通过CSS来调整这个菜单项。
#nav li:hover ul.sub.frm { width: 155px; }
.frm a .label { display: inline-block; width: 60px; }
.frm a input[type="text"] { width: 80px; }
更新小提琴
相关文章:
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- angular的下拉菜单
- 创建带有和不带有JavaScript的Bootstrap下拉菜单
- 创建下拉菜单
- 下拉菜单在菜单按钮的边缘闪闪发光
- I'我设计了一个下拉菜单,onclick会出现,而on blur会消失
- 硒IDE下拉菜单
- 我的下拉菜单中的链接不起作用
- Bootstrap Dropdown selection是在*all*下拉菜单上设置选择
- 如何将JSON转换为HTML下拉菜单
- 悬停下拉菜单即使在鼠标移出后也保持活动状态
- 基于下拉菜单创建开关
- 格式化jQuery Autocomplete以像下拉菜单一样扩展浏览器/窗口边缘
- jQuery下拉菜单扩展问题
- 在“选择下拉菜单”中将“项目”扩展到最大文本长度
- 下拉菜单:将悬停区域扩展到图像链接之外
- 扩展下拉菜单的宽度
- 得到下拉菜单在谷歌扩展弹出
- 下拉菜单css扩展宽度基于内容
- 菜单下拉与扩展列表