Javascript 单击CSS创建下拉菜单

我需要建立一个有5个选项的菜单，点击一个新的子菜单就会出现。我完全不知道怎么做

/**导航*/
导航{
边框：1px纯红；
浮动：左；
右边距：35px；
最小高度：280px；
}
李海军{
文字装饰：无；
字体大小：正常；
颜色：红色；
列表样式：无；
}
/**内容*/
#部分{
背景色：；
边框：1px实心；
字体：普通12px Helvetica，Arial，无衬线；
左边距：180像素；
}
.clearfix:之前，
.clearfix:之后{
内容：“；
显示：表格；
}
.clearfix:之后{
明确：两者皆有；
}

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

---

如果你对任何东西都不熟悉，那么你应该找一些javascript教程（不要使用W3Schools，到别处找），然后再找一些jQuery教程，因为jQuery简化了这些任务。

有许多框架可以根据你的需要与好看的菜单一起使用，更不用说它们支持所有设备了（平板电脑、手机和个人电脑）

例如，在twitter引导框架中，您需要的正是它，请查看本教程：

阅读整个导航部分，最后他们通过下拉菜单讨论导航，了解更多选项。

---

本教程的菜单本身是使用Twitter引导框架构建的。

CSS没有点击处理程序。因此，不可能使用标准CSS。您可以使用称为复选框hack的东西，但在我看来，它有点笨重，在像use ca这样的导航菜单中使用会很尴尬基于这个原因，我建议使用jQuery或Javascript…下面是一个使用jQuery的简单解决方案

基本上，我们从一开始就使用

display:none；

隐藏子导航；然后，使用jQuery，当单击“.parent”时，我们使用

display:block；

将子导航元素（嵌套的UL）切换为“.visible”，使其显示。再次单击时，它会随着类的删除而消失

请注意，要使其工作，作为“子导航”的每个嵌套的

必须具有

.sub-nav

类及其父元素（即

）必须具有

.parent

类。此外，由于使用jQuery，您需要将jQuery库连接到您的站点。您可以通过自己托管并像通常一样链接它来实现这一点，也可以从（推荐）链接它

$（文档）.ready（函数（）{
$（'.parent'）。单击（函数（）{
$（'.sub-nav'）.toggleClass（'visible'）；
});
})；

#导航ul.sub-nav{
显示：无；
}
#可见导航{
显示：块；
}

家
关于

约翰尼
朱莉
杰米


接触

事实上，有可能使用复选框黑客将其用于纯CSS和浏览器元素行为，但是在撰写本文时，它正在推动CSS应该做的事情与CSS可以做的事情。它还可能导致一些非常糟糕的语义代码（毕竟，这是有原因的，通常被称为复选框HACK）

话虽如此，如果你只需要现代浏览器，给别人有限的功能，你就可以使用它。我自己在一个单独的chrome项目的生产代码中使用过它，玩起来很有趣

这里有一个链接可以阅读更多关于它的内容：

---

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

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

演示：

您需要输入和标签，如果您只想使用css

如果希望设置动画，您可以将过渡：所有1轻松输入输出；添加到子菜单中

/**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;
}

加价

    <div class="clearfix"></div>
<nav>
    <input id="Portfolio" type="checkbox" name="menu" hidden>
    <ul>
        <li><a href="index.html" accesskey="1"> Home </a> </li>
        <li><label for="Portfolio"><a accesskey="2"> Portfolio </a></label> </li>

        <ul id=submenu type="list">
              <li><a href="Commercial.html">Commercial</a> </li>
              <li><a href="Residential.html">Residential</a> </li>
              <li><a href="heritage.html">Heritage</a> </li>
              <li><a href="Rennovations.html">Rennovations</a> </li>
        </ul>

        <li><a href="services.html" accesskey="3"> Services </a> </li>
        <li><a href="aboutus.html" accesskey="4"> About Us </a> </li>
        <li><a href="contactus.html" accesskey="5"> Contact Us </a> </li>
     </ul>
</nav>

我当然迟到了，但是：

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

使用复选框

样本：

ul{
显示：无；
}
#复选框{
不透明度：0；
}
#复选框：选中+ul{
显示：块；
}

下拉菜单

除了前面提到的

复选框之外，您还可以使用按钮作为菜单项，并使用
：focus
状态显示下拉菜单。这样做的一个好处是，如果您在菜单外单击，菜单将关闭。一些HTML元素在单击时不会自然获得焦点；对于那些，您可以添加他使用“tabindex”属性来让他们获得焦点。
ul{
列表样式：无；
}
.菜单>李{
浮动：左；
}
.菜单按钮{
边界：0；
背景：透明；
光标：指针；
}
.菜单按钮：悬停，
.菜单按钮：焦点{
大纲：0；
文字装饰：下划线；
}
.子菜单{
显示：无；
位置：绝对位置；
填充：10px；
}
.菜单按钮：焦点+.子菜单，
.子菜单：悬停{
显示：块；