Joomla Horizonal - Full width sub nav with images

joomla-full-width-nav

/*Quick mockup of full width Joomla menu with background images on sub nav items*/
/*For ease of use adding names of products etc to image would be better then to absolute position the sub nav links with opacity 0*/
* {
  box-sizing:border-box;
}
.menu {
  position: relative;
}
ul {
  list-style:none;
  padding: 0;
  margin: 0;
}
li {backgroundcolor:white;}
ul > li {
  display: inline-block;
}
ul > li > a {
  padding: 4px 10px;
  display:block;

}
ul > li > ul {
  position: absolute;
  width: 100%;
  display:none;
  left: 0;
  padding-top:20px;
}
ul > li.active > ul {
  display:block;
   width: 50%;
   left: 0;
}
ul > li.active > ul:last-child {
 left: auto;
  right: 0;
   border-left: 1px solid violet;
}
ul > li > ul > li {
  padding: 10px;
  width: 50%;
  float: left;
  position: relative;
  text-align:center;
vertical-align: top;
 background: white url(http://placehold.it/350x225) top center;
   background-size:100px;
  background-repeat: no-repeat;
  height: 100px;
  margin-bottom: 20px;
}
ul > li > ul > li a {
    position:absolute;
    bottom: 0;
    width: 100%; 
    left: 0; 
    text-align:center
}