外联动菜单怎么做html

在HTML中制作外联动菜单，可以让网站的导航更加清晰，提高用户体验，下面我将详细地介绍如何使用HTML代码来制作外联动菜单,希望能对你有所帮助。

我们需要了解外联动菜单的基本原理，外联动菜单通常由一个或多个无序列表（<ul>）组成，每个列表项（<li>）中包含一个链接（<a>），当鼠标悬停在某个列表项上时，会显示子菜单,以下是具体的步骤和代码：

准备菜单数据

在开始编写代码之前,我们需要准备好菜单数据，

主菜单项1
- 子菜单项1.1
- 子菜单项1.2
主菜单项2
- 子菜单项2.1
- 子菜单项2.2

编写HTML结构

以下是外联动菜单的基本HTML结构：

Markup

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>外联动菜单示例</title>
    <style>
        /* 这里我们将添加一些基本的CSS样式，稍后会详细说明 */
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">主菜单项1</a>
                <ul>
                    <li><a href="#">子菜单项1.1</a></li>
                    <li><a href="#">子菜单项1.2</a></li>
                </ul>
            </li>
            <li><a href="#">主菜单项2</a>
                <ul>
                    <li><a href="#">子菜单项2.1</a></li>
                    <li><a href="#">子菜单项2.2</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</body>
</html>

添加CSS样式

为了使菜单看起来更美观，我们需要添加一些CSS样式,以下是基本的样式：

Markup

<style>
    /* 清除默认样式 */
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    /* 设置导航菜单样式 */
    nav {
        width: 100%;
        background-color: #333;
    }
    /* 设置主菜单项样式 */
    nav > ul > li {
        float: left;
        position: relative;
    }
    /* 设置链接样式 */
    nav a {
        display: block;
        color: white;
        text-decoration: none;
        padding: 10px 20px;
    }
    /* 鼠标悬停时的样式 */
    nav a:hover {
        background-color: #555;
    }
    /* 子菜单样式 */
    nav ul ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
    }
    /* 显示子菜单 */
    nav ul li:hover > ul {
        display: block;
    }
</style>