CSS不会显示下拉菜单

时间：2020-07-01 15:34:29

标签： html css menu navigation dropdown

我正在关注weSchools的guide，以便在导航栏中创建一个下拉菜单。

我的问题是，除非我从overflow: hidden类中删除CSS属性ul，否则它将不会显示。这会破坏页面的布局并删除背景颜色等。

我尝试过display: block的开/关，但下拉菜单却没有出现，就像w3school教程一样。

我认为直接在CSS中使用自定义类.sticky而不是ul可能存在一些问题，它是继承还是不继承某些东西？

这是我的HTML / CSS。我已经遍历了多次以与w3schools示例进行比较，除ul标记之外没有其他区别。如果我从.sticky导航列表中删除了ul，那么它将丢失格式并影响页脚中的另一个ul。因此，我需要为此标题导航列表定义一个自定义类。

.sticky {
    /*float: right;*/
    /*color: white;*/
    list-style-type: none;
    /*width: 100%;*/
    margin: 0;
    padding: 0;
    overflow: hidden;

    border-radius: 0 0 10px 10px;
    background-color: #333;
    position: sticky;
    top: 0;
    z-index: 2;
}

li {
    float: right;
    /*padding-right: 20px;*/
    /*padding-left: 20px;*/
    color: white;
}

li a, .dropBtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;

    font-family: monospace;
    border-bottom: 2px solid #333;
    /*margin-bottom: 10px;*/
}

li a:hover, .dropdown:hover .dropBtn {
    /*background-color: #454542;*/
    text-decoration: none;
    color: white;
    /*border-radius: 10%;*/
    padding: 14px 16px;
    border-bottom: 2px solid #fff922;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content{
    display: block;
    /*border-bottom: 2px solid #fff922;*/
}

li a:active {
    /*background-color: deeppink;*/
    /*    add some transition here */
}
<ul class="sticky">
    <li><a class="active" href="#contact">Contact</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#about">About</a></li>
    <li class="dropdown">
            <a href="javascript:void(0)" class="dropBtn">Dropdown</a>
            <div class="dropdown-content">
                <a href="#">Item</a>
                <a href="#">Item</a>
                <a href="#">Item</a>
                <a href="#">Item</a>
            </div>
    </li>
    <li><a href="#home">Home</a></li>
</ul>

4 个答案:

答案 0 :(得分：1)

从选择器中删除dbtest/ |_ src/ | |_ __init__.py | |_ a_module.py | |_ a_script.py |_ setup.py ，position:sticky;是一个关键字，因此我将其更改为sticky以供参考。

Links
.Links {
  /*float: right;*/
  /*color: white;*/
  list-style-type: none;
  /*width: 100%;*/
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0 0 10px 10px;
  background-color: #333;
  top: 0;
  z-index: 2;
}

li {
  float: right;
  /*padding-right: 20px;*/
  /*padding-left: 20px;*/
  color: white;
}

li a,
.dropBtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: monospace;
  border-bottom: 2px solid #333;
  /*margin-bottom: 10px;*/
}

li a:hover,
.dropdown:hover .dropBtn {
  /*background-color: #454542;*/
  text-decoration: none;
  color: white;
  /*border-radius: 10%;*/
  padding: 14px 16px;
  border-bottom: 2px solid #fff922;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  background-color: red;
}

.dropdown-content a:hover {
  background-color: red;
}

.dropdown:hover .dropdown-content {
  display: block;
  /*border-bottom: 2px solid #fff922;*/
}

答案 1 :(得分：1)

当然可以很粘；）

.sticky {
  /* float: right; */
  /* color: white; */
  list-style-type: none;
  /* width: 100%; */
  margin: 0;
  padding: 0;
  /* overflow: hidden; */
  border-radius: 0 0 10px 10px;
  background-color: #333;
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: row-reverse;
}

li {
  float: right;
  /*padding-right: 20px;*/
  /*padding-left: 20px;*/
  color: white;
}

li a,
.dropBtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: monospace;
  border-bottom: 2px solid #333;
  /*margin-bottom: 10px;*/
}

li a:hover,
.dropdown:hover .dropBtn {
  /*background-color: #454542;*/
  text-decoration: none;
  color: white;
  /*border-radius: 10%;*/
  padding: 14px 16px;
  border-bottom: 2px solid #fff922;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
  /*border-bottom: 2px solid #fff922;*/
}

li a:active {
  /*background-color: deeppink;*/
  /*    add some transition here */
}
<ul class="sticky">
  <li><a class="active" href="#contact">Contact</a></li>
  <li><a href="#">Projects</a></li>
  <li><a href="#about">About</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropBtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Item</a>
      <a href="#">Item</a>
      <a href="#">Item</a>
      <a href="#">Item</a>
    </div>
  </li>
  <li><a href="#home">Home</a></li>
</ul>

test <br> test <br> test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test
<br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test
<br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test
<br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>

答案 2 :(得分：1)

问题在于您正在制作li元素float: right

float属性将元素从正常流程中移除。

float CSS属性将元素放置在其容器的左侧或右侧，从而允许文本和行内元素环绕。该元素已从页面的常规流程中删除，尽管仍然保留了一部分。

因此，您的ul实际上在呈现时没有任何高度，因此会引起此问题。只需从li样式规则中删除float，然后使其变为display: inline-block。

.sticky {
    /*float: right;*/
    /*color: white;*/
    list-style-type: none;
    /*width: 100%;*/
    margin: 0;
    padding: 0;
    border-radius: 0 0 10px 10px;
    background-color: #333;
    position: sticky;
    top: 0;
    z-index: 2;
}

li {
    display:inline-block;
    color: white;
}

li a, .dropBtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;

    font-family: monospace;
    border-bottom: 2px solid #333;
    /*margin-bottom: 10px;*/
}

li a:hover, .dropdown:hover .dropBtn {
    /*background-color: #454542;*/
    text-decoration: none;
    color: white;
    /*border-radius: 10%;*/
    padding: 14px 16px;
    border-bottom: 2px solid #fff922;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
    background: #000;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content{
    display: block;
    /*border-bottom: 2px solid #fff922;*/
}

li a:active {
    /*background-color: deeppink;*/
    /*    add some transition here */
}
<ul class="sticky">
    <li><a class="active" href="#contact">Contact</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#about">About</a></li>
    <li class="dropdown">
            <a href="javascript:void(0)" class="dropBtn">Dropdown</a>
            <div class="dropdown-content">
                <a href="#">Item</a>
                <a href="#">Item</a>
                <a href="#">Item</a>
                <a href="#">Item</a>
            </div>
    </li>
    <li><a href="#home">Home</a></li>
</ul>

答案 3 :(得分：1)

完全固定，包括样式：https://jsfiddle.net/L9nw5et0/ 

.sticky {
    list-style-type: none;
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0 0 10px 10px;
    background-color: #333;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
}

li {
    float: right;
    color: white;
    margin: 0;
}

li a,
.dropBtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: monospace;
    padding-bottom: 16px;
}

li a:hover,
.dropdown:hover .dropBtn {
    text-decoration: none;
    color: white;
    padding: 14px 16px;
    border-bottom: 2px solid #fff922;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #333;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    padding: 12px 16px;
    border-radius: 0 0 10px 10px;
}

.dropdown-content a {
    color: white;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown:hover .dropdown-content {
    display: block;
}
相关问题
最新问题