CSS 下拉菜单

李白家的小桃青

于 2024-04-02 17:13:24 发布

阅读量354

点赞数 12

分类专栏：作业写不完 web 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_74432453/article/details/137276917

版权

作业写不完同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

web

1 篇文章 0 订阅

订阅专栏

* {
    margin: 0;
    padding: 0;
}
.menu {
    width: 1050px;
    height: 60px;
    border: 1px saddlebrown solid;
    margin: auto;
    background-color: #1B2534;
}
.menu li {
    height: 50px;
    width: 170px;
    /* border: 1px salmon solid; */
    float: left;
    font-size: 20px;
    cursor: pointer;
    background-color: #1B2534;
    text-align: center;
    line-height: 60px;
}
.menu li:hover {
    background-color: black;
    /* background-color: green; */
}
.menu  li a {
    color: white;
    text-decoration: none;
}
.menu ol > li {
    background-color: #142c51;
}
.menu > li > ol {
    display: none;
}
.menu > li:hover ol{
    display: block;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td, embed, object {
    padding: 0;
    margin: 0; 
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset, img, abbr {
    border: 0;
}
address, caption, cite, code, dfn, em, 
h1, h2, h3, h4, h5, h6, strong, th, var {
    font-weight: normal;
    font-style: normal;
}
ul, ol {
    list-style: none;
}
caption, th {
    text-align: left;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 1.0em;
}
/*q:before, q:after {
    content: ”;
}*/
a, ins {
    text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <title>下拉菜单</title>

</head>
<body>
    <ul class="menu">
        <li>
            <a href="#">百度游戏|乐玩</a>
        </li>
        <li>
            <a href="#">首页</a>
            <ol>
                <li><a href="#">子菜单1</a></li>
                <li><a href="#">子菜单2</a></li>
                <li><a href="#">子菜单3</a></li>
                <li><a href="#">子菜单4</a></li>
            </ol>
        </li>
        <li><a href="#">商城</a>
            <ol>
                <li><a href="#">子菜单1</a></li>
                <li><a href="#">子菜单2</a></li>
                <li><a href="#">子菜单3</a></li>
                <li><a href="#">子菜单4</a></li>
            </ol>
        </li>
        <li><a href="#">页游</a>
            <ol>
                <li><a href="#">子菜单1</a></li>
                <li><a href="#">子菜单2</a></li>
                <li><a href="#">子菜单3</a></li>
                <li><a href="#">子菜单4</a></li>
            </ol>
        </li>
        <li><a href="#">排行榜</a>
            <ol>
                <li><a href="#">子菜单1</a></li>
                <li><a href="#">子菜单2</a></li>
                <li><a href="#">子菜单3</a></li>
                <li><a href="#">子菜单4</a></li>
            </ol>
        </li>
        <li><a href="#">繁星计划</a>
            <ol>
                <li><a href="#">子菜单1</a></li>
                <li><a href="#">子菜单2</a></li>
                <li><a href="#">子菜单3</a></li>
                <li><a href="#">子菜单4</a></li>
            </ol>
        </li>
    </ul>
</body>
</html>