li里面掉落咋办，问题出在哪里呀

问题遇到的现象和发生背景

为什么我在li里面加了a 但是结果a 却下掉，没在li里面，问题出在哪里呀

img

用代码块功能插入代码，请勿粘贴截图

[](

.baner {
  height: 420px;
  background-color: #1c036c;
}
.baner .w {
  background-color: pink;
  height: 420px;
  background: url(/images/banner2.png);
}
.baner .subnav {
  width: 190px;
  height: 420px;
  background: rgba(0, 0, 0, 0.5);
}
.subnav ul li {
  height: 45px;
  line-height: 45px;
}


```)

```css
<div class="baner">
      
      <div class="w">
        <div class="subnav">
          <ul>
            <li><a href="#">前端开发a>li>
            <li><a href="#">后端开发a>li>
            <li><a href="#">移动开发a>li>
            <li><a href="#">人工智能a>li>
            <li><a href="#">商业预测a>li>
            <li><a href="#">云计算&大数据a>li>
            <li><a href="#">运维&从测试a>li>
            <li><a href="#">UI设计a>li>
            <li><a href="#">产品a>li>
          ul>
        div>
      div>
    div>
我想要达到的结果

img

跑了一下你的代码，没发现那个有掉下去的

img

<head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .baner {
                height: 420px;
                background-color: #1c036c;
            }

            .baner .w {
                background-color: pink;
                height: 420px;
                background: url(/images/banner2.png);
            }

            .baner .subnav {
                width: 190px;
                height: 420px;
                background: rgba(0, 0, 0, 0.5);
            }

            .subnav ul li {
                height: 45px;
                line-height: 45px;
            }
        </style>
    </head>
    <body>
        <div class="baner">
            <div class="w">
                <div class="subnav">
                    <ul>
                        <li><a href="#"> 前端开发 </a></li>
                        <li><a href="#"> 后端开发 </a></li>
                        <li><a href="#"> 移动开发 </a></li>
                        <li><a href="#"> 人工智能 </a></li>
                        <li><a href="#"> 商业预测 </a></li>
                        <li><a href="#"> 云计算&大数据 </a></li>
                        <li><a href="#"> 运维&从测试</a> </li>
                        <li><a href="#"> UI设计 </a></li>
                        <li><a href="#"> 产品 </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>

回答：没有呀，a运行效果应该是和你想要的一样啊，并没有往下掉，顶多是没有右边的箭头和悬浮效果了

<!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">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .baner {
            height: 420px;
            background-color: #9c99a6;
        }

        .baner .w {
            background-color: pink;
            height: 420px;
            background: url(/images/banner2.png);
        }

        .baner .subnav {
            width: 190px;
            height: 420px;
            background: rgba(0, 0, 0, 0.5);
        }

        .subnav ul li {
            height: 45px;
            line-height: 45px;
        }

        .subnav ul li a {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div class="baner">
        <div class="w">
            <div class="subnav">
                <ul>
                    <li><a href="#">前端开发</a></li>
                    <li><a href="#">后端开发</a></li>
                    <li><a href="#">移动开发</a></li>
                    <li><a href="#">人工智能</a></li>
                    <li><a href="#">商业预测</a></li>
                    <li><a href="#">云计算&大数据</a></li>
                    <li><a href="#">运维&从测试</a></li>
                    <li><a href="#">UI设计</a></li>
                    <li><a href="#">产品</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>

img