hover로 표시된 메뉴

14902 단어 CSS
hover 하면 나오는 메뉴, 자주 있죠.
부모 메뉴에는 하위 메뉴가 있습니다. 호버 부모 메뉴에는 하위 메뉴만 표시됩니다.수첩.
방법만 전달하고 싶어서 여분의 장식(css)을 생략했습니다.그 다음엔 니 마음대로 해.
HTML.
<ul class="global_menu">
    <li><a href="#">MENU_1</a>
        <ul>
            <li><a href="">second-menu1</a></li>
            <li><a href="">second-menu2</a></li>
            <li><a href="">second-menu3</a></li>
            <li><a href="">second-menu4</a></li>
        </ul>
    </li>
    <li><a href="#">MENU_2</a>
        <ul>
            <li><a href="">second-menu1</a></li>
            <li><a href="">second-menu2</a></li>
            <li><a href="">second-menu3</a></li>
            <li><a href="">second-menu4</a></li>
        </ul>
    </li>
    <li><a href="#">MENU_3</a>
        <ul>
            <li><a href="">second-menu1</a></li>
            <li><a href="">second-menu2</a></li>
            <li><a href="">second-menu3</a></li>
            <li><a href="">second-menu4</a></li>
        </ul>
    </li>
    <li><a href="#">MENU_4</a>
        <ul>
            <li><a href="">second-menu1</a></li>
            <li><a href="">second-menu2</a></li>
            <li><a href="">second-menu3</a></li>
            <li><a href="">second-menu4</a></li>
        </ul>
    </li>
</ul>
CSS.
*{margin:0;padding:0;text-align: center;} /*単純にリセットして文字を中央寄せ*/

ul {overflow: hidden;list-style: none;} /*floatすると親要素は高さを失うので、overflow:hidden;で高さを認識させる*/
ul.global_menu > li{float: left;width:25%;} /*親メニューをfloatして横並びに*/
ul.global_menu > li ul{display: none;} /*子要素を非表示に。*/

ul.global_menu > li:hover ul{ /*親メニューをhoverしたとき、子要素を表示 セレクタの使い方注意*/
    display: block;
    background: red;
}
그리고 모식단보다 자채가 더 크다.
가끔 있죠?
구조가 똑같아요!아버지 메뉴에 하위 메뉴가 있어요.
css가 좀 달라요.
이것이 바로

이렇게 돼서

HTML.
<ul class="global_menu">
    <li><a href="#">MENU_1</a>
        <ul>
            <li><a href="">sub</a></li>
            <li><a href="">sub</a></li>
            <li><a href="">sub</a></li>
            <li><a href="">sub</a></li>
        </ul>
    </li>
    <li><a href="#">MENU_2</a>
        <ul>
            <li><a href="">sub-sub</a></li>
            <li><a href="">sub-sub</a></li>
            <li><a href="">sub-sub</a></li>
            <li><a href="">sub-sub</a></li>
        </ul>
    </li>
    <li><a href="#">MENU_3</a>
        <ul>
            <li><a href="">sub-sub-sub</a></li>
            <li><a href="">sub-sub-sub</a></li>
            <li><a href="">sub-sub-sub</a></li>
            <li><a href="">sub-sub-sub</a></li>
        </ul>
    </li>
    <li><a href="#">MENU_4</a>
        <ul>
            <li><a href="">sub4</a></li>
            <li><a href="">sub4</a></li>
            <li><a href="">sub4</a></li>
            <li><a href="">sub4</a></li>
        </ul>
    </li>
</ul>
CSS.
*{margin:0;padding:0;text-align: center;}

ul {list-style: none;}
ul.global_menu{position: relative;}
ul.global_menu > li{
    float: left;
    width:25%;
    height: 30px;
    background: green;
}

ul.global_menu > li ul{
    display: none;    
    position: absolute;  /*ul.global_menu に対して位置指定*/
    top:30px;
    left:0;
    width: 100%; /*横幅いっぱいに広げる*/
}

ul.global_menu > li > ul > li{
    width:25%;
    float: left;
    background: red;
}

ul.global_menu > li:hover ul{
    display: block;
}
HTML로 이미지 링크
SQL 언어(구조적 쿼리 언어)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage