写一个<ul>在<li>里的<a>里面，为<a>子元素，调试却显示<ul>在<a>的下面，成了<a>的兄弟元素是为什么？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Microsoft-官方网站</title>
    <link rel="stylesheet" type="text/css" href="font-awesome-4.6.3/font-awesome-4.6.3/css/font-awesome.css">
    <!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
    <style>
        *{
            padding: 0;
            margin: 0;
            text-decoration: none;
            list-style: none;
        }
        body{
            font-size: 15px;
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            min-width: 320px;
            color: #000;
            background-color: #fff;
        }
        a{
            display: block;
            color: #000;
        }

        /*header*/
        header{
            width: 100%;
            border-bottom: 1px solid #e6e6e6;
        }
        header .container{
            width: 90%;
            height: 48px;
            margin: 0 auto;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
        /*header左边导航nav部分*/
        header .nav{
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        /*导航Logo大小*/
        header .logo img{
            max-height: 23px;
        }
        /*导航列表部分*/
        header .nav>ul{
            margin-left: 18px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        header .nav-content{
            padding: 0 1.5em;
            line-height: 48px;
            position: relative;
        }
        header .nav-content:hover{
            background-color: #f2f2f2;
        }
        /*二级导航*/
        header .nav2{
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <nav class="nav">
                <a class="logo" href="#">
                    <img src="imgs/microsoft.png">
                </a>
                <ul>
                    <li>
                        <a class="nav-content" href="#">
                            商店
                            <i class="fa fa-angle-down"></i>
                            <ul class="nav2">
                                <li>
                                    <a href="#">微软官方商城</a>
                                </li>
                                <li>
                                    <a href="#">寻找店铺</a>
                                </li>
                            </ul>
                        </a>
                    </li>
                    <li>
                        <a class="nav-content" href="#">
                            产品
                            <i class="fa fa-angle-down"></i>
                        </a>
                    </li>
                    <li>
                        <a class="nav-content" href="#">
                            支持
                        </a>
                    </li>
                </ul>
            </nav>
            <!-- <div class="header-right">
                <div class="search">
                    <input type="input" name="search" placeholder="在Microsoft.com中搜索">
                    <button class="fa fa-search" type="button"></button>    
                </div>
                <a href="#"><i class="fa fa-shopping-cart"></i></a>
                <a href="#">登录</a>
            </div> -->
        </div>
    </header>
</body>
</html>

阅读 3.7k

写一个<ul>在<li>里的<a>里面，为<a>子元素，调试却显示<ul>在<a>的下面，成了<a>的兄弟元素是为什么？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？

css布局怎么保证右边一直在可视范围内？