css - 悬停时的 Wordpress 导航水平子菜单

Question

我正在为 Wordpress Twentyfourteen 使用 childd 主题，我希望导航的子菜单是水平的，并且包含 Logo 而不是页面标题作为 wordpress 导航。菜单数组。是否有针对 wordpress 内联(水平)导航的自定义解决方案(在 codex 上也找不到)。 所以下面列出了我想要的主要 html/php 代码和屏幕截图。当用户将鼠标悬停在“Markalar”(导航的任何主要元素)上时，子菜单必须显示为附加图像的 View 。我几乎完成了所有 CSS 作品，但不知道如何放置 Logo 而不是子页面标题。

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

图片:

编辑: 我不会在这里添加那么多代码，但为了弄清楚我被要求这样做的问题..我希望这个线程对其他人也有帮助..因为这是一个子主题，我添加了一些自定义 CSS 到 chlidren 类(子菜单元素的默认类)。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;}