도와주세요

드롭다운 메뉴의 아이콘에 배경색이 칠해지지 않아요

title: 포켓몬고-EX레이드 초대장허니버터뚠뚜니라이츄2019.04.07 03:29조회 수 57댓글 6

  • 2
    • 글자 크기

예... 제목 그대로입니다 ㅠㅠ 


위를 보시면 드롭다운 메뉴가 있습니다... 아이콘이 음표 그림이고 백그라운드를 로즈쿼츠색으로 지정했는데요... 

왜 리스트인데... 리스트 스타일에는 배경색이 씌워지지 아니하는걸까요... 


아래처럼 배경색을 지정하려고 했는데 뭔 개짓을 해도 위에처럼 되는 상황입니다. 


해당 부분 HTML이랑 CSS 소스는 다음과 같습니다. 


(HTML)


<nav class="link">
<ul class="menu">
    <li><a href="#">menu 1</a>
        <ul class="sub">
            <li><a href="#">submenu 1</a></li>
            <li><a href="#">submenu 2</a></li>
            <li><a href="#">submenu 3</a></li>
        </ul>
    </li>
    <li><a href="#">menu 2</a>
        <ul class="sub">
            <li><a href="#">submenu 1</a></li>
            <li><a href="#">submenu 2</a></li>
            <li><a href="#">submenu 3</a></li>
        </ul>
    </li>
    <li><a href="#">menu 3</a>
        <ul class="sub">
            <li><a href="#">submenu 1</a></li>
            <li><a href="#">submenu 2</a></li>
            <li><a href="#">submenu 3</a></li>
        </ul>
    </li>
        <li><a href="#">menu 4</a>
        <ul class="sub">
            <li><a href="#">submenu 1</a></li>
            <li><a href="#">submenu 2</a></li>
            <li><a href="#">submenu 3</a></li>
        </ul>
    </li>
</ul>
</nav>


(CSS)


