Change the HTML to this:
<li><a href="gioithieu.html" target="noidung">Giới thiệu</a>
<ul>
<li><a href="gioithieuchung.html">Giới thiệu chung</a></li>
<li><a href="cocautochuc.html">Cơ cấu tổ chức</a></li>
</ul>
</li>
Your selector implies that the ul (dropdown menu) is a direct child of the li due to using >, but instead it was a sibling, so it won’t work due to that. With this snippet, the ul will now be its child.
Besides, it isn’t valid HTML to put an ul inside an ul, and this way it is valid.
I have a code like this, I want hover work when I move mouse to <ul> <li> tag will drop down <ul> tag:
body {
background: hotpink;
}
.menu>ul>li {
display: inline-block;
position: relative;
}
.menu>ul>li>a {
display: inline-block;
text-decoration: none;
font-variant: small-caps;
font-size: larger;
color: white;
padding: 0 10px;
line-height: 40px;
}
.menu>li>a:hover {
color: yellow;
}
.menu>ul ul {
position: absolute;
display: none;
padding: 0px;
margin: 0px;
list-style: none;
border-radius: 3px;
width: 200px;
background-color: lightgray;
box-shadow: 0 0 2px green;
}
.menu>ul li:hover>ul {
display: block;
}
.menu>ul li:hover>ul {
display: block;
}
<nav class="menu">
<ul>
<li><a href="home.html" target="self">Trang chủ</a></li>
<li><a href="gioithieu.html" target="noidung">Giới thiệu</a></li>
<ul>
<li><a href="gioithieuchung.html">Giới thiệu chung</a></li>
<li><a href="cocautochuc.html">Cơ cấu tổ chức</a></li>
</ul>
<li><a href="tintuc.html" target="noidung">Tin tức</a></li>
<li><a href="lienhe.html" target="noidung">Liên hệ</a></li>
<li><a href="hoidap.html" target="noidung">Hỏi đáp</a></li>
</ul>
</nav>
I want when I move to gioithieu.html, it will show the ul below.
I had this but it’s not working.
Please help me. Thanks in advance.
No, because this HTML structure is invalid.
