为什么再增加6个 appear for no reason?

问题描述 投票：0回答：1

我正在尝试创建一个下拉菜单，但是当我尝试将其变成可点击的下拉菜单时，一些链接标签开始无故出现。我试图更改一些线路代码并使用它，但无法理解问题所在有谁知道为什么会这样吗？我是新手，希望在此问题上有所帮助

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #DropDown
    {
    display:inline-block;
    color: white;
    position:relative;
    min-width:160px;
    border:solid black 2px;
    margin:auto;
    background-color:pink;
    }

    #DropDown-content
    {
    max-width:10%;
    display: none;
    position:absolute;
    min-width:160px;
    }

    #DropDown:hover #DropDown-content
    {
    display:block;
    }

    #DropDown-content ul
    {
    padding:0px;
    margin:0px;
    border:solid black 2px;
    list-style-type:none;
    background-color:white;
    }

    #DropDown-content a
    {
    float: center;
    border-bottom:solid black 2px;
    padding:9px;
    display:block;
    color:black;
    text-decoration:none;
    }
    
    #DropDown-content a:hover
    {
    background-color:gray;
    }
    </style>
    </head>
    <body>

    <div id="DropDown">
    <p>Hello</p>
    <div id="DropDown-content">
    <ul>
    <li><a href="">Hi<a></li>
    <li><a href="">Hi<a></li>
    <li><a href="">Hi<a></li>
    </ul>	
    </div>
    </div>

 

    </body>
    </html>
html css drop-down-menu html-lists
1个回答
0
投票

这是因为您没有关闭<a>元素-每个标签都被呈现为单独的元素。

将其更改为

<ul>
<li><a href="">Hi</a></li>
<li><a href="">Hi</a></li>
<li><a href="">Hi</a></li>
</ul>


#DropDown {
  display:inline-block;
  color: white;
  position:relative;
  min-width:160px;
  border:solid black 2px;
  margin:auto;
  background-color:pink;
}

#DropDown-content {
  max-width:10%;
  display: none;
  position:absolute;
  min-width:160px;
}

#DropDown:hover #DropDown-content {
  display:block;
}

#DropDown-content ul {
  padding:0px;
  margin:0px;
  border:solid black 2px;
  list-style-type:none;
  background-color:white;
}

#DropDown-content a {
  float: center;
  border-bottom:solid black 2px;
  padding:9px;
  display:block;
  color:black;
  text-decoration:none;
}

#DropDown-content a:hover {
  background-color:gray;
}
<div id="DropDown">
  <p>Hello</p>
  <div id="DropDown-content">
    <ul>
      <li><a href="">Hi</a></li>
      <li><a href="">Hi</a></li>
      <li><a href="">Hi</a></li>
    </ul>	
  </div>
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.