悬停时的WordPress导航水平子菜单答案

【问题标题】：Wordpress navigation horizontal submenu on hover悬停时的WordPress导航水平子菜单
【发布时间】：2014-03-24 14:45:35
【问题描述】：

我正在为 Wordpress Twentyfourteen 使用 childd 主题，我希望导航的子菜单是水平的，并且包含徽标而不是页面标题作为 wordpress 导航。菜单数组。是否有针对 wordpress 中的内联（水平）导航的自定义解决方案（在 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>

图片：

编辑：我不会在这里添加这么多代码，但为了澄清我被要求的问题..我希望这个线程对其他人也有帮助..因为这是一个子主题，我添加了一些自定义 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;
}

【问题讨论】：

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

标签： css wordpress navigation

【解决方案1】：

因为我认为这个解决方案对某人有用，所以我选择回答这个问题。使用了 CSS 的 :nth-child(n) 属性。并进行了相关的 CSS 编辑。下面是我的代码的 sn-p

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

【讨论】：