how to increase the width of drop down menu... when you hover over the services link a drop down menu pop up appears.... in this pop up i have included the text fields so i need to increase the width of the drop down menu.... i tried increasing the width of sub class all form fields becomes inline but not working.... providing my code below....
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>
try to change the ul
and li
width to auto and add a min-width:90px
like this:
#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;
}
Also I added some styles for the input fields
#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;
}
You've got hard coded widths for all the submenus which you do not need.
If you remove all the widths and the float:left;
item from 'ul.sub li' which is not needed
You can target that specific menu item by adding a class to it you can adjust just that item via CSS.
#nav li:hover ul.sub.frm { width: 155px; }
.frm a .label { display: inline-block; width: 60px; }
.frm a input[type="text"] { width: 80px; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.