[英]Change Menu hover to click/active CSS
我試圖將菜單從懸停更改為單擊,但是如果我單擊菜單,子菜單也會關閉得非常快,我想我需要一個用於onclick和切換的JavaScript,但不知道該怎么做。 請幫助我是新手
/* menu */
#menu{ margin:0px 0px; margin-top:67px; margin-left:90px; list-style:none; color:#fff; line-height:30px; display:inline-block; float:left; height:-100px; width:1000px; }
#menu1{ margin:0px 0px; margin-top:auto; margin-left:-50px; list-style:none; color:#fff; line-height:30px; display:inline-block; float:left; height:auto; width:95px; }
#menu a { color:#000; text-decoration:none; }
#menu > li {background:#fff none repeat scroll 0 0; cursor:pointer; float:left; position:relative;padding:0px 10px; z-index:999 !important;}
#menu > li a:hover {color:#B0D730;}
#menu .logo {background:transparent none repeat scroll 0% 0%; padding:0px; background-color:Transparent;}
/* sub-menus*/
#menu ul { padding:0px; margin:0px; display:block; display:inline;}
#menu li ul { position:absolute; left:-10px; top:0px; margin-top:30px; width:200px; line-height:16px; background-color:#FFF; color:#FFF; /* for IE */ display:none; }
#menu li:hover ul { display:block;}
#menu li ul li{ display:block; margin:5px 20px; padding: 5px 0px; border-top: dotted 1px #606060; list-style-type:none; }
#menu li ul li:first-child { border-top: none; }
#menu li ul li a { display:block; color:#0395CC; }
#menu li ul li a:hover { color:#7FCDFE; }
/* main submenu */
#menu #main { left:0px; top:-20px; padding-top:20px; background-color:#FFF; color:#fff; z-index:999 !important;}
在HTML代碼中,可以使Javascript操作在單擊時發生:
<p onclick="clickedText()">Click Me!</p>
必要的Javascript代碼為:
var clickedText = function() {
//Insert Code Here That's On Click
}
要通過id訪問元素,請使用以下Javascript代碼:
var element = document.getElementById("id");
然后,您可以使用:
element.style.display = "none";
如果關閉太快,而您正在使用display: none;
,這是因為您要告訴瀏覽器在此確切時間內不顯示任何內容。
您的CSS代碼告訴瀏覽器不顯示子菜單。
這是您的HTML文件樣本派上用場的地方。 您正在告訴瀏覽器以下內容:
#menu li:hover ul { /*Do stuff*/ }
這意味着它選擇了所有ul
在一個懸停li
是在 #menu
。
我認為CSS選擇器參考將對您有很大幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.