[pedro-correia]

I stripped some of your styling stuff and left the positioning stuff so it’s clearer:

#mainmenu {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#mainmenu li {
  clear: left;
}

#mainmenu a {
  display: block;
  overflow: hidden;
  float: left;
}

#mainmenu a:hover,
#mainmenu li.active a {
  background-position: 0 0;
}

.submenu {
  list-style-type: none; 
  float: left;
  display: none;
}

#mainmenu li a:hover+.submenu, .submenu:hover {
  display: block;
} 



.submenu li {
  display: inline; 
  clear: none !important;
}

.submenu li a {
  float: left;
  margin-left: 10px;
}

I also added some code to handle the mouse hovers.

[Author]

Posts