드롭 다운 메뉴의 너비를 넓히십시오

Question

드롭 다운 메뉴의 너비를 늘리는 방법 ... 서비스 링크 위로 마우스를 가져 가면 드롭 다운 메뉴 팝업이 나타납니다 .... 이 팝업에 포함되었습니다. 텍스트 필드 그래서 드롭 다운 메뉴의 너비를 늘릴 필요가 .... 모든 양식 필드의 폭을 늘리려고했는데 모든 양식 필드가 인라인되지만 작동하지 않습니다 ....

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> 

Answer 1

시도는변경자동으로 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; 
} 

Answer 2

입력 필드에 대한 몇 가지 스타일을 추가 당신이 필요하지 않는 부 메뉴.

당신은 모든 폭과

을 필요하지 않습니다 '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