0

展開してオプションを表示する見栄えの良いメニューを作成しようとしていますが、CSSを正しく取得するのに問題があります。都市名からサブメニューをポップアウトさせたい。しかし、私は都市名をそこに正しく収めることができません。

CSS

ul { margin : 80px 0 0 0; padding: 0;  white-space : nowrap;}

li a { padding-left: 10px; }

li {
    display     : block;
    padding     : 2px 10px 2px 40px;
    margin      : 0 0 15px 0;
    background  : #929292; 
    width       : 0;
    overflow    : hidden;
    cursor      : pointer;
    -webkit-transform: rotate(0deg) translateX(0px); 
    -webkit-transition: all 0.33s linear 0s;
    -moz-transform: rotate(0deg) translateX(0px);
    -moz-transition: all 0.33s linear 0s;
}


li:hover {  
    background : #fff; width: 180px;
    -webkit-transform: rotate(0deg) translateX(0px) translateY(0px); 
    -moz-transform: rotate(0deg) translateX(0px) translateY(0px);
}

HTML

<ul>
    <li>Florence<a href="flo.php">Florence</a></li>
    <li>Tuscumbia<a href="tusc.php">Tuscumbia</a></li>
    <li>Muscle Shoals<a href="ms.php">Muscle Shoals</a></li>
    <li>Sheffield<a href="shef.php">Sheffield</a></li>
</ul>​
4

2 に答える 2

2

それはおそらくそれを行うための最良の方法ではありませんが、クラスを使用することができます：

<ul>
    <li class="flo">Florence<a href="flo.php">Florence</a></li>
    <li class="tusc">Tuscumbia<a href="tusc.php">Tuscumbia</a></li>
    <li class="ms">Muscle Shoals<a href="ms.php">Muscle Shoals</a></li>
    <li class="shef">Sheffield<a href="shef.php">Sheffield</a></li>
</ul>​​​​​​​​​​​​​​​​​​​​​​​​​

 .flo { width: 50px; }
 .tusc { width: 60px; }
 .ms { width: 82px; }
 .shef { width: 50px; }

これがフィドルです：http：//jsfiddle.net/tylergreen/SQGrY/

于 2012-11-05T09:51:37.370 に答える
1

左側のラベルにラッパーと固定幅を与えることができます。

HTML

<ul class="mainMenu">
    <li>
        <div class="label">Florence</div>
        <ul class="subMenuLevel1">
            <li><a href="flo.php">Florence 1</a></li>
            <li><a href="flo.php">Florence 2</a></li>
            <li><a href="flo.php">Florence 3</a></li>
        </ul>
    </li>

    <li>
        <div class="label">Florence</div>
        <ul class="subMenuLevel1">
            <li><a href="flo.php">Florence 1</a></li>
            <li><a href="flo.php">Florence 2</a></li>
            <li><a href="flo.php">Florence 3</a></li>
            <li><a href="flo.php">Florence 4</a></li>
            <li><a href="flo.php">Florence 5</a></li>
        </ul>
    </li>

    <li>
        <div class="label">Florence</div>
        <ul class="subMenuLevel1">
            <li><a href="flo.php">Florence 1</a></li>
            <li><a href="flo.php">Florence 2</a></li>
        </ul>
    </li>
</ul>​

CSS

body {
    font-family: Arial, san-serif;
}

.mainMenu {
    margin: 80px 0 0 0;
    padding: 0;
}

.mainMenu > li {
    display: block;
    position: relative;
    margin: 0 0 15px 0;
    background: #929292; 
    width: 160px;
    white-space: nowrap;
    list-style-type: none;
    -webkit-transition: background 0.33s linear 0s;
    -moz-transition: background 0.33s linear 0s;
    transition: background 0.33s linear 0s;
}
.mainMenu > li > .label {
    padding: 5px 20px;
    text-align: right;
}

.mainMenu > li:hover {  
    background : #eeeeee; 
}

.subMenuLevel1 {
    position: absolute;
    top: 0px;
    left: 160px;
    width: 0px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    background: #929292;
    -webkit-transition: all 0.33s linear 0s;
    -moz-transition: all 0.33s linear 0s;
    transition: all 0.33s linear 0s;
}

.mainMenu > li:hover > .subMenuLevel1 {
    width: 160px;
    background: #eeeeee;
}
.subMenuLevel1 > li {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
.subMenuLevel1 > li > a {
    display: block;
    padding: 5px 20px;
    color: #000000;
    text-decoration: none;
    -webkit-transition: background 0.33s linear 0s;
    -moz-transition: background 0.33s linear 0s;
    transition: background 0.33s linear 0s;
}
.subMenuLevel1 > li > a:hover {
    background: #dddddd;
}

デモ

于 2012-11-05T22:49:38.813 に答える