[급해요ㅠㅠ]밑에글인데요 다시 소스올려서 올립니다^^
세라
저기사진처럼 네비를 만들려고하거든요..ㅠ
좀도와주세요 ㅠㅠ
먼저 width가 100%로여야되요~ 그리고 저기저 네비는 가운데로와야되요 ㅠ
그래서 네비를 감싸는 div에는 width:100%를 주고
네비의 ul은 width값을 주고 marign: 0 auto;로 가운데정렬을 시켰더니 저런 모양까지는 나왔어요~
그런데 문제는요!!
저기 빨간색 선보이시죠? 저거는 width 100%로 어느모니터에서 봐도 꽉차게되있어야되요..
그리고 메뉴1, 2, 3에 마우스 오버하면 저기 메뉴1밑에보이시는 검은색라인있죠? 저렇게 메뉴밑에나와야하거든요..
그리고 다시 마우스 아웃하면 빨간색선되다가 오버하면 검은색선이되야되요..
근데 그냥 ul에다가 빨간색라인주고 마우스오버아웃하면 검은색라인하는건 되거든요?
문제는.. ul이 아닌 ul을 감싸고있는 div width:100%인 곳에 빨간색라인을줘야하거든요
그리고 ul li a:hover에 검은색라인생기게하면 검은색라인이 안나옵니다...도와주세요 ㅠㅠ고수님들!!! ㅠㅠ
엉엉엉 급해요..ㅠㅠ
------------ 소스는 이렇습니다~ ^0^ -----------------------------
div class=PackageNav
div class=PackageCategory Lower
ul class=LowerCategory_Menu
li class=MenuOna onmouseover= href=#메뉴1/a/li
lia onmouseover= href=#메뉴2/a/li
lia onmouseover= href=#메뉴3/a/li
/ul
div class=LowerCategory_List
ul class=LowerCategory m01 style=display:block;
lia href=#소메뉴1/a/li
lia href=#소메뉴2/a/li
lia href=#소메뉴3/a/li
/ul
ul class=LowerCategory m01 style=display:none;
lia href=#소메뉴1/a/li
lia href=#소메뉴2/a/li
lia href=#소메뉴3/a/li
/ul
ul class=LowerCategory m01 style=display:none;
lia href=#소메뉴1/a/li
lia href=#소메뉴2/a/li
lia href=#소메뉴3/a/li
/ul
ul class=LowerCategory m01 style=display:none;
lia href=#소메뉴1/a/li
lia href=#소메뉴2/a/li
lia href=#소메뉴3/a/li
/ul
/div
/div
/div----------------
css입니다.
.PackageNav {display:inline-block;width:100%;}
.PackageNav .PackageCategory {overflow:hidden;background: #e8e9ed;}
.PackageNav .Lower .LowerCategory_Menu {overflow:hidden;}
.PackageNav .Lower ul li {width:241px;}
.PackageNav .Lower .LowerCategory_Menu li a:hover
.PackageNav .Lower .LowerCategory_Menu .MenuOn a {color:#4680e1;background:#fff;border-bottom:1px solid red;}
.PackageNav .Lower .LowerCategory_List {width:100%;background:#fff;border-top:1px solid #b7b6bb;border-bottom:1px solid #dbdbdd;}
.PackageNav .Lower .LowerCategory {background:#fff;overflow:hidden;width:973px;}
.PackageNav .Lower .LowerCategory li{width:115px;height:35px;line-height:35px;border:none;}입니다..ㅠ
알아보시기 쉽게쓴다고썼는데..
파일로올리기엔..이게너무 큰 페이지라 ㅠ이미지랑 다올려야되서..ㅠ
아..죄송합니다 ㅠㅠ
제설명이부족한가요..?ㅠ흑흑
-
벼리
일단 코드를 좀 더 수정해보시고 질문하심이 좋을 듯 하네요.
저 소스만으로는 원하시는 모양을 알기가 힘들구요. 아랫글 대충 읽어봤지만 결국 검은색 선이 안보인다고 하시는 건데 버튼 영역의 그림은 hover시에 background-position을 변경해주는 방식이 가장 좋은 방식이라고 봅니다. 나머지는 구조를 좀 더 수정해보셔야 할듯하네요. -
좋아해
아..그렇군요..ㅠㅠ 한번해볼게요~ 감사합니다~ ^----------^
-
풀큰
소메뉴는 왜 저렇게 빼신건지.. li 안에 넣으시고 position으로 설정해주셔도 충분히 가능해요.
네이버 널리 한번 참조해보시길. div 너무 많이 쓰는것도 좋은 코딩은 아니라 봅니다.
그리고 선은 border로 하셔도 되지만 왠만하면 이미지에 포함시키시는게 편하실꺼라 봅니다. -
2gether
소스보니까 더 모르겠어~ㅋㅋ
저 소스만으론 원하시는 모양을 알수가 없네요 ^^;
디자인이 어떻게 되있는건지 모르겠지만 눈으로 보기에 선이라고 해서 꼭 border로 처리하지 않으셔도 되요~
이미지로 잘라서 배경으로 깔아보세요 100%짜리를~
그리고 a에 border가 있다 없다하면 사실상 이미지가 까딱거리게 되니까(hover시)
그것도 차라리 이미지를 두개로 잘라서 사용하시는게 편할수도 있어요~ -
로지
아..이게 ㅠ여러개 코드속에섞여있는거라..골라내서 쓰느라..ㅠ
복잡해보이네요..코드가..ㅠㅠ