我是 html 的新手,我需要为我的大学作业创建一个基本的网站,但我想在每个人都在做的事情上更进一步,而不是创建一个基本的导航菜单,我决定创建一些更有趣的东西有趣的是,一个带有不断变化的颜色和过渡效果的下拉导航菜单(这里是问题所在)- 但是当我将鼠标悬停在菜单上时,列表不会出现。这是我该部分的 html/css 代码:
<ul id="navmenu">
<li><a href="#">Menu</a></li>
<ul>
<li><a href="#">Education</a></li>
<li><a href="#">Hobbies</a></li>
<li><a href="#">Interests</a></li>
</ul>
</ul>
ul
{
list-style-type: none;
}
#navmenu a {
text-decleration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: ;
border: 1px solid #CCC;
border-radius: 5px;
font-family: Magneto;
font-size: 20px;
color: ffffff;
transition: ease-in all 400ms;
-moz-transition: ease-in all 300ms;
-webkit-transition: ease-in all 300ms;
-o-transition: ease-in all 300ms;
}
#navmenu ul {
display: none;
}
#navmenu li:hover ul {
display: block;
}
#navmenu li:hover > a {
background-color: #535ffb;
transition: ease-in all 300ms;
-moz-transition: ease-in all 300ms;
-webkit-transition: ease-in all 300ms;
-o-transition: ease-in all 300ms;
position: relative;
left: 10px;
}
#navmenu a {
margin-top: 3px;
}
最佳答案
可能是因为你的第二个 ul 没有嵌套在菜单项下。试试这个:
ul {
list-style-type: none;
}
#navmenu a {
text-decleration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: ;
border: 1px solid #CCC;
border-radius: 5px;
font-family: Magneto;
font-size: 20px;
color: ffffff;
transition: ease-in all 400ms;
-moz-transition: ease-in all 300ms;
-webkit-transition: ease-in all 300ms;
-o-transition: ease-in all 300ms;
}
#navmenu ul {
display: none;
}
#navmenu li:hover ul {
display: block;
}
#navmenu li:hover > a {
background-color: #535ffb;
transition: ease-in all 300ms;
-moz-transition: ease-in all 300ms;
-webkit-transition: ease-in all 300ms;
-o-transition: ease-in all 300ms;
position: relative;
left: 10px;
}
#navmenu a {
margin-top: 3px;
}
<ul id="navmenu">
<li>
<a href="#">Menu</a>
<ul>
<li><a href="#">Education</a>
</li>
<li><a href="#">Hobbies</a>
</li>
<li><a href="#">Interests</a>
</li>
</ul>
</li>
</ul>
关于html - 悬停 ul 显示 block 问题,html 4 notepad++,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26706710/