CSS菜单启动不正确

Question

我正在尝试制作一个外观的菜单，以扩展并显示其中的选项，但是我遇到了问题。我想从城市名称中弹出子菜单。但是我无法将城市的名字适合在那里。

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>​

Answer 1

这可能不是最好的方法，但是您可以使用类：

<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/

Answer 2

您可以在左侧给标签和固定宽度：

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;
}

demo