2013-04-09 88 views
-4

我正在實現主菜單懸停彈出.... 當你懸停在鏈接彈出出現... 在彈出我的一個文本框... ... 。 但文本框不自帶的彈出.... 提供下面我的代碼...泡泡與文本框彈出

enter image description here

http://jsfiddle.net/JucNG/

<li style="background-color: #669900;" class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Add Contacts</span></a> 
            <ul class="sub"> 
             <li><a href="#nogo23">Name <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> 
           </li 

>

+0

人不想要經歷近2000行代碼。請修正您的[jsfiddle](http://jsfiddle.net),以便它具有最少的代碼並說明問題。 – Dom 2013-04-09 22:48:05

回答

1

嘗試改變ulli寬度自動添加一個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; 
}