Wordpress导航水平子菜单上悬停

Question

我使用WordPress的托儿主题Twentyfourteen，我想导航子菜单是水平的，并包含标识而不是页面标题作为WordPress的导航。菜单数组。是否有WordPress的inlin（水平）导航定制解决方案（无法找到任何codex）。 因此，下面列出了主要的html/php代码和我想要的屏幕截图。当用户悬停在“Markalar”（导航的任何主要元素）上时，必须将子菜单显示为附加图像的视图。我已经完成了几乎任何CSS作品，但不知道如何放置徽标而不是子页面标题。

<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> 

图片：

编辑：我就不会在这里添加这么多的代码，但为了clearify问题有人问我..我希望这个线程将是他人有所帮助，太..因为这是一个孩子的主题，我增加了一些自定义CSS的chlidren类（子menue元素默认类）。该CSS列表如下：

.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

正如我因子评分该解决方案将是兴利喔，我选择回答这个问题。 Iused :nth-child(n)属性的CSS。并做了相关的CSS编辑。以下是我的代码片段

.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;}