3

純粋な CSS を使用したフライアウト メニューの構造は次のとおりです。

HTML

<ul class="menu">
    <li><a href="#">Base</a>        
        <ul>
            <li><a href="#">Clients</a>                
                <ul>
                    <li><a href="#">New</a></li>
                    <li><a href="#">Edit</a></li>
                    <li><a href="#">Delete</a></li>
                </ul>
            </li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Employees</a></li>
        </ul>
    </li>
    <li><a href="#">Search</a></li>
    <li><a href="#">System</a></li>
</ul>

CSS

a {text-decoration: none; font-family: verdana; font-size: 12px}
ul{list-style: none; padding:0; margin:0}

.menu {
    margin:0; padding:0;
    width: 100%; height: auto; 
    background: #ccc;    
    position: absolute;
    top:0; left:0;   
}
.menu li {
    float:left;
    display:block
}
.menu li li {
    float:none;
}
.menu li a {
   padding: 0 5px;   
}
.menu li a:hover {
    background: #bbb
}
.menu li ul {
    padding:0; margin:0;
    background: #ddd;
    width: auto;
    position: absolute;    
    visibility: hidden;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    opacity: 0;
    margin: 20px 0 0 0;    
}
.menu li:hover ul {
    margin:0;
    opacity: 1;
    visibility: visible;
    display:block
}
.menu li ul li {
    clear:both   
}
.menu li ul li a {   
    width: auto;
    display:block;
}
.menu li ul li ul {
    position: absolute;       
    top: 0; left: 72px;    
    margin: 0 0 0 20px;
    display: block;
    visibility: hidden;
    opacity: 0
}
.menu li ul li ul li {
    position: relative;
    display:none;
    visibility: hidden;
    opacity: 0
}
.menu li ul li:hover ul li {
    visibility: visible;
    opacity: 1;
    display:block    
}

jsFiddle の例

メニューの第 1 レベルと第 2 レベルでは、すべてが正常に機能しています。第 2 レベル ( .menu li ul) は動的であるため、オプションの長さが変更された場合、幅が増加します。

それがまさに私の質問の出所です。2 番目のレベルに関係なく、3 番目のレベルが常に 2 番目のレベルの最後に留まるようにしwidthます。

次の画像でより明確にしようと思います。

これは私が今持っているものです：

私が持っているもの

オプションの長さが増加すると、次のようになります。

問題

メニューの動作は次のとおりです。

どのように私はそれをしたいです

それは純粋なCSSでそれを行う方法ですか?

そうでない場合、私が望むものを達成するための最良の選択は何ですか?

前もって感謝します。

4

1 に答える 1

2

http://jsfiddle.net/f66MM/ これはうまくいくようです。私がしたことleft:100%は、li ul li ulの変化だけでした

a {text-decoration: none; font-family: verdana; font-size: 12px}
ul{list-style: none; padding:0; margin:0}

.menu {
    margin:0; padding:0;
    width: 100%; height: auto; 
    background: #ccc;    
    position: absolute;
    top:0; left:0;   
}

.menu li {
    float:left;
    display:block
}

.menu li li {
    float:none;
}

.menu li a {
   padding: 0 5px;   
}

.menu li a:hover {
   background: #bbb
}

.menu li ul {
    padding:0; margin:0;
    background: #ddd;
    width: auto;
    position: absolute;    
    visibility: hidden;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    opacity: 0;
    margin: 20px 0 0 0;    
}

.menu li:hover ul {
    margin:0;
    opacity: 1;
    visibility: visible;
    display:block
}

.menu li ul li {
    clear:both   
}

.menu li ul li a {   
    width: auto;
    display:block;
}

.menu li ul li ul {
    position: absolute;       
    top: 0; left: 100%;    
    margin: 0 0 0 20px;
    display: block;
    visibility: hidden;
    opacity: 0
}

.menu li ul li ul li {
    position: relative;
    display:none;
    visibility: hidden;
    opacity: 0
}

.menu li ul li:hover ul li {
    visibility: visible;
    opacity: 1;
    display:block;
}
于 2013-05-21T14:39:10.600 に答える