Question

我正在实现主菜单悬停弹出.... 当你将鼠标悬停在链接上时会出现弹出窗口... 在其中一个弹出窗口我正在放文本框.... 但弹出窗口中没有文本框.... 在下面提供我的代码......

enter image description here

<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

＆GT;

Answer 1

尝试将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;
}

泡泡弹出文本框

1 个答案: