How can I center a button just below a horizontal navigation menu, without overlapping the menu items and ensuring proper spacing when the menu expands?
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Welcome</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
body {
background-color:#f7f0f0;
font-family:Verdana;
padding:50px; /*all four paddings are 50px*/
}
h1 {
text-align:center;
border-bottom:2px solid #666;
padding-bottom:10px;
}
ul#mainmenu,ul.sub1,ul.sub2,ul.sub3,ul.sub4,ul.sub5 {
list-style-type:none;
font-size:15px;
}
ul#mainmenu {
padding-top:10px;
}
ul#mainmenu li{
float:left;
position:relative;
width:350px;
text-align:center;
margin-right:3px; /*renders a right margin of 5 pixels around the list items */
}
ul#mainmenu a {
text-decoration:none;
display:block;
line-height:25px; /*gives a vertical centering*/
width:350px; /*same as the width of the list items*/
height:25px;
background:linear-gradient(to right,#bdc2ed,white,#bdc2ed); /*create a color gradient to the right*/
border-radius:5px;
/*outline:1px solid red;*/ /*takes up the space outside of the elements's container (i.e. in this case the outside of the list items*/
}
ul#mainmenu .sub1 li {
margin-top:2px;
}
ul#mainmenu .sub1 a {
border:1px solid green; /*takes up the space outside of the content itself i.e. the anchor tags . That's where the border radius comes into the picture*/
}
ul#mainmenu .sub2 li,.sub3 li,.sub4 li,.sub5 li {
margin-left:20px;
}
ul#mainmenu li:hover > a {
text-transform:uppercase; /*select and style every <a> element where the the par */
background:linear-gradient(to right,blue,white,blue);
border:1px solid black;
}
ul#mainmenu li:hover a:hover {
background:linear-gradient(to right,#718ce5,white,#718ce5);
}
ul#mainmenu ul.sub1 {
display:none;
position:absolute;
top:26px;
left:0px;
}
ul#mainmenu ul.sub2 {
display:none;
position:absolute;
top:-2px;
left:335px;
}
ul#mainmenu ul.sub3 {
display:none;
position:absolute;
top:-2px;
left:335px;
}
ul#mainmenu ul.sub4 {
display:none;
position:absolute;
top:-2px;
left:335px;
}
ul#mainmenu ul.sub5 {
display:none;
position:absolute;
top:-2px;
left:335px;
}
ul#mainmenu li:hover ul.sub1
{
display:block;
}
ul#mainmenu ul.sub1 li:hover ul.sub2
{
display:block;
}
ul#mainmenu ul.sub2 li:hover ul.sub3
{
display:block;
}
ul#mainmenu ul.sub2 li#submenu_shirts:hover ul.sub4
{
display:block;
}
ul#mainmenu ul.sub1 li#submenu_shoes:hover ul.sub5
{
display:block;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("ul#mainmenu li:first").hide(500);
});
});
</script>
</head>
<body>
<h1>Welcome</h1>
<div>
<form action="" >
<ul id="mainmenu">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a>
<ul class="sub1">
<li><a href="#">Clothing</a>
<ul class="sub2">
<li><a href="#">T-Shirts</a>
<ul class="sub3">
<li><a href="#">Polo</a></li>
<li><a href="#">V-Neck</a></li>
<li><a href="#">Henley</a></li>
</ul>
</li>
<li id="submenu_shirts"><a href="#">Shirts</a>
<ul class="sub4">
<li><a href="#">Half-Sleeve</a></li>
<li><a href="#">Full-Sleeve</a></li>
</ul>
</li>
<li><a href="#">Jeans</a></li>
<li><a href="#">Trousers</a></li>
</ul>
</li>
<li id="submenu_shoes"><a href="#">Shoes</a>
<ul class="sub5">
<li><a href="#">Sports-Shoes</a></li>
<li><a href="#">Formal-Shoes</a></li>
</ul>
</li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</form>
</div>
<div>
<input type="submit" value="Post"/>
</div>
</body>
</html>