如何使菜单从左到右堆叠而不挤压其内容

Question

CSS非常新，因此可以原谅noob问题，但是我试图弄清楚如何使用CSS框模型创建下拉菜单。

菜单标题需要根据宽度在页面上从左到右流动。

下拉菜单的内容不必压缩到标题的宽度：它们应该与最宽的菜单项一样宽。

我最大的猜想如下。 （我关闭了一些悬停行为，以使页面检查更加容易。）

<head>
<style>
body { font-family: sans-serif; font-weight: bold; padding: 0; margin: 0; }

.dropdown { position: relative; }
.dropdown .title { display:inline-block; background:#eee; padding: 6px; }
.dropdown ul { border: 1px solid grey; background:white; position:absolute; top:14px; left:0px; list-style-type: none; padding:0;}
.dropdown li { width: auto; padding: 6px; }

._dropdown ul { display: none; visibility: invisible; }
._dropdown .title:hover { background-color: #333; color:white; }
._dropdown .title:hover > ul { display: block; }
.dropdown li:hover { background-color: #def; }

</style>
</head>
<body>

<div class="dropdown">
    <div class="title">Menu title
        <ul><li><a href=#>Unit 1</a></li>
            <li><a href=#>Unit 2</a></li>
            <li><a href=#>Unit 3 A really long one</a></li>
        </ul>
    </div>
</div>

<div class="dropdown">
    <div class="title">Menu title
        <ul><li><a href=#>Unit 1</a></li>
            <li><a href=#>Unit 2</a></li>
            <li><a href=#>Unit 3 A really long one</a></li>
        </ul>
    </div>
</div>

</body>

Answer 1

看看这个jsFiddle

使用white-sapce: nowrap; 您可以停止将文本换行到其他行上。

如何使菜单从左到右堆叠而不挤压其内容

问题描述

1 个解决方案

解决方案1
0 2013-11-06 11:46:36

如何使菜单从左到右堆叠而不挤压其内容

问题描述

1 个解决方案

解决方案1 0 2013-11-06 11:46:36

解决方案1
0 2013-11-06 11:46:36