Is there a way to prevent an input box from altering the size of an HTML <li> element when it is revealed beneath item 2? Additionally, how can one ensure that the input box opens directly below item 2 without affecting the layout? Lastly, what adjustments are needed in the jQuery code to close the input box on click after it has been opened?
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('#menu').click(
function() { $('fieldset', this).slideDown(); },
function() { $('fieldset', this).slideUp(); });
});
</script>
<style>
ul, li {
float: right;
display: inline;
margin: 0px
padding: 0px
}
</style>
</head>
<body>
<ul>
<li>item 1 </li>
<li id="menu">Item 2
<fieldset style="display: none;">
<form>
<input type="text">
</form>
</fieldset>
</li>
<li>Item 3</li>
</ul>
</body>
</html>