heeestorys :: [Template] DropDownMenu

[Template] DropDownMenu - 드랍다운메뉴

Front-End/HTML5 + CSS 2017. 1. 8. 14:50

DropDownMenu - 드랍다운메뉴

1. HTML

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <link href="DropDownMenu.css" rel="stylesheet"/> </head> <div> <ul class="dropdownmenu"> <li><a href="#">Home</a> <ul> <li><a href="#">HTML4</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">HTML5</a></li> <li><a href="#">CSS3</a> <ul> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a> <ul> <li><a href="#">SubMenu</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div>

2. css

/*태그 기본 설정*/ body, ul{ margin : 0; padding:0; } ul{ list-style: none; } a{ text-decoration : none; } /*드롭다운 메뉴 1레벨 메뉴*/ /*1레벨 메뉴의 가로 출력/배경색/크기 지정*/ .dropdownmenu > li{ float : left; position : relative; background: cornflowerblue; width:25%; } /*1레벨 메뉴의 텍스트 속성/크기 지정*/ .dropdownmenu > li > a{ display: block; font-size:16px; color: white; text-align:center; height:60px; line-height: 60px; } /*1메뉴 레벨 마우스 올렸을 때 배경 색*/ .dropdownmenu > li:hover{ background : cadetblue; } /*1레벨 메뉴에 마우스 올렸을 때 하위 메뉴의 위치 지정*/ .dropdownmenu > li:hover > ul{ top : 60px; left:0; } /*2레벨 메뉴 부터의 속성*/ /*2레벨 메뉴의 기본 위치/크기/테두리 지정*/ /*현재 위치에서 위로 -9999 픽셀로 하여 화면에서 보이지 않도록 설정*/ .dropdownmenu ul{ position : absolute; top:-9999px; z-index : 9999; width:140px; border : 1px solid brown; } /*2레벨 메뉴의 위치 속성 지정*/ .dropdownmenu ul li{ position : relative; } /*2레벨 메뉴의 텍스트 속성/배경/여백 지정*/ .dropdownmenu ul a{ display:block; color:black; font-size : 12px; line-height:40px; background : white; padding-left:20px; } .dropdownmenu ul a:hover { color: aquamarine; background : burlywood; } /*2레벨 메뉴에 마우스 올렸을 때 3레벨 위치 지정*/ .dropdownmenu ul li:hover > ul{ position : absolute; top:0; left:100%; }

3. view

'Front-End > HTML5 + CSS' 카테고리의 다른 글

[Template] 그룹 탭 (0)	2017.01.16
[Template] Accordion menu- 아코디언 메뉴 (0)	2017.01.08
[HTML] 이전 웹 브라우저에서 HTML5 사용 (0)	2016.12.19
[HTML5] meta 태그의 viewport 속성 (0)	2016.12.19
[CSS3] Transform - 위치, 모양 크기 지정 (0)	2016.12.18

리딩리드

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

[Template] DropDownMenu - 드랍다운메뉴

'Front-End > HTML5 + CSS' 카테고리의 다른 글

공지사항

카테고리

태그목록

글 보관함

달력

링크

리딩리드

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바