• 목록
  • 아래로
  • 위로

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


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

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


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


해당 부분 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로 하면 더 괴악해지네요 ㄷㄷ 

저거 적용하면 


*

 메뉴


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

작성자
국내산라이츄 102 Lv. (45%) 839700/848720EXP

인생은 양자역학이외다

댓글 6

abnoeh
profile image

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

comment menu
2019.04.07. 06:57

신고

"abnoeh님의 댓글"

이 댓글을 신고 하시겠습니까?

국내산라이츄 작성자 → abnoeh
profile image

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

comment menu
2019.04.07. 19:37

신고

"국내산라이츄님의 댓글"

이 댓글을 신고 하시겠습니까?

abnoeh → 국내산라이츄
profile image

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

comment menu
2019.04.08. 00:14

신고

"abnoeh님의 댓글"

이 댓글을 신고 하시겠습니까?

포인트 폭탄+ → abnoeh
abnoeh님 축하합니다.
추가로 100포인트만큼 포인트 폭탄+를 받았습니다.
comment menu
2019.04.08. 00:14

신고

"포인트 폭탄+님의 댓글"

이 댓글을 신고 하시겠습니까?

삭제

"포인트 폭탄+님의 댓글"

이 댓글을 삭제하시겠습니까?

국내산라이츄 작성자 → abnoeh
profile image

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

comment menu
2019.04.08. 00:46

신고

"국내산라이츄님의 댓글"

이 댓글을 신고 하시겠습니까?

abnoeh → 국내산라이츄
profile image

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

comment menu
2019.04.08. 14:32

신고

"abnoeh님의 댓글"

이 댓글을 신고 하시겠습니까?

권한이 없습니다.
번호 제목 글쓴이 날짜 조회 수
공지 [작업 완료] 설 명절 맞이 서버 업데이트 안내 3 마스터 24.02.11.17:21 1403
공지 [중요] 호스팅 만료와 관련하여 일부 수칙이 변경됩니다. 4 마스터 23.01.14.02:23 5122
공지 [필독] 질문하는 방법 17 마스터 18.02.23.03:09 4498
506 웹사이트 연결하는거 도메인으로 하는거 아닌가요? 2 ㅇㅎㅅ 17.04.02.09:58 288
505 메일 수신이 안됩니다... 4 title: 도밥위키!Dobob 17.01.08.11:39 288
504 윈도우 서버에 모니위키 설치 가능한가요? 6 제르엘 19.05.13.23:21 287
503 WP에서 스팸....? 11 image 갱생협스 18.11.30.13:12 287
502 사이트 방문자수와 검색 노출 등에 관하여 질문 드립니다 14 이니스프리 18.10.22.22:23 287
501 아메트린 패널 ftp 주소 7 image 맛수타 17.05.14.11:25 287
500 매번 마스터님께 질문만 드리기 그래서 여기다가 올려 봅니다...(동영상 스트리밍 서버) 2 비빅 16.10.11.10:07 287
499 혹시 라이브러리나 개발자문서 한글 번역 정리 2 제목학원장 22.01.11.13:23 286
드롭다운 메뉴의 아이콘에 배경색이 칠해지지 않아요 6 image 국내산라이츄 19.04.07.03:29 286
497 [404&403 에러] 흑흑 2 image 260578 18.04.10.22:00 286
496 개인 서버 구축? 8 GsusWeb 20.07.03.12:46 285
495 SSH지원이 어디까지 되나요? 2 프요 17.07.02.13:39 285
494 개인 홈페이지를 만들려고 하는데 보통 이미지들 어디서 얻으시나요? 다 만들어서 쓸 수는 없을 것 같고.. 2 yuyu 21.12.31.12:53 284
493 지식없이 네이버 카페 대문을 제작해보려는데 너무 힘드네요. image 도바킨 18.07.26.01:29 284
492 내 홈페이지는? 4 기특한크리퍼 17.09.15.10:02 284
491 Expert SSL과 부가서비스 SSL의 차이가 뭔가요? 2 엠씨 17.05.14.23:58 284
490 [SSD] Micron 1100 vs Samsung 860 QVO 어떻게 생각하시는가요? 7 image 이니스프리 19.11.09.22:52 283
489 노트북 사설 수리 업체 문의 드립니다 2 이니스프리 20.09.06.21:42 282
488 워드프레스 이슈가 있는데... 3 image 국내산라이츄 23.03.12.02:42 281
487 아이고 자바스크립트 고수분들 도와주세요!!! 2 Hanam09 18.01.08.23:03 281