CSS3를 사용하여 탐색 드롭다운 메뉴를 구현하는 방법(전체 코드 첨부)

현재 웹페이지 구조에서 탐색 메뉴 표시줄은 예를 보여줄 뿐만 아니라 HTML

에서 콘텐츠에 대한 가장 직관적인 인상을 주기 때문에 매우 중요한 위치를 차지합니다. li>

메뉴의 등급을 매긴 다음 CSS3과 협력하여 탐색 드롭다운 메뉴를 구현할 수 있습니다. 이 기사는 CSS3를 사용하여 탐색 드롭다운 메뉴를 구현하는 방법에 대한 것입니다. 필요한 친구가 참조할 수 있기를 바랍니다.

css3을 사용하여 탐색 드롭다운 메뉴를 구현하는 원리

먼저 HTML에서

그런 다음 hover 문을 사용하여 마우스를 특정 영역 위로 가져갈 때 하위 메뉴 표시를 트리거합니다. 이해해야 할 것은 표시 속성을 사용하여 모양과 없음을 구현합니다. 드롭다운 메뉴를 숨깁니다. 그런 다음 각 메뉴의 위치를 ​​정의하여 메뉴 위치를 결정하고 마지막으로 ::after 의사 요소 선택기를 사용하여 부동을 지웁니다.

css3을 사용하여 탐색 드롭다운 메뉴를 구현하는 단계

1단계: HTML을 사용하여 메뉴 스타일 만들기

<nav>
        <ul>
            <li><a href="#">导航一</a>
                <ul>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                </ul>
            </li>
            <li><a href="#">导航二</a></li>
            <li><a href="#">导航三</a>
                <ul>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a>
                        <ul>
                            <li><a href="#">三级导航</a></li>
                            <li><a href="#">三级导航</a></li>
                            <li><a href="#">三级导航</a></li>
                        </ul>
                    </li>
                    <li><a href="#">二级导航</a></li>
                </ul>
            </li>
            <li><a href="#">导航四</a>
                <ul>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                </ul>
            </li>
            <li><a href="#">导航五</a>
                <ul>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                </ul> 
            </li>
            <li><a href="#">导航六</a></li>
        </ul>
    </nav>

2단계: CSS3를 사용하여 다음으로 트리거되는 드롭다운 메뉴 구현 마우스 호버

nav {
    margin:100px auto;
    text-align:center;
}
nav ul {
    border-radius:10px;
    background:linear-gradient(to bottom,#efefef,#bbbbbb);
    padding:0 20px;
    display:inline-table;
    position:relative;  
    box-shadow:1px 1px 3px #666;
}
nav ul ul {
    display:none;
}
nav ul li {
    float:left; 
}
nav ul::after {
    content:"";
    display:block;
    clear:both;
}
nav ul li a {
    display:block;
    padding:25px 40px;
    color:#000;
    text-decoration:none;
    font-family:"微软雅黑";
}
nav ul li:hover > ul {
    display:block;
}
nav ul li:hover {
    background:linear-gradient(to bottom,#4f5964,#5f6975);
}
nav ul li:hover a {
    color:#FFF;
}
nav ul ul {
    background:#5f6975;
    border-radius:0;
    position:absolute;
    top:100%;
    padding:0;
}
nav ul ul li {
    float:none;
    border-top:1px solid #6b727c;
    border-bottom:1px solid #575f6a;
}
nav ul ul li a {
    color:#FFF;
}   
nav ul ul li a:hover {
    background:#4b545f;
}
nav ul ul ul {
    width:100%;
    position:absolute;
    left:100%;
    top:50%;
}

3단계: 메뉴 스타일 요구 사항에 따라 꾸미기

드롭다운 메뉴 스타일은 그림과 같습니다

위 내용은 CSS3를 사용하여 탐색 드롭다운 메뉴를 구현하는 방법(전체 코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!