html – 悬停后CSS菜单消失_html-js-css

概述我正在学习CSS并且我创建了一个垂直菜单,将鼠标悬停在第一个菜单项上,显示子菜单.但我的问题是,只要我将鼠标移动到子菜单,它就会消失.我如何才能使它保持在那里直到我点击其中一个子菜单项？请帮忙. 已经搜索过很多例子但没有类似的例子.我是css的新手,我不确定我的方法是否适合此菜单设置要求.请指教. @charset "utf-8";.navLeft { width: 25%; margin 我正在学习CSS并且我创建了一个垂直菜单,将鼠标悬停在第一个菜单项上,显示子菜单.但我的问题是,只要我将鼠标移动到子菜单,它就会消失.我如何才能使它保持在那里直到我点击其中一个子菜单项？请帮忙.

已经搜索过很多例子但没有类似的例子.我是CSS的新手,我不确定我的方法是否适合此菜单设置要求.请指教.

@charset "utf-8";.navleft {	wIDth: 25%;	margin-top: 0%;	top: auto;	display: inline;	List-style-type: none;	margin-left: 5%;	position: relative;	z-index: 0;	/* [Disabled]clear: none; */}.navleft ul li {	List-style-type: none;	wIDth: 6em;	height: 2em;	/* [Disabled]List-style-position: insIDe; */	color: #F14E23;	text-align: center;	background-color: #FFFFFF;	border: 0.5em solID #000000;	margin-bottom: -0.5em;	Font-family: alfa-slab-one;	Font-style: normal;	Font-weight: 400;	padding-top: 2em;	top: auto;	vertical-align: mIDdle;	padding-bottom: 2em;	-webkit-Transition: all 0.1s linear 0s;	-o-Transition: all 0.1s linear 0s;	Transition: all 0.1s linear 0s;	position: relative;	margin-left: -0.5em;}.navleft ul li:hover {	background-color: #F14E23;	color: #FFFFFF;	List-style-type: none;	position: relative;}.navleft ul .about {	float: left;	-webkit-Transition: all .1s linear 0s;	-o-Transition: all .1s linear 0s;	Transition: all .1s linear 0s;}.navleft ul ul li {	float: left;}.navleft ul .projects {	clear: left;}.navleft ul ul {	display: none;}.navleft ul .about:hover ~ ul{	display: block;}

<!DOCTYPE HTML><HTML><head><Meta charset="utf-8"><Title>STORY</Title><link href="CSS/styles.CSS" rel="stylesheet" type="text/CSS"></head><body><section ><nav >    <ul>      <li >ABOUT</li>      <ul>          <li >BEGINNING</li>          <li >Mission<br>                  <br>                  Vision</li>          <li >People</li>      </ul>      <li >PROJECTS</li>      <li >GET<br>          INVolVED</li>      <li >RECORDS</li>      <li >DONATE</li>    </ul>              </nav></section></body></HTML>

解决方法请参考这个小提琴： http://jsfiddle.net/zt8ffu11/

HTML：

<section ><nav >    <ul>      <li >ABOUT      <ul>          <li >BEGINNING</li>          <li >Mission<br>                  <br>                  Vision</li>          <li >People</li>      </ul>        </li>            <li >PROJECTS</li>      <li >GET<br>          INVolVED</li>      <li >RECORDS</li>      <li >DONATE</li>    </ul>  </nav></section>

CSS：
    .navleft {
        宽度：25％;
        margin-top：0％;
        顶部：汽车;
        显示：内联;
        List-style-type：none;
        margin-left：5％;
        位置：相对;
        z-index：0;
        / * [Disabled] clear：none; * /
    }

.navleft ul li {    List-style-type: none;    wIDth: 6em;    height: 2em;    /* [Disabled]List-style-position: insIDe; */    color: #F14E23;    text-align: center;    background-color: #FFFFFF;    border: 0.5em solID #000000;    margin-bottom: -0.5em;    Font-family: alfa-slab-one;    Font-style: normal;    Font-weight: 400;    padding-top: 2em;    top: auto;    vertical-align: mIDdle;    padding-bottom: 2em;    -webkit-Transition: all 0.1s linear 0s;    -o-Transition: all 0.1s linear 0s;    Transition: all 0.1s linear 0s;    position: relative;    margin-left: -0.5em;}.navleft ul li:hover {    background-color: #F14E23;    color: #FFFFFF;    List-style-type: none;    position: relative;}.navleft ul .about {    float: left;    -webkit-Transition: all .1s linear 0s;    -o-Transition: all .1s linear 0s;    Transition: all .1s linear 0s;}.navleft ul ul li {    float: left;}.navleft ul .projects {    clear: left;}.navleft ul ul {    display: none;}.navleft ul .about:hover  ul{    display: block;}

列表结构检查是问题Proper way to make HTML nested list?

总结

以上是内存溢出为你收集整理的html – 悬停后CSS菜单消失全部内容，希望文章能够帮你解决html – 悬停后CSS菜单消失所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1055630.html

html – 悬停后CSS菜单消失

发表评论

评论列表（0条）