簡單的「Sub Sub」選項

我創建了具有2級子菜單的簡單導航。我正在尋找'sub sub'選項來顯示其父母的權利，而不是低於。我會很感激任何有關CSS的幫助。下面的html和css以及JS小提琴鏈接也是如此。簡單的「Sub Sub」選項

謝謝大家提前，

HTML

<body> 
<header> 
    <h1><a href="http://www.test.com/demo">Test Website</a></h1> 
    Just another WordPress site <form role="search" method="get" id="searchform" action="http://www.test.com/demo/" > 
    <div><label class="screen-reader-text" for="s">Search for:</label> 
    <input type="text" value="" name="s" id="s" /> 
    <input type="submit" id="searchsubmit" value="Search" /> 
    </div> 
    </form> <div class="nav-bar"> 
    <nav class="main-nav"><ul id="menu-main-nav" class="menu"><li id="menu-item-238" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-236 current_page_item menu-item-238"><a href="http://www.test.com/demo/">Home</a></li> 
<li id="menu-item-241" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-241"><a href="http://www.test.com/demo/second-page/">Second Page</a> 
<ul class="sub-menu"> 
    <li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-243"><a href="http://www.test.com/demo/sub-option-page-1/">Sub Option Page 1</a></li> 
    <li id="menu-item-245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-245"><a href="http://www.test.com/demo/sub-option-page-2/">Sub Option Page 2</a> 
    <ul class="sub-menu"> 
     <li id="menu-item-247" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-247"><a href="http://www.test.com/demo/sub-sub-option-1/">Sub Sub Option 1</a></li> 
    </ul> 
</li> 
</ul> 
</li> 
</ul></nav> </div> 
</header> 
</body>

CSS

ul, li{ margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } 

.nav-bar { 
    background: #008752; 
    height: 50px; 
    box-shadow: 2px 2px 3px #333; 
} 

.main-nav ul, .main-nav li{ 
    display: inline 
} 

.main-nav a { 
    padding: 0 20px 0 20px; 
    text-decoration: none; 
    line-height: 50px; 
    color: white; 
    display: block; 
} 

.main-nav a:hover { 
    background:#00FFFB; 
    color: black; 
} 


.main-nav ul li { 
    position: relative; 
    float: left; 
} 

.main-nav ul ul { 
    position: absolute; 
    top: -99999px; 
    left: 0; 
    opacity: 0; 
    background: #037A5A; 
    text-align: left; 
    box-shadow: 2px 2px 3px #BFBFBF; 
    transition: opacity .25s ease-in-out; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 

} 

.main-nav ul ul a { 
    width: 135px; 
    line-height: 40px; 
    padding: 0 20px; 
    display:block; 
} 

.main-nav ul li:hover > ul { 
    position: absolute; 
    top: 100%; 
    opacity: 1; 
    z-index: 99999; 
} 

.main-nav ul ul ul { 
    background:#830002; 
    text-align: left; 
} 

.main-nav ul ul ul a { 
    width: 135px; 
    line-height: 40px; 
    padding: 0 20px; 
    display: block; 
} 

.main-nav ul ul ul a:hover { 
    background:#1041A3; 
    color: white; 
} 

.main-nav ul ul li:hover > ul { 
    position: absolute; 
    top: 100%; 
    left: 170px; 
}

http://jsfiddle.net/Y24p5/1/

來源

2013-12-17 user2325396

嘿PSL，感謝您的答覆，是的，最終的結果是，就像我想它。我應該在我的第一個問題中提到這個問題，但是我希望有一個解決方案，不需要手動向「子子」選項添加類，因爲這些菜單是在WP中動態生成的。由DavidPaulJunior提出的解決方案理想地工作，因爲不需要額外的類。謝謝你:) – user2325396

你只需要調整幾個款式上.main-nav ul ul li:hover > ul。

.main-nav ul ul li:hover > ul { 
    position: absolute; 
    top: 0; 
    left: 100%; 
}

這會將其設置爲其父項的100％，並與其父項的頂部內聯。

DEMO

來源

2013-12-17 02:55:33 davidpauljunior

在這個論壇上的支持質量和速度永遠不會讓人驚歎。這是一個完美的解決方案。感謝DavidPaulJunior！ – user2325396

簡單的「Sub Sub」選項

回答

相關問題