CSS 下拉菜单-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

CSS 下拉菜单

PHP中文网

Mar 20, 2017 am 11:44 AM

css드롭다운 메뉴

使用 CSS 可以创建一个鼠标移入后显示下拉菜单的效果。

1、下拉菜单的实现

　　当鼠标移入指定元素时，显示下拉菜单。代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>简单的下拉菜单</title>
<style>
.dropdown{
    position:relative;
    display:inline-block;
}

.dropdown-content{
    min-width:200px;
    border:1px solid black;
    position:absolute;
    display:none;
}

.dropdown:hover .dropdown-content{
    display:block;
}
</style>
</head>
<body>
<p class="dropdown">
    <span>鼠标你过来，我为你展示下拉菜单。</span>
    <p class="dropdown-content">
        <p>下拉菜单 1</p>
        <p>下拉菜单 2</p>
    </p>
</p>
</body>
</html>

　　实例解析：

　　HTML 部分：

　　　　可以使用任何 HTML 元素来打开下拉菜单，比如 45a2772a6b6107b401db3c9b82c049c2，或 3499910bf9dac5ae3c52d5ede7383485、bb9345e55eb71822850ff156dfde57c8 等元素。

　　　　然后，使用 e388a4556c0f65e1904146cc1a846bee 元素来创建一个容器，用于包含下拉菜单的内容，并自定义他需要出现的位置。

　　　　最后，再使用 e388a4556c0f65e1904146cc1a846bee 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。

　　CSS 部分：

　　　　.dropdown 类使用 position:relative，这将设置下拉菜单的内容放置在下拉按钮（使用 position:absolute）的右下角位置。

　　　　.dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移入指定元素后显示。

　　　　注意：在上面的例子中，下拉菜单容器的宽度设置为最小 200px，根据实际情况可以自行定义。

　　　　如果希望下拉菜单与下拉按钮的宽度一致，可将宽度设置为 100%，overflow:auto 属性可以指定在小尺寸屏幕上滚动。

　　　　:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单，将下拉菜单容器设置为 display:block;

2、创建下拉菜单

　　在上面例子的基础上，创建一个下拉菜单，并允许用户选取列表中的某一项目。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>下拉菜单实例</title>
<style>
/* 容器 <p> - 需要定位下拉内容 */
.dropdown{
    position:relative;
    display:inline-block;
}

/* 下拉菜单内容，设置为隐藏 */
.dropdown-content{
    min-width:150px;
    background-color:#F5F5F5;
    position:absolute;
    display:none;
    box-shadow:0px 8px 15px 0px rgba(0,0,0,0.2);
}

/* 下拉按钮样式 */
.dropbtn{
    color:white;
    font-size:16px;
    padding:15px;
    border:none;
    background-color:#00CD66;
    cursor:pointer;
}

/* 下拉菜单链接的样式 */
.dropdown-content a{
    color:black;
    text-decoration:none;
    padding:12px 15px;
    display:block;
}

/* 鼠标移入后显示下拉菜单 */
.dropdown:hover .dropdown-content{
    display:block;
}

/* 鼠标移入后修改链接的背景色 */
.dropdown-content a:hover{
    background-color:#E8E8E8;
}

/* 下拉菜单显示后修改下拉按钮的背景色 */
.dropdown:hover .dropbtn{
    background-color:#008B00;
}
</style>
</head>
<body>
<p class="dropdown">
    <button type="button" class="dropbtn">下拉菜单按钮</button>
    <p class="dropdown-content">
        <a href="#">下拉菜单项 1</a>
        <a href="#">下拉菜单项 2</a>
        <a href="#">下拉菜单项 3</a>
    </p>
</p>
</body>
</html>

　　在 Chrome 中当鼠标移入下拉菜单按钮时显示如下：

　　在上面的例子中，下拉菜单的内容设置了 box-shadow 属性，这个属性主要用于添加阴影，这样下拉菜单看起来就像一个“卡片”一样。该属性指定下拉菜单在水平方向阴影为 0，垂直方向为 8 像素的阴影，模糊距离为 15 像素，阴影的尺寸为 0，并指定阴影的颜色为黑色，且透明度为 0.2。

　　下拉菜单按钮使用了 cursor 属性，该属性主要用于指定鼠标光标的类型，即鼠标指针放在一个元素边界范围内时所用的光标形状。

　　下表列出了该属性所有的值： 鼠标可移入对应的属性值，查看光标的形状。

值	说明
URL	需要使用的自定义光标的 URL。注意：在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标，通常是一个箭头。
auto	默认，浏览器设置的光标。
pointer	光标显示为指示链接的指针，即一只手。
text	此光标指示文本。
wait	此光标指示程序正忙，显示为一个转动的蓝色小圆圈。
help	此光标指示可用的帮助，显示为一个箭头右下角带有问号。
crosshair	光标显示为十字线。
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。

3、下拉菜单的对齐方式

　　如果下拉菜单设置了 float:left 样式，那么还需要设置 left:0，即从 left:0 处开始从左向右显示菜单内容，否则会超出浏览器左边窗口。

