0

CSS 非常新，所以请原谅菜鸟问题，但我正在尝试弄清楚如何使用 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>
4

1 回答 1

0

看看这个jsFiddle

使用white-sapce: nowrap;您可以停止文本换行到不同的行。

于 2013-11-06T11:46:36.677 回答