css 마우스 오버시 display:block되는 영역 질문드립니다 ㅠㅠ
갅쥐누뉨
안녕하세요~
간단 메뉴를 만들고있는데..이해가 잘 안되는걸 그냥 소스 붙여넣기 하다가 직접 만들어보려고 하는데 잘 안되네요 ㅠㅠ
만들고자 하는것은 아주 간단한 1단 메뉴인데..
메뉴1에 마우스를 오버하면 소분류 메뉴가 나오는것입니다..
메뉴가 나오고 소분류에 마우스가 가서 클릭을 할수있어야하는데
메뉴1에 마우스를 올리면 소분류는 나오는데 메뉴1의 영역에서 벗어나면 소분류가 사라집니다..
당연히 영역을 벗어나면 사라지는게 맞는데.. background-color를 주면 마우스가 backgropund-color를 타고 가서 안사라지는데
background-color을 안주면 메뉴1의 영역을 조금만 벗어나도 바로 사라져버리네요..z-index로 소분류의 영역을 좀 크게잡고
밑으로 레이어를 깔아도 사라지고.. 미치겠습니다 ㅠㅠ;; 간단하게 생각했는데 되게 어렵네요;;
말이 되게 어려운것같은데 이런 메뉴 만들때 주로 어떻게 하는지 궁금합니다~ ㅠㅠ
제가 css로 작성한 코드는
#dialog .bottom li.sns_button:hover ul.sns {display:block; background-color:#fff;}
이것입니다.. 해당버튼에 마우스를 올리면 해당버튼 자식클래스가 나오게 하는것인데..
나오는건 잘 나오는데 자식클래스에 마우스가 갈떄쯤 영역에서 벗어나져서 사라져버립니다. ㅠㅠ
이런 작업하실때 주로 어떻게 하시나요?! 제가 완전 개념을 잘못알고있는것같은데.. 도움 부탁드리겠습니다. ㅠ
-
큐티베이비 2025-06-02
답변 감사드립니다!! CSS 수정해서 작업해보니 되네요!! ^^
-
MinA 2025-06-02
css 가 잘못된거 같네요
ul.sns와 dialog .bottom li.sns_button이 둘의 css와
코딩되있는것을 봐야 뭔가 답변을 줄수 있을꺼같네요