　　如果下拉菜单设置了 float:right 样式，默认都是从左向右显示，菜单内容则会超出浏览器右边窗口，所以还需要设置 right:0，让下拉菜单内容从右向左。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>下拉菜单对齐</title>
<style>
/* 容器 <p> - 需要定位下拉内容 */
.dropdown{
    position:relative;
    display:inline-block;
}

/* 下拉菜单内容，设置为隐藏 */
.dropdown-content{
    min-width:150px;
    background-color:#F5F5F5;
    position:absolute;
    right:0;
    display:none;
    box-shadow:0px 8px 15px 0px rgba(0,0,0,0.2);
}

/* 下拉按钮样式 */
.dropbtn{
    color:white;
    font-size:16px;
    padding:15px;
    border:none;
    background-color:#00CD66;
    cursor:pointer;
}

/* 下拉菜单链接的样式 */
.dropdown-content a{
    color:black;
    text-decoration:none;
    padding:12px 15px;
    display:block;
}

/* 鼠标移入后显示下拉菜单 */
.dropdown:hover .dropdown-content{
    display:block;
}

/* 鼠标移入后修改链接的背景色 */
.dropdown-content a:hover{
    background-color:#E8E8E8;
}

/* 下拉菜单显示后修改下拉按钮的背景色 */
.dropdown:hover .dropbtn{
    background-color:#008B00;
}
</style>
</head>
<body>
<p class="dropdown" style="float:left;">
    <button type="button" class="dropbtn">左</button>
    <p class="dropdown-content" style="left:0;">
        <a href="#">下拉菜单项 1</a>
        <a href="#">下拉菜单项 2</a>
        <a href="#">下拉菜单项 3</a>
    </p>
</p>

<p class="dropdown" style="float:right;">
    <button type="button" class="dropbtn">右</button>
    <p class="dropdown-content">
        <a href="#">下拉菜单项 1</a>
        <a href="#">下拉菜单项 2</a>
        <a href="#">下拉菜单项 3</a>
    </p>
</p>
</body>
</html>

　　在 Chrome 中当鼠标移入右下拉按钮时显示如下：

4、下拉图片

　　下的例子，在下拉菜单中添加图片：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>下拉图片</title>
<style>
/* 容器 <p> - 需要定位下拉内容 */
.dropdown{
    position:relative;
    display:inline-block;
}

/* 下拉菜单内容，设置为隐藏 */
.dropdown-content{
    min-width:300px;
    background-color:#F5F5F5;
    position:absolute;
    display:none;
    box-shadow:0px 8px 15px 0px rgba(0,0,0,0.2);
}

/* 鼠标移入后显示下拉菜单 */
.dropdown:hover .dropdown-content{
    display:block;
}

/* 图片文字描述的样式 */
.heading{
    padding:15px;
    text-align:center;
}
</style>
</head>
<body>
<p class="dropdown">
    <img src="images/1.jpg" width="120" height="120" alt="">
    <p class="dropdown-content">
        <img src="images/xi.jpg" width="300" height="200" alt="">
        <p class="heading">最美的时光，留给最美的风景！</p>
    </p>
</p>
</body>
</html>

　　在 Chrome 中当鼠标移入图片下拉按钮时显示如下：

5、导航栏下拉菜单

　　下面的例子，在导航栏菜单中添加下拉菜单：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>导航栏下拉菜单</title>
<style>
*{margin:0;padding:0;}
ul{
    list-style-type:none;
    background-color:#333;
    overflow:hidden;
}
li{
    float:left;
}
li a, .dropbtn{
    display:inline-block;
    color:white;
    text-align:center;
    padding:14px 16px;
    text-decoration:none;
}

li a:hover, .dropdown:hover .dropbtn{
    background-color:#111;
}

.dropdown{
    display:inline-block;
}

.dropdown-content{
    min-width:200px;
    background-color:#F9F9F9;
    position:absolute;
    display:none;
    box-shadow:0px 8px 15px 0px rgba(0,0,0,0.2);
}

.dropdown-content a{
    color:black;
    padding:12px 16px;
    text-decoration:none;
    display:block;
}

.dropdown-content a:hover{
    background-color:#F1F1F1;
}

.dropdown:hover .dropdown-content{
    display: block;
}
</style>
</head>
<body>
<ul>
    <li><a href="#shop" class="active">在线商城</a></li>
    <li><a href="#news">产品展示</a></li>
    <p class="dropdown">
        <a href="#" class="dropbtn">下拉菜单</a>
        <p class="dropdown-content">
            <a href="#">子菜单 1</a>
            <a href="#">子菜单 2</a>
            <a href="#">子菜单 3</a>
        </p>
    </p>
</ul>
</body>
</html>

　　在 Chrome 中当鼠标移入下拉按钮时显示如下：

CSS下拉菜单简单制作方法介绍

CSS 下拉菜单详解

简单带下划线跟随效果的CSS3下拉菜单特效

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

HTML의 부울 속성은 무엇입니까? 몇 가지 예를 들어주십시오.Apr 25, 2025 am 12:01 AM

