ohpy-세상의 모든 홈페이지

하위메뉴가 가로로 펼쳐지는 CSS 소개합니다.

예시 홈페이지 : http://rich.ohpy.com

'홈페이지관리 > 디자인관리 > CSS > 구성요소CSS' 에서...메뉴 CSS 넣는곳에 아래 CSS를 넣으시면 됩니다.

[ 미니멀남색 메인메뉴 CSS (하위메뉴 가로펼침형) ]

/* op element style - elgnb
***************************************************/

.elgnb { clear: both; width: 100%; margin: 0; padding: 0; font: bold 12px/1.2em 돋움, sans-serif;}
.elgnb h2.elgnb-h { display: none; }

/* 상위메뉴 */
.elgnb ul.navi { height: 32px; font: bold 12px 돋움, sans-serif; padding: 0 5px; border: 2px solid #C4D9F4; background: #fff; margin: 8px 15px 8px 15px; }
.elgnb ul.navi li.menu { float: left; display: inline; list-style:none; background: url(http://img.ohpy.com/opimg/skin/elgnb/minimal_navy/img/elgnb_top_wall.gif) no-repeat right 50%; z-index: 11; }
.elgnb ul.navi li.menu .item a { display: block; padding: 6px 20px 4px 20px; margin: 4px 0; }
.elgnb ul.navi li.menu .item a:link, .elgnb ul.navi li.menu .item a:visited { color: #454545; text-decoration: none; }
.elgnb ul.navi li.menu .item a:hover { color: #002E5C; background: #EBF7FF url(http://img.ohpy.com/opimg/skin/elgnb/minimal_navy/img/elgnb_top_wall.gif) no-repeat right 50%; }

/* 하위메뉴 */
.elgnb ul.subnavi { position: absolute; top: 135px; display: none; background: #fff; margin: 0; padding: 0; z-index: 12; border: 1px solid #9AB7DE; padding: 3px;}
.elgnb ul.subnavi li.submenu { position: relative; float:left; display: inline; list-style: none; }
.elgnb ul.subnavi li.submenu .subitem a { display: inline; float:left; padding: 4px 10px 3px 15px; font: normal 11px 돋움, sans-serif; }
.elgnb ul.subnavi li.submenu .subitem a:link, .elgnb ul.subnavi li.submenu .subitem a:visited { text-decoration: none; color: #777; background: #fff url(http://img.ohpy.com/opimg/skin/elgnb/minimal_navy/img/elgnb_bul02.gif) no-repeat 7px 50%; }
.elgnb ul.subnavi li.submenu .subitem a:hover { color: #002E5C; background: url(http://img.ohpy.com/opimg/skin/elgnb/minimal_navy/img/elgnb_bul02.gif) no-repeat 7px 50%; }

/* 하위메뉴 띄우기*/
.elgnb ul.navi li.menu:hover ul.subnavi { display: inline; background: #fff; }