Css dropdown menu with search box

Description

Demo Code

<html lang="en">
 <head> 
  <style>
#nav {<!--from w w  w  .  ja v a 2 s  . c om-->
}
#nav {
   background:none repeat scroll 0 0 Chartreuse;
   border-radius:4px;
   height:51px;
   margin-bottom:11px;
   padding:0;
}

#searchbar input[type=text] {
   background:none repeat scroll 0 0 yellow;
   border:2px solid blue;
   height:26px;
   padding:2px 2px 2px 6px;
   width:231px;
}

#searchbar input[type="submit"] {
   background:none repeat scroll 0 0 pink;
   border:2px solid OrangeRed;
   color:grey;
   cursor:pointer;
   font-size:15px;
   padding:5px 16px;
}

#searchbar {
   margin-right:11px;
}

#nav ul {
   list-style:none outside none;
   margin:0;
   padding:0 0 0 11px;
}

#nav ul li {
   line-height:51px;
   float:left;
}

#nav ul li a {
   line-height:51px;
   font-family:Arial, Helvetica, sans-serif;
   font-size:13px;
   font-weight:401;
   text-decoration:none;
   color:BlueViolet;
   background-color:Chartreuse;
   display:block;
   padding:0 21px;
}

#nav ul ul {
   background:yellow;
   border-radius:0px;
   padding:0;
   position:absolute;
   display:none;
}

#nav ul ul li {
   float:none;
   border-top:2px solid blue;
   border-bottom:2px solid pink;
   position:relative;
}

#nav ul ul li a {
   padding:16px 41px;
   color:OrangeRed;
}

#nav ul ul li a:hover {
   background:grey;
}

#nav ul li a:hover {
   background-color:BlueViolet;
}

#nav ul li a.active {
   background-color:Chartreuse;
}

#nav ul li active {
   background-color:yellow;
}

li.active {
   float:right !important;
}

li.active_messages {
   float:right;
}

#nav ul>li:hover>ul {
   display:block;
}

#nav ul li:hover>a {
   background-color:blue;
}
</style> 
 </head> 
 <body translate="no"> 
  <div id="nav"> 
   <ul> 
    <li> <a href="index.php">Lore</a> </li> 
    <li> <a href="categories.php">Lorem ipsu</a> 
     <ul> 
      <li> <a href="#">Lorem ips</a> </li> 
      <li> <a href="#">Lorem ipsum</a> </li> 
      <li> <a href="#">Lorem ipsu</a> </li> 
     </ul> </li> 
    <li> <a href="about.php">Lorem ip</a> </li> 
    <li> <a href="my_profile.php">Lorem i</a> </li> 
    <li> <a href="my_parts.php">Lorem ipsum</a> </li> 
    <li> <a href="verification.php">Lorem ipsum d</a> </li> 
    <li> <a href="logout.php">Lorem i</a> </li> 
    <li class="active"> 
     <div id="searchbar"> 
      <form action="search.php" method="get"> 
       <input type="text" hidden="" value="product/search" name="route"> 
       <input type="text" required="" placeholder="Search..." name="search"> 
       <input type="submit" value="Search"> 
      </form> 
     </div> </li> 
   </ul> 
  </div>  
 </body>
</html>
Css dropdown menu with search box - HTML CSS CSS Widget

Description

Demo Code

Related Tutorials
