CSS菜单没有javascript [英] CSS Menu without javascript

问题描述

任何人都可以参考，或者可以完全根据
CSS 和创建一个菜单，而不是一个单独的javascript ？

需求是一个下拉菜单，可以有许多子菜单

如果这样创建的任何东西将跨浏览器兼容？

$ b

感谢您所有的输入一个怀疑

这可以实现，而不是使用 ul li

说 div span 组合可以帮助我实现一个不会改变我当前html结构的菜单！

解决方案

窍门是：hover 伪类。 p>

 < ul class =menu> 
< li> 
< a href =...>菜单项1< / a> 
< ul class =submenu> 
< li>< a href =...>⼦菜单1< / a>< / li> 
< li>< a href =...>⼦菜单2< / a>< / li> 
< / ul> 
< / li> 
< li> 
< a href =...>菜单项2< / a> 
< ul class =submenu> 
< li>< a href =...>⼦菜单3< / a>< / li> 
< li>< a href =...>⼦菜单4< / a>< / li> 
< / ul> 
< / li> 
< / ul> 
  

好吗？所以你的整个子菜单必须进入它对应的主菜单项的< li> 。然后对于CSS：

  .submenu {display：none; } 
 .menu> li：hover> .submenu {display：block; } 
  

做一些风格和工作。

编辑：对于另一层菜单，它非常简单。使用此CSS：

  .menu li> ul {display：none; } 
 .menu li：hover> ul {display：block;请注意，我已经替换了 .menu> li：hover    code>与 .menu li：hover 。这告诉浏览器找到主菜单下面的所有 li 元素（不只是立即后代），并在悬停时显示其子菜单。我也摆脱了使用子菜单类，因为它不是真的需要如果你是基于后代的CSS。这将允许您添加任意多个级别。
 
Can anybody give a reference or is it possible to create a menu entirely depending on 
CSS and not a single bit of javascript?

The Requirement is a dropdown menu, which can have many children ( submenu ).

Will anything if created like this will be cross browser compatible?

Any help on this topic will be appreciated!.

EDIT

Thanks for all your inputs one more doubt

Can this be implemented rather than using ul li

say div span combination as that may help me achieving a menu which won't change my current html structure!
解决方案
The trick is the :hover pseudo-class.
<ul class="menu">
  <li>
    <a href="...">Menu Item 1</a>
    <ul class="submenu">
      <li><a href="...">Submenu 1</a></li>
      <li><a href="...">Submenu 2</a></li>
    </ul>
  </li>
  <li>
    <a href="...">Menu Item 2</a>
    <ul class="submenu">
      <li><a href="...">Submenu 3</a></li>
      <li><a href="...">Submenu 4</a></li>
    </ul>
  </li>
</ul>
Ok? So your entire submenu has to go inside the <li> of the main menu item it corresponds to. Then for the CSS:
.submenu { display: none; }
.menu>li:hover>.submenu { display: block; }
Do a bit of styling, and job done.

Edit: For another layer of menus, it's really simple. Use this CSS:
.menu li>ul { display: none; }
.menu li:hover>ul { display: block; }
Note that I've replaced .menu>li:hover with .menu li:hover. That tells the browser to find all li elements below the main menu (not just immediate descendants) and show their submenu when hovering. I've also got rid of using the submenu class because it's not really needed if you're basing the CSS on descendants. This will let you add as many levels as you want.

                        
这篇关于CSS菜单没有javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！