Wordpress導航水平子菜單上懸停

我使用WordPress的托兒主題Twentyfourteen，我想導航子菜單是水平的，幷包含標識而不是頁面標題作爲WordPress的導航。菜單數組。是否有WordPress的inlin（水平）導航定製解決方案（無法找到任何codex）。因此，下面列出了主要的html/php代碼和我想要的屏幕截圖。當用戶懸停在「Markalar」（導航的任何主要元素）上時，必須將子菜單顯示爲附加圖像的視圖。我已經完成了幾乎任何CSS作品，但不知道如何放置徽標而不是子頁面標題。Wordpress導航水平子菜單上懸停

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

圖片： enter image description here

編輯：我就不會在這裏添加這麼多的代碼，但爲了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; 
}

來源

2014-03-24 ilhnctn

請問您可以發佈鏈接到您的網站？你到目前爲止嘗試過什麼？ –

@kougiland [here]（http://pera.bugunbugece.com/masterservice/）是一個測試版本。將鼠標懸停在菜單欄的Markalar選項卡上將會看到我的意思（它可以作爲css，但需要包含image-logo而不是子頁面標題） – ilhnctn

您可以發佈您的css到目前爲止嗎？ – NickH

正如我因子評分該解決方案將是興利喔，我選擇回答這個問題。 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;}

來源

2014-03-25 08:20:27 ilhnctn

Wordpress導航水平子菜單上懸停

回答

相關問題