0

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

1 に答える 1

0

このjsFiddleを見てください

を使用すると、white-sapce: nowrap;別の行へのテキストの折り返しを停止できます。

于 2013-11-06T11:46:36.677 に答える