扩大下拉菜单的宽度

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

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>

来源

2013-04-09 user2136828

表演类子！ – zod 2013-04-09 22:34:34

#nav li：hover ul.sub \t \t \t \t {left：1px;顶部：38px;背景：＃bbd37e;填充：3px的; border：1px solid＃5c731e;空白：NOWRAP;宽度：90像素;高度：自动;的z-index：300;} – user2136828 2013-04-09 22:35:57

试图改变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; 
}

来源

2013-04-09 22:59:28

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

如果您删除所有的宽度和从不需要

“ul.sub礼”的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

来源

2013-04-09 23:02:24 Scott

扩大下拉菜单的宽度

回答

相关问题