1
여러 개의 하위 메뉴가있는 메뉴를 만들었습니다. 나는 원래 메뉴에서 부 메뉴로 그리고 마지막으로 부 메뉴로 수평 적으로 서브 메뉴 드롭 다운을 만드는 방법을 찾고 있었다. (나는 우연히 얻을 수있다. 그러나 나는 모든 것을 망쳐 놓고 내 수직 서브 메뉴가있는 원래 수평 메뉴). 나는 인라인 블록, 정적 및 블록으로 변경하려고했지만 작동하도록 강요 할 수는 없습니다. 더 쉬운 방법이 있습니까? 내가 뭘 놓치고 있니?여러 서브 메뉴가있는 가로 메뉴
/* Navigation Bar Menu */
nav {
color: #F00;
min-width: 100%;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display: inline-block;
float: none;
white-space: nowrap;
}
nav a {
display: block;
padding: 0 10px;
color: #F00;
font-size: 20px;
line-height: 30px;
text-decoration: none;
}
nav a:hover {
color: #FFF;
background-color: #CCC;
transition: all .3s ease;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
}
nav ul li:hover>ul {
display: inherit;
transition: all .3s ease;
}
nav ul ul li {
min-width: 170px;
display: list-item;
position: relative;
}
nav ul ul ul {
position: absolute;
top: 0;
left: 100%;
}<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a>
<ul>
<li><a href="aboutus.html">Our Team</a></li>
</ul>
</li>
<li><a href="services.html">Services</a>
<ul>
<li><a href="cardio.html">Cardiovascular</a>
<ul>
<li><a href="perfusion.html">Perfusion</a></li>
<li><a href="ptca.html">PTCA & IABP</a></li>
<li><a href="ecmo.html">ECMO</a></li>
<li><a href="tavr.html">TAVR</a></li>
</ul>
</li>
<li><a href="bloodmanagement.html">Blood Management</a>
<ul>
<li><a href="autotransfusion.html">Autotransfusion</a></li>
<li><a href="plateletgel.html">Platelet Gel</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="products.html">Products</a>
<ul>
<li><a href="disposables.html">Disposables</a></li>
<li><a href="products.html">Featured Products</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a>
<ul>
<li><a href="inquiries.html">Employment Inquiries</a></li>
<li><a href="contactform.html">Contact</a></li>
</ul>
</li>
</ul>
</nav>