전자상거래 사이트 분류 내비게이션 효과 - CSS 구현 (1) 1 레벨 메뉴
<title> title>
<style>
* { padding: 0px; margin: 0px; font-size: 14px; }
.menu { width: 216px; margin-left: 100px; border: 2px solid #E4393C; }
.title { height: 40px; line-height: 40px; background-color: #E4393C; padding-left: 20px; }
.title a { color: white; text-decoration: none; font-weight:bold; }
.title01 { height: 30px; line-height: 30px; padding-left: 10px;
background: url("images/2.png") no-repeat right center; z-index:3; } /* */
.title01 a { color: #313131; text-decoration: none; font-size: 13px; }
.title01 a:hover { text-decoration: underline; font-weight:bold; color: #E4393C; }
.title01:hover { border: 1px solid #ddd; border-right: none;
-webkit-box-shadow: 0 0 8px #ddd; /* */
-moz-box-shadow: 0 0 8px #ddd;
box-shadow: 0 0 8px #ddd; }
.title01:hover .show_menu { display: block; }
.title01:hover span { /* span */
width: 25px; height: 30px; background-color: #fff;
position: relative; z-index:10; float: right; right: -2px; }
.show_menu { display: none; position: absolute; z-index:4; top: 42px; left: 318px;
border: 1px solid #ccc; width: 715px; background: #fff; }
.left_div { width: 400px; float: left; margin: 0 5px; }
.right_div { width: 300px; float: left; background-color: greenyellow; margin: 0 2px; }
style>
head>
<body>
<div class="menu">
<div class="title"><a href="#"> a>div>
<div class="title01"><a href="#"> 、 、 a><span>span>
<div class="show_menu">
<div class="left_div">
<br/>
<br/>
div>
<div class="right_div">
<br/>
<br/>
div>
div>
div>
：
1， div
2，box-show
3，span ，
4， position z-index
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
