在悬停的Wordpress导航水平的子菜单

Question

我正在使用Wordpress Twentyfourteen的子主题，我希望导航的子菜单是水平的，并且包含徽标而不是页面标题作为wordpress导航。菜单数组。是否有自定义解决方案用于wordpress中的inlin（水平）导航（无法在codex上找到任何内容）。 所以主要的html / php代码和我想要的截图列在下面。当用户将鼠标悬停在＆＃34; Markalar＆＃34;（导航的任何主要元素）时，子菜单必须显示为附加图像的视图。我几乎完成了任何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>

图片：

编辑：我不会在这里添加这么多代码，但是为了清除问题，我被要求...我希望这个帖子对其他人也有帮助。这是一个子主题，我为chlidren类添加了一些自定义CSS（子菜单元素的默认类）。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

我认为这个解决方案对某人有用，我选择回答这个问题。 使用CSS的:nth-child(n)属性。并进行了相关的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;}