移动光标时,如何直接显示CSS下拉菜单列表?

时间:2017-11-07 03:59:02

标签: html css

我试图改变属性Cursor:pointer;自动但是当我点击它时仍然打开...

菜单列表CSS

#simplify-two{font-size:0;white-space:nowrap;padding:0;margin-right:20px;float:right}
#simplify-two ul.menus{height:auto;overflow:hidden;position:absolute;z-index:99;display:none}
#simplify-two a{display:block;text-transform:uppercase;height:75px;line-height:75px;color:#fff;font-size:13px;overflow:hidden;margin:0 20px 0 0}
#simplify-two ul > li a i {color:rgba(255,255,255,.5)}
#simplify-two ul{margin:0 auto;padding:0;float:right}
#simplify-two ul li{position:relative;margin:0;list-style:none}
#simplify-two ul > li {float:right;}
#simplify-two input {display:none;margin:0;padding:0;width:80px;height:45px;opacity:0;cursor:pointer;}
#simplify-two label {display:none;width:55px;height:48px;line-height:48px;text-align:center}
#simplify-two label span {font-size:16px;position:absolute;right:55px}
#simplify-two ul.menus li {display:block;width:100%;text-transform:none;text-shadow:none;}
#simplify-two ul.menus a {color:#fff;line-height:55px}
#simplify-two li a:hover,#simplify-two ul.menus a:hover {color:#ffc351;}
#simplify-two li ul{display:none;background:#fff;margin:0;height:auto;position:absolute;top:99%;right:0;z-index:12;box-shadow:0 3px 10px 1px rgba(0,0,0,0.14);}
#simplify-two li:hover ul.menus,#simplify-two li:hover > ul{visibility:visible;opacity:1;}
#simplify-two li li{display:block;float:none;font-size:13px;height:auto;clear:both;margin-right:0;line-height:36px;border-bottom:1px solid rgba(0,0,0,0.05)}
#simplify-two li li:last-child {border:0;}
#simplify-two li ul ul {right:100%;top:0}
#simplify-two li li > a{background:#fff;color:#666;display:block;margin:0;text-decoration:none;text-transform:none;min-width:180px;height:36px;line-height:36px;padding:0 13px;font-size:11px;border:0;;border-right:3px solid transparent;margin-top:0}
#simplify-two li li a:hover{background:#fdda97;color:#000}

HEADER CSS

#header{background:#2c4584;display:block;margin:0 auto;padding:0;word-wrap:break-word;width:100%;position:fixed;z-index:99;height:70px;line-height:70px;-webkit-transform:translateZ(0);transform:translateZ(0)}
#homlogo {float:right;margin:-2px 0 0 0;width:60px;height:60px;}
#header .title{font-size:200%;margin:8px 0 0 0;padding:0;display:inline-block;width:100%;font-weight:400}
#header .title a{color:#fff;font-weight:bold;}
#header .title a:hover {color:#fff;}
#header p.description{display:none;font-size:90%;margin:5px 0 0 0;line-height:normal;}
.header img {display:block;height:auto;}
#headerdua {float:right;margin:5px 20px 0 0;}

1 个答案:

答案 0 :(得分:1)

你好兄弟,你没有写你的HTML,所以我无法帮助你的代码,但我已经自己的小提琴悬停下拉列表,你可以检查它

.dropdown-content {
display: none;

}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown:hover .dropdown-content {
display: block;
}



[fiddle][1]  [1]: https://jsfiddle.net/2s8a0n6j/