十分简单的CSS+HTML的下拉菜单_用html和css编写一个又可以下拉框又可以输入标签-CSDN博客

本文链接：https://blog.csdn.net/minghuajim/article/details/8971451

前端开发的框架越来越多，用起来也十分的方便，但是作为初涉前端的求职者和学习者，我们也应注重基础。所以，就简单地来练练手，先以CSS+html实现，其它待续···

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Kospot">
	<meta name="description" content="test">
<style>
   li {
    list-style-type: none;
   }
   ul li{
   	float: left;
   	width: 150px;
   }
   ul li ul{
   	visibility: hidden;
   }
  ul li:hover ul{
     visibility: visible;
     background-color: #11aaff;
     width: 150px;
  }
  ul li ul li:hover{
  	background-color: #00ff33;
  	width: 150px;
  }
</style>
</head>
<body>
    <div>
    	<ul>
    		<li><a href="#">one content</a>
    		<ul>
    			<li>one-1 content</li>
    			<li>one-2 content</li>
    			<li>one-3 content</li>
    		</ul>
    		</li>
    		<li><a href="#">two content</a>
    		<ul>
    			<li>two-1 content</li>
    			<li>two-2 content</li>
    			<li>two-3 content</li>
    			<li>two-4 content</li>
    		</ul>
    		</li>
    		<li><a href="#">three content</a>
    		<ul>
    			<li>three-1 content</li>
    			<li>three-2 content</li>
    			<li>three-3 content</li>
    		</ul>
    		</li>
    	</ul>
    </div>
	</body>
</html>

下拉菜单，主要的是什么时候隐藏，什么时候显示，把握好这个，其它的效果可以相继往上面添加。

下面采用js+CSS实现：其实也只是借助js控制在选中某一个标签时，关联它的子标签而已。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional1.dtd">
<html>
<head>
	<meta name="author" content="Kospot">
	<meta name="description" content="test2">
	<style>
     body{
     	background-color: white;
     	color: black;
     }
     div{
     	margin-bottom: 10px;
     	float: left;
     	width:120px;
     }
     ul.menu{
     	display: none;
     	list-style-type: none;
     	margin-top:5px;
     }
     a.menuLink{
        font-size: 20px;
        font-weight: bold;
     }
     li:hover{
     	background-color: #ff1122;
     }
	</style>
	<script type="text/javascript">
       window.οnlοad=init;
       function init(){
       	var allLinks = document.getElementsByTagName("a");
       	for(var i=0;i<allLinks.length;i++){
       		if(allLinks[i].className.indexOf("menuLink")>-1){
       			allLinks[i].onclick = toggleMenu;     			
       		}
       	}
       }

       function toggleMenu(){
       	var startMenu = this.href.lastIndexOf("/")+1;
       	var stopMenu = this.href.lastIndexOf(".");
       	var thisMenuName = this.href.substring(startMenu,stopMenu);
       	var thisMenu = document.getElementById(thisMenuName).style;
       	if(thisMenu.display == "block"){
       		thisMenu.display = "none";
       	}else{
       		thisMenu.display = "block";
       		thisMenu.class= 'lbg';
       	}
       	return false;
       }
	</script>
</head>
<body>
	<div>
		<a href="menu1.html" class="menuLink">mean1
		<ul class="menu" id="menu1">
			<li><a href="pg1.html" class="menuLink">test2-1</a></li>
			<li><a href="pg2.html" class="menuLink">test2-2</a></li>
			<li><a href="pg3.html" class="menuLink">test2-3</a></li>
		</ul>
	    </a>
	</div>
	<div>
		<a href="menu2.html" class="menuLink">mean2
		<ul class="menu" id="menu2">
			<li><a href="pg4.html" class="menuLink">test2-4</a></li>
			<li><a href="pg5.html" class="menuLink">test2-5</a></li>
			<li><a href="pg6.html" class="menuLink">test2-6</a></li>
			<li><a href="pg7.html" class="menuLink">test2-7</a></li>
		</ul>
		</a>
	</div>
	<div>
		<a href="menu3.html" class="menuLink">mean3
		<ul class="menu" id="menu3">
			<li><a href="pg8.html" class="menuLink">test2-8</a></li>
			<li><a href="pg9.html" class="menuLink">test2-9</a></li>
		</ul>
		</a>
	</div>
</body>
</html>