擴大下拉菜單的寬度

如何增加下拉菜單的寬度... 當您將鼠標懸停在服務鏈接上時，會彈出一個下拉菜單.... 在這個彈出窗口中我包含了文本字段，所以我需要增加下拉菜單的寬度.... 我試圖增加子類的寬度所有表單域成爲內聯，但不工作.... 下面提供我的代碼....擴大下拉菜單的寬度

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

擴大下拉菜單的寬度

回答

相關問題