CSS3 の全幅ドロップダウン メニューに取り組んでいますが、一部の詳細が正しくありません。:-(
私が達成しようとしているのはこれです：
メインメニューとサブメニューの間に 20px のスペースがあることがわかります。この例では、ul サブメニューに top-margin:20px を使用しました。しかし、それは実際にはうまくいきません。なぜなら、ホバー領域からカーソルを離すと、サブメニューが消えてしまうからです。ドロップダウンは、サブメニューの ul コンテナがホバー領域に「触れる」場合にのみ機能します。
ul:before トリックを使用して、サブメニュー ul の前に空のブロックを追加しようとしましたが、どういうわけかうまくいきません。:(ブロックのようにスペースを必要としません.ul要素のすぐ上にコンテンツを追加するだけです.
ここで見落としていること、または間違っていることは何ですか? :( ul ul:after が機能しないのはなぜですか?サブメニューの上に空の「ホバースペース」を少し追加するより良い方法はありますか?
あなたの助けは非常に役に立ちます:-)。
ライブデモ: http://jsfiddle.net/JeroenGerth/hDmxd/
HTML:
<nav>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials ></a>
<ul class="submenu">
<li><a href="#">Photoshop 1</a></li>
<li><a href="#">Dreamweaver 2</a></li>
<li><a href="#">Photoshop 3</a></li>
<li><a href="#">InDesign 4</a></li>
<li><a href="#">Bridge 5</a></li>
<li><a href="#">Lightroom 6</a></li>
<li><a href="#">After Effects 7</a></li>
<li><a href="#">Premiere 8</a></li>
<li><a href="#">Motion 9</a></li>
<li><a href="#">Aperture 10</a></li>
<li><a href="#">iPhoto 11</a></li>
</ul>
</li>
<li><a href="#">Downloads ></a>
<ul class="submenu">
<li><a href="#">Wallpapers 1</a></li>
<li><a href="#">PSD files 2</a></li>
<li><a href="#">Video's 3</a></li>
<li><a href="#">Soundeffects 4</a></li>
<li><a href="#">Icons 5</a></li>
<li><a href="#">Maps 6</a></li>
</ul>
</li>
<li><a href="#">About me</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
CSS:
body {background-color: #E9E9E9;}
nav ul { /*Main menu container*/
margin: 0px;
padding: 0px 20px;
background-color:#444;
color: #fff;
list-style: none;
position:relative;
display:inline-table;
border-radius: 5px;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li { /*Main menu-items*/ float:left;}
nav ul li a {
padding: 10px 20px;
color: #fff;
font-family: Calibri, Verdana, sans-serif;
text-decoration:none;
display: block;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
nav ul li a:hover {color: #66D1D3;}
nav ul ul { /*Submenu container*/
display:block;
border-radius:0px;
padding: 0px;
position: absolute;
background-color:#fff;
color: #000;
visibility:hidden;
opacity:0;
transition:all ease-in-out 0.4s;
left: 0px;
top: 100%;
width: 100%;
columns:100px 3;
-webkit-columns:100px 3; /* Safari and Chrome */
-moz-columns:100px 3; /* Firefox */
}
nav ul li:hover > ul { /*Show submenu*/
visibility:visible;
opacity:1;
transition-delay:0s;
}
nav ul ul:before { /*Why doesn't this work :( */
content: "";
display: block;
height: 20px;
position: absolute;
width: 100%;}
nav ul ul li { /*Submenu items*/
float: none;
border-bottom: 1px #CCCCCC dotted;
position:relative;
}
nav ul ul li a {
color: #000;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
nav ul ul li a:hover {
color: #66D1D3;
background-color: #444;
}