Css 悬停时Wordpress导航水平子菜单

我正在为Wordpress Twenty14使用childd主题，我希望导航子菜单是水平的，并且包含徽标，而不是像Wordpress nav那样的页面标题。菜单数组。wordpress中是否有用于inlin（水平）导航的自定义解决方案（在这两个平台上都找不到）。 下面列出了我想要的主要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>

---

由于我认为这个解决方案会对某些人有用，所以我选择回答这个问题。 Iused

：CSS的第n个子项（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;}

---

你能把这个链接发到你的网站上吗？到目前为止你尝试了什么？@kougiland是一个测试版本。将鼠标悬停在菜单栏的Markalar选项卡上，你会看到我的意思（作为css可以，但需要包含图像徽标而不是子页面标题）你能发布你的css到目前为止吗？@NickH我编辑了这个问题，请再看一次

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