Question

我对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; 
}

Answer 1

可能是因为您的第二个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>

hover ul display block issues，html 4 notepad ++

1 个答案: