轉換在css中不起作用

我正在創建一個下拉菜單。一切工作到目前爲止。不起作用的一件事是下拉菜單出現時不透明度的變化。我也想增加一個高度的流量。我的意思是整個高度應該在0.5秒後出現。轉換在css中不起作用

現在我想我可能通過轉換來實現這些事情，但不知何故它根本不工作。

#nav-primary ul ul{ 
    position:absolute; 
    left:0px; 
    opacity: 0; 
    transition:opacity .5s ease-in-out; 
    -webkit-transition: opacity .5s ease-in-out; 
    -moz-transition: opacity .5s ease-in-out; 
    -o-transition: opacity .5s ease-in-out; 
    z-index:497; 
} 

#nav-primary ul li:hover > ul { 
    opacity: 1; 
    position:absolute; 
    top:100%; 
    left:0; 
}

基本上我現在用的是wp_nav_menu從WordPress的：

wp_nav_menu(array('theme_location' => 'menu', 
        'link_before' => '<span>', 
        'link_after' => '</span>',));

結構應如下：

ul ...       // main-menu 
    li ... 
     ul ...     // sub-menu 
      li ... 
       <a> 
       <span> 
       </a>

來源

2013-02-01 Miss Marple

你有'ul ul'的過渡，但'：hover'發生在'li' – ashley

感謝評論。我現在改變了它。現在不透明度不會改變。下拉菜單保持透明。這是爲什麼？ –

你能提供你的HTML，所以我可以看到你的設置或看看這個網站'http：//www.greywyvern.com/？post = 337'，它有一些下拉菜單淡入 – ashley

在你的CSS代碼，你永遠不適用任何定位頂端最父母的ul元素。也許這是一個錯字？

你的第一行是：

#nav-primary ul ul{

，但也許你的意思是：

#nav-primary ul {

你最好的第一步是建立你的父母UL認證。如果沒有在你父母的ul和li上定位屬性，你的孩子li就不會知道他們的定位。

假設你已經制定一些其他的默認樣式，這樣的事情是你將需要：

#nav-primary ul { 
    position:relative; 
}

再加上一些你已經有了，和其他一些基本的款式，而你對你的方式：

ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

li { 
    display: block; 
    width: 300px; 
    height: 30px; 
    line-height: 30px; 
    color: black; 
    padding: 5px; 
    background: #aaa; 
} 

ul li li { 
    background: #ccc; 
} 

#nav-primary ul { 
    position:relative; 
} 

#nav-primary ul > li > ul { 
    display: block; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    transition:opacity .5s ease-in-out; 
    -webkit-transition: all .5s ease-in-out; 
    -moz-transition: all .5s ease-in-out; 
    -o-transition: all .5s ease-in-out; 
    opacity: 0; 
} 

#nav-primary ul > li:hover > ul { 
    opacity: 1; 
}

看到它在這裏的行動：http://jsfiddle.net/jonthomas/27Ymw/1/

希望幫助！

來源

2013-02-02 06:47:42 jthomas

轉換在css中不起作用

回答

相關問題