Wordpress navigation horizontal submenu on hover

Question

i'm using a childd theme for Wordpress Twentyfourteen, i want submenues of navigation to be horizontal and contain the logos instead of page titles as wordpress nav. menu array. Is there a custom solution for inlin (horizontal) navigations in wordpress (couldn't find any on codex either). So the main html/php code and a screenshot of what i want is listed below. When a user hovers over "Markalar"(any of the primary elements of navigation) the submenu must be displayed as the attached image's view. I have done almost any of CSS works, but have no idea how to place logos instead of the sub page titles.

<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
                <h1 class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></h1>
                <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
            </nav>

Image:

Edit: I wouldn't add so many code here, but in order to clearify the issue i was asked to.. i hope this thread will be helpful for others too.. As This is a child theme, i added some custom CSS to chlidren class(default class for sub menue elements).the CSS is listed below:

.children {
  float: left;
  width: 760px;
  margin: 0;
  padding: 0;
  list-style: none;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;   
}

.children li {
  display: inline;
}

.children li a {
  float: left;
  font: bold 1.1em arial,verdana,tahoma,sans-serif;
  line-height: 15px;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #880000;
  margin: 0;
  padding: 0 20px;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;     
}

.children .current a, .children li:hover > a  {
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #330000;
  background: #bb0000;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px; 
}

.children ul {
  display: none;
}

.children li:hover > ul {
  position: absolute;
  display: block;
  width: 720px;
  height: 25px;
  position: absolute;
  margin: 20px 0 0 0;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px; 
}
.children li:hover > ul li a {
  float: left;
  font: bold 1.1em arial,verdana,tahoma,sans-serif;
  line-height: 25px;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #110000;
  margin: 0;
  padding: 0 30px 0 0;
}

.children li:hover > ul li a:hover {
  color: #120000;
  text-decoration: none;
  text-shadow: none;
}

Answer 1

As i tought this solution will be useful for someone, i chose to answer the question. Iused :nth-child(n) property of CSS. and made related css edits. below is a snippet of my code

.children li a {text-indent: -900em;} /** hide subpage's title */
.children li:nth-child(1) a {background-image:url('images/logolar/lacia.png'); z-index:5; width:40px ;height:40px; position:relative; background-repeat:no-repeat;}
.children li:nth-child(2) a {background-image:url('images/logolar/jeep.png'); z-index:5; width:60px ;height:40px; position:relative; background-repeat:no-repeat;}
.children li:nth-child(3) a {background-image:url('images/logolar/alfaromeo.png'); z-index:5; width:40px ;height:40px; position:relative; background-repeat:no-repeat;}