1

CSSの多次元メニューを作成しています。トランジションを使用してフェードイン/フェードアウトし、マウスを1ピクセル離してメニューの問題を最小限に抑えています。ただし、マウスを離すと、サブメニューに複数の項目がある場合、最初の項目を除いてすべてが非表示になり、簡単に移行できます。

関連コード：

ul.menu li>ul {
....
    overflow:hidden;
    visibility:hidden;
    opacity:0;
    transition:visibility 0s linear 0.5s, overflow 0s linear 0.5s, opacity 0.5s linear 0s;
}
ul.menu li:hover>ul {
    overflow:visible;
    visibility:visible;
    opacity:1;
    transition:visibility 0s linear 0s, overflow 0s linear 0.5s, opacity 0.5s linear 0s;
}

Jsfiddle：http ://jsfiddle.net/fGWzg/ 問題を再現する方法：メインバーの最初の「hi」の上にマウスを移動してから、マウスを外します。最初のアイテムのみが残ります。

4

1 に答える 1

0

Firefoxについて話していると思いますが、Webkitブラウザーには遷移が表示されないため、ChromeまたはInternetExplorerでWebサイトを表示することをお勧めします。常にChromeで開発する必要があります。これは、Firebugよりも優れています。

あなたの問題に関して：

ul.menu li > ul {
    height: 100%; /* delete */
    left: 0;
    margin: 0;
    opacity: 0;
    ...
}

多くの仕事の後：

/* reset */
body {
    margin:0;
}
ol, ul {
    margin: 0;
    padding: 0;
}

/* global */
ul.menu,
ul.menu ul {
    list-style-type: none;
}
ul.menu,
ul.menu a {
    color: white;
}
ul.menu a {
    display: block;
    text-decoration: none;
}
ul.menu li {
    position: relative;
    height: 35px;
    line-height: 35px;
    font-weight: bold;
    text-align: center;
}
ul.menu li:hover {
    background-color: #11689E;
}

/* menu (just the first one) */
ul.menu {
    padding-left: 35px;
    background: #1BBFE0;
}
ul.menu > li {
    margin-right: 8px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 5%;
    background-color: #1B94E0;
}

/* sub-menus (fading menus) */
ul.menu ul {
    position: absolute;
    width: 100%;
    background-color: #1B94E0;
    visibility: hidden;
    opacity: 0;
}
ul.menu li:hover > ul {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity .5s linear;
       -moz-transition: opacity .5s linear;
         -o-transition: opacity .5s linear;
            transition: opacity .5s linear;
}

/* "pop out" sub-menus */
ul.menu li > ul ul {
    top: 0;
    right: -100%;
}

http://jsfiddle.net/654Ta/2/

IE7以下を除くすべてのブラウザーで動作します（>セレクターがサポートされていないため）。それらを置き換えると、IE6で動作します。

乾杯

于 2012-12-07T09:33:27.247 に答える