2013-04-09 90 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; 
}