对 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>
最佳答案
看看这个jsFiddle
使用 white-sapce: nowrap; 你可以停止文本换行到不同的行。
关于hover - 如何让菜单从左到右堆叠但不挤压其内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19809879/