HTML+CSS는 탐색 모음의 보조 드롭다운 메뉴에 CSS 스타일을 구현합니다.

이전 장에서 해당 HTML 요소에 클래스 선택기를 추가했습니다. 이제 이러한 클래스를 CSS 스타일에 추가했습니다. 코드는 다음과 같습니다

<style>
    li{
        list-style-type:none;
    }
    #menu {
        width:950px;
        margin:30px auto 0px;
        height:45px;
        background-color: #030e11;
    }
    #menu li {
        float:left;
        width:109px;
        line-height:39px;
        text-align:center;
        position:relative;
        border:none;
    }
    #menu li a {
        font-size:16px; color: #e6f8e9;
        display:block;
        outline:0;
        text-decoration:none; }
    #menu li:hover a {
        color: #ff0000;           /*导航栏文字颜色 */
    }
    #menu li:hover .dropdown_1column {
        left:0px;
        top:38px;
    }
    .dropdown_1column{                /* 下拉菜单边框颜色*/
        margin:0px auto;
        float:left;
        position:absolute;
        left:-999em;
        text-align:left;
        border:1px solid #066591;
        border-top:none;
        background:#F4F4F4;
        width: 140px;
    }
    #menu li:hover div a {    /* 下拉菜单文字颜色*/
        font-size:12px
    ;color:#444;
    }
    #menu li:hover div a:hover{color:#21910e;}   /*下拉菜单鼠标停留颜色*/
    #menu li ul {
        list-style:none;padding:10px 5px;
        margin:0;
    }
    #menu li ul li {
        font-size:12px;
        line-height:26px;
        position:relative;
        padding:0;margin:0;
        float:none;
        text-align:left;
        width:130px;
    }
    #menu li ul li:hover {
        background:none;
        border:none;padding:0;
        margin:0;
    }
</style>

이 CSS 스타일만 페이지에 추가하면 됩니다. 원하는 효과를 얻으세요

이러한 CSS 스타일을 CSS 파일에 별도로 넣은 다음 HTML 페이지에서 참조할 수 있습니다

HTML 페이지의 '헤드'에 직접 넣을 수도 있습니다. 같은 페이지

다음 장의 전체 코드 보기