CSS3 Simple Horizontal menu Search box

While learning I wanted to create a horizontal menu. This fiddle contains the code for the same.

by Avdhut Sonpethkar

HTML

<div id="menucontainer">
    <ul id="hmenu">
        <li class="submenu"><a href="http://techisquest.blogspot.com/">Home</a>

        </li>
        <li class="submenu"><a href="http://techisquest.blogspot.com/">About</a>

        </li>
        <li class="submenu"><a href="http://techisquest.blogspot.com/">Contact Us</a>

        </li>
        <li class="search"><span>Search</span><span><input type="text" /></span>

        </li>
    </ul>
</div>

CSS

/*
Techonolgy Quest;

creating a horizontal menu is simple.

Following id will define the dimensions for the menu, margin, padding width, height.
*/
 #menucontainer {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100px;
}
/* Following selectors will define the style for the ul tag*/
 #menucontainer ul {
    list-style: none;
    background-color:#69A9B1;
    margin: 0px;
    padding: 0px;
}
/* Following selector will define the style for individual menu or li tags. The following style gives them a look when the menus are not selected.
note that the position proerty is set to relative and dispaly is inline.
Additional thing is  that style will be applied to .submenu class that is present inside the li tag.
This is necessary to seperate the style of the menu item and the search box. 

*/
 #menucontainer ul li.submenu {
    list-style: none;
    margin: 0px;
    padding: 0px;
    background-color:#69A9B1;
    position: relative;
    display: inline;
    width: auto;
    height: 100%;
    border-right: 2px solid #6A91A8;
}
/* Style for the anchor tag defined in the menu. 
*/
 #menucontainer ul li.submenu a {
    margin-left: 5px;
    padding-left: 5px;
    margin-right: 5px;
    padding-right: 5px;
    background-color:transparent;
    position: relative;
    display: inline;
    text-decoration: none;
    font-family:"Times New Roman", "Arabic";
    font-size: 20px;
    color: #E3E3C0;
}
/* The hover effect is defined using the below selectors
For the opacity is used to create a semi-transperant look as a hover effect
*/
 #menucontainer ul li.submenu:hover {
    list-style: none;
    margin: 0px;
    padding: 0px;
    opacity: 0.5;
    background-color:#69A9B1;
    position: relative;
    display: inline;
    border-right: 2px solid #6A91A8;
}
#menucontainer ul li.submenu:hover a {
    list-style: none;
    margin-left: 5px;
    padding-left: 5px;
    margin-right: 5px;
    padding-right: 5px;
    background-color:transparent;
    position:...