Question

我试图创建自己的select选项元素。但是当我尝试固定位置并将一些css应用于li标签时，则不会显示所有li列表。它只显示一个列表。我尝试了很多，但不能！请帮我！这是我的简短代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dropdown Menu</title>
    <style>
        #main-content{
            height: 380px;
            width: 700px;
            background-color: #3498db;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        span{
            font-size: 1.5em;
        }
        a{
            font-size: 1em;
        }
        ul li{
            background-color: #e74c3c;
            padding: 0.3em 5em 0.3em 0.3em;
            cursor: pointer;
            list-style: none;
            position: fixed;

        }
        li:hover{
            background-color: #dadada;
        }
    </style>
</head>
<body>
    <div id = "main-content">
        <div id = "menu">
            <ul id = "menus">
                <span>Select...&nbsp;<a href = "javascript:void(0);" id = "content">></a></span>   
                <li>Sausage</li>
                <li>Burger</li>
                <li>Chicken</li>
            </ul>
        </div>    
    </div>
</body>
</html>

Answer 1

position:fixed修正了元素的位置，在您的情况下它位于li元素中，因此所有li元素都重叠，您只能看到最后一个li元素{1}}元素。

此外，要显示和隐藏列表项，您可以使用display: none和display: block。

更新（在评论中提问）： 下拉列表下方的文字不应移到鼠标悬停下拉元素 。

#menu{
       position:relative;
    }

ul{
    position:absolute;
    z-index:1;
    left:0;
    top:10px;
    padding-left: 10px;
}

＆＃13;

#main-content {
  height: 380px;
  width: 700px;
  background-color: #3498db;
  padding:20px;
}

span {
  font-size: 1.5em;
}

a {
  font-size: 1em;
}

#menu{
  position:relative;
}

ul{
  position:absolute;
  z-index:1;
  left:0;
  top:10px;
  padding:0 10px;
}

ul li {
  background-color: #e74c3c;
  padding: 0.3em 5em 0.3em 0.3em;
  cursor: pointer;
  list-style: none;
  display: none;
  max-width:100px;  
}

li:hover {
  background-color: #dadada;
}

#menu:hover li {
    display: block;
}

＆＃13;

<div id="main-content">
  <div id="menu">
        <span>Select...&nbsp;<a href = "javascript:void(0);" id = "content">></a></span>
    <ul id="menus">
      <li>Sausage</li>
      <li>Burger</li>
      <li>Chicken</li>
    </ul>
    Some text. Some text. Some text. Some text<br/>
    Some text. Some text. Some text. Some text<br/>
  </div>
  Some text. Some text. Some text. Some text<br/>
  Some text. Some text. Some text. Some text<br/>
</div>

＆＃13;

固定的位置在无序列表标签中不起作用

1 个答案: