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

CSS菜单弹出不正确

2 个答案: