单击CSS创建下拉菜单-CreatingDropDownMenuonclickCSS

10  

CSS does not have a click handler. For this reason it is impossible to do with standard CSS. You could use something called the checkbox hack, but in my humble opinion, it's a bit clunky and would be awkward to work with inside a navigation menu like your use-case requires. For this reason I would suggest jQuery or Javascript... Here is a rather simple solution using jQuery.

CSS没有点击处理程序。因此，使用标准CSS是不可能的。你可以使用一个叫做复选框hack的东西，但是在我的拙见中，它有点笨拙，并且在你的用例需要的导航菜单中工作会很尴尬。出于这个原因，我建议jQuery或Javascript ...这是一个使用jQuery的相当简单的解决方案。

Basically, we hide the sub-nav from the start using display: none; Then, using jQuery, when ".parent" is clicked we toggle a class ".visible" to the sub-nav element (the nested UL) with display: block; which makes it appear. When clicked again, it disappears as the class is removed.

基本上，我们使用display：none;从一开始就隐藏了子导航。然后，使用jQuery，当单击“.parent”时，我们使用display：block将一个类“.visible”切换到sub-nav元素（嵌套的UL）。这让它出现了。再次单击时，它会在删除类时消失。

Note that for this to work, every nested

which is a "sub-nav" MUST have the .sub-nav class, and it's parent element (the
• ) MUST have the .parent class. Also, since this uses jQuery, you will need to hook up a jQuery library to your site. You can do this by hosting it yourself and linking it like you normally would, or you can link it from google's library service (recommended).

  请注意，要使其工作，每个嵌套的

  （“子导航”）必须具有.sub-nav类，并且它的父元素（
  • ）必须具有.parent类。此外，由于这使用jQuery，您需要将jQuery库连接到您的站点。您可以通过自己托管并像平常一样链接它来完成此操作，或者您可以从谷歌的图书馆服务（推荐）链接它。

  • ）必须具有.parent类。此外，由于这使用了jQuery，您需要将jQuery的库连接到您的站点。您可以通过自己托管并像平常一样链接它来完成此操作，或者您可以从谷歌的图书馆服务（推荐）链接它。

  JSFiddle Demo

  JSFiddle演示

  $(document).ready(function() {
    $('.parent').click(function() {
      $('.sub-nav').toggleClass('visible');
    });
  });

  #nav ul.sub-nav {
    display: none;
  }
  
  #nav ul.visible {
    display: block;
  }

  
  
    
  Home
    
  About
      
  
        
  Johnny
        
  Julie
        
  Jamie
      
    
    
  Contact
  

11  

In addition to the already mentioned checkbox hack, you could also use a button as menu items, and use the :focus state to display the dropdown menu. A benefit over this is that the menu will close if you click outside of it. Some HTML elements do not naturally receive focus upon clicks; for those, you can add the "tabindex" attribute to allow them to gain focus.

除了已经提到的复选框hack之外，您还可以使用按钮作为菜单项，并使用：focus状态显示下拉菜单。这样做的一个好处是，如果你点击菜单，它就会关闭。一些HTML元素自然不会受到点击;对于那些，您可以添加“tabindex”属性，以允许他们获得焦点。

ul {
    list-style: none;
}

.menu > li {
    float: left;
}
.menu button {
    border: 0;
    background: transparent;
    cursor: pointer;
}
.menu button:hover,
.menu button:focus {
    outline: 0;
    text-decoration: underline;
}

.submenu {
    display: none;
    position: absolute;
    padding: 10px;
}
.menu button:focus + .submenu,
.submenu:hover {
    display: block;
}

    

        Home
        

            
Link
            
Link
            
Link
            
Link
            
Link
        
    
    
More
    
Info

3  

Of course I am late but:

我当然迟到了但是：

You can trigger a css click using a hack!!

您可以使用黑客触发css点击!!

Work with an checkbox!!

使用复选框!!

Sample:

样品：

      ul{
            display: none;
        }
        #checkbox{
            opacity: 0;
        }
        #checkbox:checked + ul {
            
            display: block;
        }

    

        Dropdown menu
                
        

            
Dropdown link 1
            
Dropdown link 2
        
    

You can use transitions to animate the show an hide effect :) This is just a very simple example!!

你可以使用过渡来为节目制作一个隐藏效果:)这只是一个非常简单的例子！

Mention: this is a CSS3 hack if you need borwser support for old browsers this is not working.

提及：这是一个CSS3 hack如果你需要borwser支持旧浏览器，这是行不通的。

1  

In fact, there is a possibility to get this working with pure CSS and browser element behaviour, using the checkbox hack, however at the time of writing this, it is pushing what SHOULD be done with CSS vs what COULD be done with CSS. Also It can cause some pretty terrible semantic code (after all there is a reason it is usually stated as the checkbox HACK).

事实上，使用复选框hack可以使用纯CSS和浏览器元素行为，但是在撰写本文时，它正在推动CSS应该完成的工作与使用CSS可以完成的工作。它也可能导致一些非常可怕的语义代码（毕竟有一个原因，它通常被称为复选框HACK）。

Having said that, you could use it if you only have requirements for modern browsers, giving limited functionality to others and I have myself used this in production code, on an isolated chrome only project and it is pretty fun to play with.

话虽如此，你可以使用它，如果你只需要现代浏览器，给别人提供有限的功能，我自己在生产代码中使用它，在一个孤立的镀铬项目上，玩起来很有趣。

Here is a link to read more on it:

这是一个链接，可以阅读更多内容：

http://css-tricks.com/the-checkbox-hack/

http://css-tricks.com/the-checkbox-hack/

But again to stress, like others have on here already, that functional behaviour should really be done via Javascript. Unless you actually want a hover based menu solution then that is a different question all together!

但再次强调，就像其他人已经在这里一样，功能行为应该通过Javascript完成。除非你真的想要一个基于悬停的菜单解决方案，否则这是一个不同的问题！

0  

You will need to do this using Javascript and registering a click event handler to perform your action.

您需要使用Javascript并注册click事件处理程序来执行此操作。

If you're new to everything then you should look for some Javascript tutorials (don't use W3Schools, look elsewhere) and then look at some jQuery tutorials as jQuery simplifies tasks like these.

如果你是新手，那么你应该寻找一些Javascript教程（不要使用W3Schools，看看其他地方），然后看一些jQuery教程，因为jQuery简化了这些任务。

0  

There are many frameworks that you can use with good looking menus for your needs, not to mention they support all devices (tablets, phones and PCs).

有许多框架可以用于满足您需求的漂亮菜单，更不用说它们支持所有设备（平板电脑，手机和PC）。

For example in the twitter bootstrap framework there is exactly what you need, check this tutorial: Twitter bootstrap - Navs

例如，在twitter bootstrap框架中，您确实需要它，请查看本教程：Twitter bootstrap - Navs

Read the whole Nav section, at the end they talk about Nav with dropdown for more options. The menu of the tutorial itself is built with the Twitter bootstrap framework.

阅读整个导航部分，最后他们谈论导航下拉导航以获取更多选项。教程本身的菜单是使用Twitter引导程序框架构建的。

0  

a pure css solution to your problem looks like this

你的问题的纯css解决方案看起来像这样

Demo: http://jsfiddle.net/HyGZf/1/

演示：http：//jsfiddle.net/HyGZf/1/

you need input and label and you have to remove the href on portfolio if you only want to use css

如果你只想使用css，你需要输入和标签，你必须删除投资组合上的href

you can add transition: all 1s ease-in-out; to the submenu if you want it to be animate

你可以添加转换：所有1s轻松进出;如果你想要它是动画的子菜单

/**Navigation */
nav{
    border: 1px solid red ;
    float: left;
    margin-right:35px;
    min-height:280px;
    }


nav li{
text-decoration:none;
font-weight:normal;
color:red;
list-style:none;
display:block;
width:100%;
}   
/**Content */
#section{
    background-color: ;
    border: 1px solid;
    font: normal 12px Helvetica, Arial, sans-serif; 
    margin-left:180px;
 }



 .clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;

}
#Portfolio:checked +ul ul#submenu{
 height:80px;   
}
#submenu{
    overflow:hidden;
    height:0px;
    margin:0;
}
a[accesskey="2"]{
    color:blue;
    cursor:pointer;
    text-decoration:underline;
}

the markup

标记

0  

 $('#open').on('click', function(e) {
   simple_showpopup("popup", e);
 });

 function simple_showpopup(id, evt) {
   var _pnl = $("#" + id);
   _pnl.show();
   _pnl.css({
     "left": evt.pageX - ($("#" + id).width() / 2),
     "top": (evt.pageY + 10)
   });

   $(document).on("mouseup", function(e) {
     var popup = $("#" + id);
     if (!popup.is(e.target) && popup.has(e.target).length == 0) {
       popup.hide();
       $(this).off(e);
     }
   });
 }

 $("#popup").hide();

.defa-context-panel {
  border: 1px solid black;
  position: absolute;
  min-width: 200px;
  min-height: 150px;
  background-color: #f8f8f8;
  border: solid 1px #f2f2f2;
  border-radius: 10px;
  padding: 5px;
}

       Open    Click here

Content
  
DIV inside