過渡效果不正確的元素

我正在製作一個類似隱藏菜單的手風琴，我想讓子菜單有一個特定的功能。我看到了FelixWastal的Codepen http://codepen.io/felixw/pen/Hqmbu，我認爲這會爲隱藏的子菜單添加一些創意。但在我編碼之後，由於某種原因在示例中看到的功能會影響主要的ul。過渡效果不正確的元素

這是我目前的嘗試，在這個問題：http://codepen.io/PorototypeX/pen/swvtc

來源

2014-01-31 Jgoodwyn

你想添加什麼「特定功能」？ – TimSPQR

@TimSPQR我想讓它懸停在它上面，看起來左邊的邊框擴大了，所以背景是一個純色 – Jgoodwyn

你能解釋一下好嗎？你有兩個麗（HOME，HOME2）家，棕色滑塊，HOME2藍色滑塊。你想有一個「雙滑塊」出來，同時涵蓋HOME和HOME2？ – TimSPQR

嗯，我猜你想使一個子菜單，風格不同的看法。

這裏是FIDDLE

HTML

<nav> 
    <a href="#"><span>Home</span></a> 
    <a href="#"><span>Shop</span></a> 
    <a href="#"><span>Submenu</span></a> 
    <a href="#"><span>Blog</span></a> 
    <a href="#"><span>Contact</span></a> 
</nav>

相關CSS

nav a:nth-child(3):before { 
    content: ""; 
    position: absolute; 
    background: blue; 
    height: 100%; 
    width: 0px; 
    top: 0; 
    left: 0; 
    transition: all 0.3s ease 0s; 
    z-index: -1; 
} 
nav a:hover:nth-child(3):before { width: 100%;} 
nav a:hover:nth-child(3) span { color: white;}

注意：如果FelixWastal就在那裏......在美麗的作品的祝賀 - 視覺和編程。

來源

2014-01-31 04:36:40 TimSPQR

過渡效果不正確的元素

回答

相關問題