HTML と CSS で作成された水平メニューがあります (プロジェクトは .NET Framework-asp と c# 上にあります)。しかし、サブメニュー項目が水平方向に整列し、レイアウトの残りの部分を混乱させ、望ましくないデザインに影響を与えるため、それは起こりません.
これはこれまでの私のコードです:
HTML:
<div id="menu">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About Us</a>
<ul class="firstLevel">
<li>
<a href="#">The Team</a>
</li>
<li>
<a href="#">History</a>
</li>
<li>
<a href="#">Vision</a>
</li>
</ul>
</li>
<li>
<a href="#">Products</a>
<ul class="firstLevel">
<li>
<a href="#">Cozy Couch</a>
</li>
<li><a href="#">Great Table</a>
</li>
<li>
<a href="#">Small Chair</a>
</li>
<li>
<a href="#">Shiny Shelf</a>
</li>
<li>
<a href="#">Invisible Nothing</a>
</li>
</ul>
</li>
<li>
<a href="#">Contact</a>
<ul class="firstLevel">
<li>
<a href="#">Online</a>
</li>
<li>
<a href="#">Right Here</a>
</li>
<li>
<a href="#">Somewhere Else</a>
</li>
</ul>
</li>
<li>
<a href="#">Account</a>
<ul class="firstLevel">
<li>
<a href="#">Login</a>
</li>
<li>
<a href="#">Register</a>
</li>
</ul>
</li>
</ul>
</div>
CSS:
#menu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#menu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#menu li ul {
position:relative;
}
#menu ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 10px;
background:#ddd;
color:#000;
text-decoration:none;
line-height:1.3em;
}
#menu ul li a:hover {
background:#369;
color:#fff;
}
#menu ul li a.active,
#menu ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}
li:hover ul {
display: block;
position: absolute;
}
これはそれが示すものです: