如何制作悬停菜单栏？

如何在CSS中制作悬停菜单栏？所以，如果我把鼠标放在家中，那么会出现informatica，hobby和ik。如何制作悬停菜单栏？

<div class="menu"> 
    <ul id="menu-bar"> 
<nav> 
<li><a href="index.html">Home</a></li> 
<ul> 
    <li><a href="#">Informatica</a></li> 
    <li><a href="#">Hobby</a></li> 
    <li><a href="#">Ik</a></li> 
    </ul> 
</li> 
</nav> 
</div> 

     </div>

来源

2015-12-02 Ryon M

对不起@Ryon m我们将需要一点点更多信息关于你想要达到的目标，以便能够帮助你？你有一个例子吗？ – Aaron

另请注意，您的HTML稍微不正确。你已经关闭了父'li'两次......并没有关闭整个'ul'。 –

你可以这样做：

CSS

ul { 
    list-style: none; 
    margin: 0; 
} 

ul ul { 
    display: none; 
    padding: 0; 
    margin: 0; 
} 

ul li { 
    display: inline-block; 
    position: relative; 
} 

ul ul li { 
    display: block; 
} 

ul li:hover ul { 
    display: block; 
}

HTML

<div class="menu"> 
    <nav> 
    <ul id="menu-bar"> 
     <li><a href="index.html">Home</a> 
     <ul> 
      <li><a href="#">Informatica</a></li> 
      <li><a href="#">Hobby</a></li> 
      <li><a href="#">Ik</a></li> 
     </ul> 
     </li> 
    </ul> 
    </nav> 
</div>

DEMO HERE

来源

2015-12-02 11:36:42

只需使用这个CSS：

ul>li{ 
    display:none; 
} 

ul:hover li{ 
    display:block; 
}

Here is the JSFiddle demo

来源

2015-12-02 11:31:37

谢谢:)它的工作 –

很高兴我可以帮助:)标记为答案，所以我们可以关闭现在的问题:) –

尝试这可能有助于

<div class="menu"> 
<nav> 
<ul id="menu-bar"> 
<li><a href="index.html">Home</a> 
<ul> 
<li><a href="#">Informatica</a></li> 
<li><a href="#">Hobby</a></li> 
<li><a href="#">Ik</a></li> 
</ul> 
</li> 
</ul> 
</nav> 
</div>

，风格

<style> 
#menu-bar li ul 
{ 
display:none; 
} 
#menu-bar li:hover ul 
{ 
display:inline-block; 
position:absolute; 
} 
</style>

来源

2015-12-02 11:47:20

这是总是有用的发布演示（jsfiddle或codepen）链接在一起与您的代码:) –

如何制作悬停菜单栏？

回答

相关问题