0
これは基本的なものである必要がありますが、新しいCSSメンバーのすべてではありません。クイックワンドロップダウンメニューを同じリンクにドロップしないでください。同じ場所に垂直に降ろして縦にならないようにしたい。誰でも？リンク上にドロップダウンメニューを垂直方向にドロップ
.nav-container {
float: center;
width: 100%;
padding-bottom: 0;
margin-bottom: 11px;
}
.navigation-menu {
padding: 0;
float: center;
clear: both;
font-size: 12px
margin-bottom: 0;
}
.navigation-menu > li {
margin-right: 3px;
margin: 100px auto;
line-height:20px;
max-width:860px;
display: inline;
}
.navigation-menu li {
list-style-type: none;
}
.navigation-menu li a {
background-color: #ffffff;
display:inline-block;
padding: 10px 20px;
color: #696969;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
.navigation-menu li.active a {
background-color: purple;
color:#fff;
}
.navigation-menu li ul {
display: none;
}
.navigation-menu ul li a{
padding:10px 20px;
}
#main {
clear: left;
}
.navigation-menu li:hover ul {
display: inline-block;
position: absolute;
padding:5px;
}
.navigation-menu li ul li a:hover{
background-color: black;
color: white;
display: block;
}
.navigation-menu li a:hover{
background-color:black;
color: white;
}
.navigation-menu li a:active {
background-color: purple;
color:#fff;
}
.navigation-menuul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}<div class="nav-container">
<ul class="navigation-menu">
<li><a href='#' >Home</a></li>
<li class="active"><a href='#' >C2B Payments</a> </li>
<li><a href='#' >C2B SMS</a>
<ul>
<li><a href="#"> C2B SMS</a></li>
<li><a href="#"> Send SMS</a></li>
<li><a href="#"> Campaign SMS</a></li>
</ul>
</li>
</ul>
</div>
の結果おかげでうまくいきました –