Edit in JSFiddle

/*
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: relative;
    display: inline;
    text-decoration: none;
    font-family:"Times New Roman", "Arabic";
    font-size: 20px;
    color:black;
}
/*
The following selector will define the style for the search box.
this is very important to sepearte the style of menu item and the serach box.
for menu we have used the "submenu" class and for search we have used "search" class.
The search box is set to float right so that even if the menu is streached to full leangth
the search box will stay on the right side of the menu.
*/
 #menucontainer ul li.search {
    float:right;
    display: inline;
    position:relative;
    margin:0px;
    padding:0px;
    background-color:#69A9B1;
}
/*

Following selector will set the style for text in the search box.
This style is similar to the anchor tags used in the menu item.

*/
 #menucontainer ul li.search span {
    margin-left: 5px;
    padding-left: 5px;
    background-color:transparent;
    position: relative;
    display: inline;
    text-decoration: none;
    font-family:"Times New Roman", "Arabic";
    font-size: 20px;
    color: #E3E3C0;
}
/*
Following selector will specify the style for the input tag wich is used in the search.

*/
 .search span input[type=text] {
    height: 10px;
    width:90px;
    margin:0px;
    margin-right: 2px;
    border-radius: 5px;
    
}