부울 속성은 값없이 활성화되는 HTML의 특수 속성입니다. 1. 부울 속성은 입력 상자를 비활성화하는 등의 존재 여부에 따라 요소의 동작을 제어합니다. 2. 작업 원칙은 브라우저가 구문 분석 할 때 속성의 존재에 따라 요소 동작을 변경하는 것입니다. 3. 기본 사용법은 속성을 직접 추가하는 것이며, 고급 사용량은 JavaScript를 통해 동적으로 제어 될 수 있습니다. 4. 일반적인 실수는 값을 설정해야한다고 잘못 생각하고 올바른 글쓰기 방법은 간결해야합니다. 5. 모범 사례는 코드를 간결하게 유지하고 부울 속성을 합리적으로 사용하여 웹 페이지 성능 및 사용자 경험을 최적화하는 것입니다.

HTML 코드를 어떻게 검증 할 수 있습니까?Apr 24, 2025 am 12:04 AM

HTML 코드는 온라인 유효성 검사기, 통합 도구 및 자동화 된 프로세스를 통해 깨끗할 수 있습니다. 1) w3cmarkupvalidationservice를 사용하여 온라인으로 HTML 코드를 확인하십시오. 2) 실시간 확인을 위해 VisualStudioCode에 HTMLHINT 확장을 설치하고 구성하십시오. 3) htmltidy를 사용하여 시공 프로세스에서 HTML 파일을 자동으로 확인하고 청소하십시오.

HTML vs. CSS 및 JavaScript : 웹 기술 비교Apr 23, 2025 am 12:05 AM

HTML, CSS 및 JavaScript는 최신 웹 페이지를 구축하기위한 핵심 기술입니다. 1. HTML 웹 페이지 구조를 정의합니다. 2. CSS는 웹 페이지의 모양을 담당합니다.

마크 업 언어로서의 HTML : 기능과 목적Apr 22, 2025 am 12:02 AM

HTML의 기능은 웹 페이지의 구조와 내용을 정의하는 것이며, 그 목적은 정보를 표시하는 표준화 된 방법을 제공하는 것입니다. 1) HTML은 타이틀 및 단락과 같은 태그 및 속성을 통해 웹 페이지의 다양한 부분을 구성합니다. 2) 콘텐츠 및 성능 분리를 지원하고 유지 보수 효율성을 향상시킵니다. 3) HTML은 확장 가능하므로 사용자 정의 태그가 SEO를 향상시킬 수 있습니다.

HTML, CSS 및 JavaScript의 미래 : 웹 개발 동향Apr 19, 2025 am 12:02 AM

HTML의 미래 트렌드는 의미론 및 웹 구성 요소이며 CSS의 미래 트렌드는 CSS-In-JS 및 CSShoudini이며, JavaScript의 미래 트렌드는 WebAssembly 및 서버리스입니다. 1. HTML 시맨틱은 접근성과 SEO 효과를 향상시키고 웹 구성 요소는 개발 효율성을 향상 시키지만 브라우저 호환성에주의를 기울여야합니다. 2. CSS-in-JS는 스타일 관리 유연성을 향상 시키지만 파일 크기를 증가시킬 수 있습니다. CSShoudini는 CSS 렌더링의 직접 작동을 허용합니다. 3. Webosembly는 브라우저 애플리케이션 성능을 최적화하지만 가파른 학습 곡선을 가지고 있으며 서버리스는 개발을 단순화하지만 콜드 스타트 문제의 최적화가 필요합니다.

HTML : 구조, CSS : 스타일, 자바 스크립트 : 동작Apr 18, 2025 am 12:09 AM

웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. 1. HTML은 웹 페이지 구조를 정의하고, 2. CSS는 웹 페이지 스타일을 제어하고 3. JavaScript는 동적 동작을 추가합니다. 그들은 함께 현대 웹 사이트의 프레임 워크, 미학 및 상호 작용을 구축합니다.

HTML의 미래 : 웹 디자인의 진화 및 트렌드Apr 17, 2025 am 12:12 AM

HTML의 미래는 무한한 가능성으로 가득합니다. 1) 새로운 기능과 표준에는 더 많은 의미 론적 태그와 WebComponents의 인기가 포함됩니다. 2) 웹 디자인 트렌드는 반응적이고 접근 가능한 디자인을 향해 계속 발전 할 것입니다. 3) 성능 최적화는 반응 형 이미지 로딩 및 게으른로드 기술을 통해 사용자 경험을 향상시킬 것입니다.

HTML vs. CSS vs. JavaScript : 비교 개요Apr 16, 2025 am 12:04 AM

웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. HTML은 컨텐츠 구조를 담당하고 CSS는 스타일을 담당하며 JavaScript는 동적 동작을 담당합니다. 1. HTML은 태그를 통해 웹 페이지 구조와 컨텐츠를 정의하여 의미를 보장합니다. 2. CSS는 선택기와 속성을 통해 웹 페이지 스타일을 제어하여 아름답고 읽기 쉽게 만듭니다. 3. JavaScript는 스크립트를 통해 웹 페이지 동작을 제어하여 동적 및 대화식 기능을 달성합니다.

See all articles