/*header*/
nav {width:100%;margin:auto 0px;position:fixed;font-size:14pt;height:8%;top:0px; left:0px;z-index:99;background-color:#f7cac9;}
nav ul {list-style-type:none;margin:0;padding:0;}
nav ul.menu li {float:left;width:179px;height:48px;list-style-image:url('music.png');}
nav ul.menu li a {display:inline-block;width:100%;height:100%;line-height:48px;text-indent:30px;text-decoration:none;background-color:#f7cac9;color:#91a8d1;}
nav ul.menu li a:hover {color:black;}
nav ul.menu:after {height:0;visibility:hidden;content:".";display:block;clear:both;margin:0;padding:5px;}


+list-style-position을 inside로 하면 더 괴악해지네요 ㄷㄷ 

저거 적용하면 


*

 메뉴


이런 식으로 변형됩니다... 

이 구역의 뚠뚜니는 나야!!! 

  • 2
    • 글자 크기
모니터의 피봇(pivot)과 관련하여 질문 드립니다 (by 이니스프리) Linux 시스템 보안에서 실무 등에서는 어떤 보안 솔류숀을 사용하는지 궁금해요 (by Seia)
  • 2019.4.7 06:57

    지금 음표가 사진을 불러오는 거고 색은 텍스트 배경색으로 주고 있으니까 사진에는 배경색이 안 들어가죠. 간단하게 music.png를 열어서 투명인 영역을 택스트 배경색이랑 똑같게 칠해주면 되지 않을까요?

  • @abnoeh

    아 그래서 교본같은 데도 보면 배경이미지를 쓰는거군요? 저 범례 기호에 배경을 넣는건 안된다는거죠?

  • @허니버터뚠뚜니라이츄
    2019.4.8 00:14

    background-color:#f7cac9;color:#91a8d1; 를 바로 윗줄 (music.png 있는 줄)로 옮겨보시겠어요?

  • @abnoeh
    포인트 폭탄+ (비회원)
    2019.4.8 00:14
    abnoeh님 축하합니다.
    추가로 100포인트만큼 포인트 폭탄+를 받았습니다.
  • @abnoeh

    li의 a태그 말고 li에 백그라운드요?

  • @허니버터뚠뚜니라이츄
    2019.4.8 14:32

    보니까 이미지상자 길이가 178픽셀인걸로 봐서 거기 백그라운드를 채우는게 맞는거 같아서요

댓글 달기

번호 제목 글쓴이 날짜 조회 수
공지 사이트 정보 등록에 경고로 변경된 분들 참고하세요.6 마스터 2019.06.19 581
공지 [중요 공지 포함] 사이트가 복구 되었습니다.38 마스터 2019.06.18 739
공지 호스팅 신청이 다시 가능합니다.17 마스터 2019.04.18 1766
공지 회원 전용 페이지가 생겼습니다.15 마스터 2018.03.20 7248
공지 [필독] 질문하는 방법5 마스터 2018.02.23 963
568 윈도우 환경에서 PHP 개발환경을 어떻게 구축하는 것이 효율적일까요?7 네모 2019.05.03 117
567 무선 키보드 마우스 세트 추천 부탁드립니다.14 협스 2019.05.03 136
566 아이폰/아이패드 충전기 발열 관련 질문 드립니다9 이니스프리 2019.05.02 642
565 SQL에서는 날짜 형식을 못 바꾸나요?2 title: 포켓몬고-EX레이드 초대장허니버터뚠뚜니라이츄 2019.05.02 49
564 DB를 연결했고 뭔가 가져오는 것 같은데 표시를 못 합니다...3 title: 포켓몬고-EX레이드 초대장허니버터뚠뚜니라이츄 2019.05.02 44
563 DB를 연결했는데 왜 데이터를 가져오질 모태... title: 포켓몬고-EX레이드 초대장허니버터뚠뚜니라이츄 2019.04.30 45
562 미디어위키 리버티 스킨 상하단 아이콘 지우기관련,,3 어렵다어려워 2019.04.30 72
561 케이블에도 에이징이 필요한가요..?12 협스 2019.04.26 132
560 구글 웹마스터 사이트맵 가져올 수 없음 문제와 스포터 호스팅 Lua 스크립트 관련 질문 드립니다12 Gokoro 2019.04.23 219
559 안드로이드와 맥북을 같이 잘 사용할 방법이 있을까요?2 네모 2019.04.21 74
558 인텔 NUC를 이용한 홈 서버 구성에 대해 질문 드립니다 ^^5 이니스프리 2019.04.21 83
557 호스팅 패널의 webdev는 뭐하는것인가요?1 샹키 2019.04.20 62
556 system32 폴더 내 파일의 삭제 권한과 관련된 질문을 드립니다 ㅠㅠ11 이니스프리 2019.04.20 156
555 특정 키워드의 메일만 푸시알림을 받는 방법이 있을까요?4 이니스프리 2019.04.19 88
554 디시인사이드 푸쉬알림 앱 추천 부탁드립니다 ^^3 이니스프리 2019.04.18 88
553 프로세서 간의 성능 비교에 대해 질문 드립니다 ^^4 이니스프리 2019.04.17 64
552 사파리브라우저 mp3파일 재생관련 문의드립니다.11 title: 나만의 아이콘자뻑보이 2019.04.15 143
551 라떼판다 전원 설계가 막막해요 ㅠㅠ2 나는야초보 2019.04.10 92
550 모니터의 피봇(pivot)과 관련하여 질문 드립니다8 이니스프리 2019.04.10 66
드롭다운 메뉴의 아이콘에 배경색이 칠해지지 않아요6 title: 포켓몬고-EX레이드 초대장허니버터뚠뚜니라이츄 2019.04.07 57
이전 1 2 3 4 5 6 7 8 9 10... 30다음
첨부 (2)
2019-04-07 (1).png
460.5KB / Download 2
제목-없음-2.png
15.1KB / Download 2
서버에 요청 중입니다. 잠시만 기다려 주십시오...