1
私はフロートなしでCSSメニューを作成する方法を学んでいます。私はこれまで部分的に「働く」メニューを手に入れました。ただし、メインメニューの境界線は区切られています。また、サブメニューの枠線のサイズは半分になり、ホバーの背景色は機能しません。同時に、サブサブメニューは機能しません。HTML/CSS：このメニューのスタイルを正しく設定するにはどうすればよいですか？
また、.menu .submenuサブサブメニュークラスを使用してCSSコードを単純化しようとしています。
jsFiddle： http://jsfiddle.net/vn64H/1/
HTML
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title: Navigation menu</title>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<!-- START: menu -->
<ul id="nav">
<li class="menu"><a href="#">Home</a></li>
<li class="menu"><a href="#">Main Menu 2</a>
<ul class="submenu">
<li><a href="#">Sub Menu 2.1</a></li>
<li><a href="#">Sub Menu 2.2</a></li>
<li><a href="#">Sub Menu 2.3</a>
<ul>
<li><a href="#">Sub-Sub Menu 2.3.1</a></li>
<li><a href="#">Sub Menu 2.3.2</a></li>
<li><a href="#">Sub Menu 2.3.</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 2.4</a></li>
<li><a href="#">Sub Menu 2.5</a></li>
<li><a href="#">Sub Menu, Some Sample Text 2.6</a></li>
<li><a href="#">Sub Menu, Sample Text 2.7</a></li>
</ul>
</li>
<li class="menu"><a href="#">Main Menu 3</a>
<ul class="submenu">
<li><a href="#">Sub Menu 3.1</a></li>
<li><a href="#">Sub Menu 3.2</a></li>
<li><a href="#">Sub Menu 3.3</a></li>
<li><a href="#">Sub Menu 3.5</a></li>
<li><a href="#">Sub Menu 3.6</a></li>
<li><a href="#">Sub Menu 3.7</a></li>
</ul>
</li>
<li class="menu"><a href="#">Main Menu 4</a>
<ul class="submenu">
<li><a href="#">Sub Menu 4.1</a></li>
<li><a href="#">Sub Menu 4.2</a></li>
<li><a href="#">Sub Menu Sample Text 4.3</a></li>
<li><a href="#">Sub Menu 4.4</a></li>
<li><a href="#">Sub Menu 4.5</a></li>
<li><a href="#">Sub Menu 4.6</a></li>
<li><a href="#">Sub Menu 4.7</a></li>
<li><a href="#">Sub Menu 4.8</a></li>
</ul>
</li>
<li class="menu"><a href="#">Menu 5</a></li>
<li class="menu"><a href="#">Menu 6</a></li>
<li class="menu"><a href="#">Contact</a></li>
</ul> <!-- /#menu -->
<!-- END: menu -->
</body>
</html>
CSS
@charset "utf-8";
#nav {
background-color: #000;
position: relative;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.975em;
text-align: left;
display: block;
border: 1px dotted #cccccc;
padding: 0;
margin: 0;
}
#nav a {
color: #fff;
text-decoration: none;
}
#nav li {
color: #fff;
text-align: left;
width: 110px;
border: 1px solid #CCCCCC;
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
}
/*Sub menu */
#nav li ul {
color: navy;
text-align: left;
list-style-type: none;
width: 200px;
border: 1px solid #000;
padding: 0;
margin: 0;
display: none;
position: absolute;
background-color: #990000;
}
#nav li ul a {
display: inline-block;
}
#nav li:hover ul {
visibility: visible;
display: block;
background-color: #E6B800;
}
#nav li:hover ul li {
background-color: #E6B800;
}
/*Sub-sub menu */
#nav li ul li ul li a {
display: none;
}
#nav li ul li ul li:hover {
visibility: visible;
display: block;
background-color: #E6B800;
}
#nav li ul li ul li:hover ul li {
background-color: #E6B800;
}
'@ faust'なぜ浮動小数点を避けたいのですか？...私はCSSを学んでいるので、浮動小数点は本当に頭痛です。_ _ <私をばかだと呼んでいますが、今、私にもっと論理的なものを使って作業してください。 -Floatsは時にはオブジェクトを配置して混乱させることがありますが、私はそれを望んでいません> _ <。好奇心の中で、あなたのフロート解決策は何ですか？ – Omar