0

ナビゲーションバーのサブメニューをトランジション付きで表示しようとしています。しかし、これは機能していません。私が使用しているCSSコードはこれです-

#navigation li ul {
   display: none; 
   width: auto;
   position: absolute;
   margin: 0;
   padding: 0;
   background-color: #F87217;
    -webkit-transition: 0.7s;
    -moz-transition: 0.7s;
    -o-transition: 0.7s;
    transition: 0.7s;   
}

#navigation li:hover ul {
    display: block;
}

移行を機能させるにはどうすればよいですか？

4

2 に答える 2

2

移行することはできませんdisplay。移行するheightか、opacity代わりに試してください。

#navigation li ul {
   display: block; 
   width: auto;
   height: 0;
   opacity: 0; /* optional */
   /* other attributes */
    -webkit-transition: 0.7s;
    -moz-transition: 0.7s;
    -o-transition: 0.7s;
    transition: 0.7s;   
}

#navigation li:hover ul {
    height: auto;
    opacity: 1; /* optional */
}
于 2012-12-17T08:42:29.057 に答える
1

display noneを使用すると、アイテムはレンダリングされません...したがって、ホバーすることはできません。Jan Dvorakが言うように、高さを使用する方が良いオプションかもしれません。ただし、高さが0のアイテムもホバーできません。

透明度の使用をお勧めします。

#navigation li ul {
opacity: 0;
...
}
#navigation li:hover ul {
    opacity: 1;
}
于 2012-12-17T08:42:49.370 に答える