css로만 내비게이션 표시줄 내리기

주로 사용하는 지식은 css의hover위조류입니다. 마우스가 부모 내비게이션 표시줄에 있는 리 요소를 눌렀을 때 하위 메뉴 아래의ul의display 속성을 수정하면hover의 효과를 실현할 수 있습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Drop Down Navigation with CSS Only</title>
<style>
	body, div, ul, li { margin: 0; padding: 0; } 
	#header { 
		min-width: 800px; 
		height: 150px; 
	} 
  #nav {  
		width: 100%; 
		background-color: green; 
		float: left; 
	}
	#nav li { 
		list-style: none;
		float: left; 
		width: 120px; 
		height: 30px; 
		line-height: 30px; 
		text-align: center;
	} 
	#nav li a { 
		color: white; 
		text-decoration: none; 
 		display: block; 
	} 
	#nav li a:hover { 
		background-color: #066; 
	} 

	#nav li ul { 
		position: absolute;  
		display: none; 
	} 
	
	#nav li:hover ul { 
		display: block; 
	} 

		
	#nav li ul li { 
		float: none; 
		display: inline; 
	}
	#nav li ul li a { 
		width: 118px; 
		position: relative; 
		border-left: 1px solid black; 
		border-right: 1px solid black; 
		border-bottom: 1px solid black; 
		background: green; 
		color: #fff; 
	}
	#nav li ul li a:hover { 
		background: #066; 
		color: #000; 
	}

		
</style>
<!--[if lte IE 6]>
<style>  
body {behavior: url("csshover3.htc");}  
</style>  
<![endif]--> 
</head>

<body id="about">
  <div id="header">
    <ul id="nav">
      <li class="home"><a href="#">Home</a></li>
      <li class="tutorials"><a href="#">Tutorials</a>
        <ul>
          <li><a href="#">Sub Menu 1</a></li>
          <li><a href="#">Sub Menu 2</a></li>
          <li><a href="#">Sub Menu 3</a></li>
        </ul>
      </li>
    </ul><!-- nav --> 
  </div><!-- header -->     

</body>
</html>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

antd vue 새로 고침 현재 페이지 루트 유지, 선택 메뉴 유지,menu 선택 작업 유지

쓸데없는 말은 하지 말고 코드를 올려라! 중점: 1,selectedkeys를 $route로 설정합니다.path 주소 2, a-menu-item의 키를 갈 주소로 설정 페이지 새로 고침, 성공! 추가 정보: vue 경...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

css로만 내비게이션 표시줄 내리기

좋은 웹페이지 즐겨찾기