Cannot Make Menubar Dropdown Hover Properly

I have a menu bar which has 8 to 9 menus horizontally of different character length. Also, each and every menu has sub menus of different character length. All I want is - 1. a

Solution 1:

There is jsfiddle example toked from CSS Menu Maker site

I made some little changes to simplify example. Little update, nothing special

Update (fiddle too):

<divid='cssmenu'><ul><li><ahref="#">Product Repository </a><ul><li><ahref="#">Insert</a></li><li><ahref="#">Search & Edit</a></li><li><ahref="#">File Upload</a></li></ul></li><li><ahref="#">Inventory Inspection</a><ul><li><ahref="#">Insert</a></li><li><ahref="#">Search & Edit</a></li><li><ahref="#">Reprint</a></li><li><ahref="#">Inventory Report</a></li></ul></li><li><ahref="#">Reports</a><ul><li><ahref="#">Insert</a></li><li><ahref="#">Search & Edit</a></li></ul></li></ul></div>

and css :

#cssmenu {padding: 0; margin: 0; border: 0;}
#cssmenuul, #cssmenuli {list-style: none; margin: 0; padding: 0;}
#cssmenuul {position: relative; z-index: 597; }
#cssmenuulli { float: left; min-height: 1px; vertical-align: middle; border:solid 1px blue; width:150px;}
#cssmenuulli.hover,
#cssmenuulli:hover {position: relative; z-index: 599; cursor: default; background-color:yellow;}
#cssmenuulul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 150px;}
#cssmenuululli {float: none; margin-left:-1px; width:150px; border:solid 1px red;}
#cssmenuulli:hover > ul { visibility: visible;}
#cssmenuulul {bottom: 0; left: 0;}
#cssmenuulul {margin-top: 0; }
#cssmenuululli {font-weight: normal;}
#cssmenua { display: block; /*line-height: 1em;*/text-decoration: none; }

It's not pretty but You can see the point.

Update (code changed):

#cssmenu
{
    padding:0;
    margin:0;
    display:block;
}
a {text-decoration:none; color:black; width:100%; box-sizing:border-box; display:block;}
#cssmenuul
{
  position:relative;
  margin:0;
  padding:0;
  cursor:default;
  display:table;
  width:100%;
  border:solid 1px gray;
}
#cssmenuulli, #cssmenuulli:last-child
{
  list-style-type:none;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
  padding-top:3px;
  padding-bottom:3px;
  border-right:solid 1px gray;
  margin:0;
  position:relative;
}
#cssmenuulli:last-child {border:none;}
#cssmenuulli:hover {background-color:yellow;}
#cssmenuulli:hover > a {color: red;}
#cssmenuulul
{
  visibility:hidden;
  position:absolute;
  top:100%;
  margin:0;
  margin-left:-1px;
  z-index:101;
  display:block;
}
#cssmenuululli, #cssmenuululli:last-child
{
    display:block;
    width:100%;
    box-sizing:border-box;
	border:none;
	border-bottom:solid 1px gray;
}
#cssmenuululli:last-child {border:none;}
#cssmenuululli:hover
{
  background-color:navy;
}
#cssmenuullili:hover > a {color:white;}
#cssmenuulli:hover > ul {visibility:visible;}

<divid='cssmenu'><ul><li><ahref="#">Product Repository </a><ul><li><ahref="#">Insert</a></li><li><ahref="#">Search & Edit</a></li><li><ahref="#">File Upload</a></li></ul></li><li><ahref="#">Inventory Inspection</a><ul><li><ahref="#">Insert</a></li><li><ahref="#">Search & Edit</a></li><li><ahref="#">Reprint</a></li><li><ahref="#">Inventory Report</a></li></ul></li><li><ahref="#">Reports</a><ul><li><ahref="#">Insert</a></li><li><ahref="#">Search & Edit</a></li></ul></li><li><ahref="#">Product Repository </a><ul><li><ahref="#">Insert</a></li><li><ahref="#">Search & Edit</a></li><li><ahref="#">File Upload</a></li></ul></li><li><ahref="#">Inventory Inspection</a><ul><li><ahref="#">Insert</a></li><li><ahref="#">Search & Edit</a></li><li><ahref="#">Reprint</a></li><li><ahref="#">Inventory Report</a></li></ul></li><li><ahref="#">Reports</a><ul><li><ahref="#">Insert</a></li><li><ahref="#">Search & Edit</a></li></ul></li><li><ahref="#">Product Repository </a><ul><li><ahref="#">Insert</a></li><li><ahref="#">Search & Edit</a></li><li><ahref="#">File Upload</a></li></ul></li><li><ahref="#">Inventory Inspection</a><ul><li><ahref="#">Insert</a></li><li><ahref="#">Search & Edit</a></li><li><ahref="#">Reprint</a></li><li><ahref="#">Inventory Report</a></li></ul></li><li><ahref="#">Product Repository </a><ul><li><ahref="#">Insert</a></li><li><ahref="#">Search & Edit</a></li></ul></li></ul></div>

Try this solution, but when You Run code snippet switch it to Full Page. I hope so this is what You want. But, always but, if Your window is too small, You can't avoid item values in two rows.