Question

由于某种原因，子项目不在中间，看起来由于某种原因他们留有余量。你能告诉我什么是错的以及如何解决它吗？

    <!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>Responsive Menu Tutorial</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="CSS-1.css">
</head>

<body>
    <ul class="egmenu">
    <li><a href="#">Home</a></li>
    <li>
    <a href="#" class="has-sub">Products</a>
        <ul>
          <li><a href="#">Computers</a></li>
          <li><a href="#">Phones</a></li>
          <li><a href="#">Tablets</a></li>
          <li><a href="#">Other</a></li>
        </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>



</body>
</html>

这是CSS：

body {
    margin: 0;
    padding: 0;
}

ul.egmenu {  
    background: #333; 
    height: 30px;
    width: 100%; 
}

ul.egmenu > li { 
    float: left; 
    position: relative;  
}

ul.egmenu ul {
    background: #444; 
    display: none; 
    position: absolute;
    left: 0; top: 100%;
}

ul.egmenu ul li {
    text-align: center;
}

ul.egmenu a { 
    cursor: pointer; 
    display: block; 
    color: white;
    width: 100%;
    line-height: 30px; 
    padding: 0 10px;
    text-decoration: none;
}

ul.egmenu li { list-style: none; }

ul.egmenu li:hover { background: #555;  }
ul.egmenu li:hover ul { display: block;  }

P.S。如果你告诉我在哪里可以找到一些课程或任何东西来修复我对CSS的理解，这也很好，因为看起来代码完成是不够的。

Answer 1

您错过了一些重要属性，我重新创建了导航栏

这里是JSFiddle：https://jsfiddle.net/y2641f0w/3/

<强> HTML

<body>
    <ul class="egmenu">
    <li><a href="#">Home</a></li>
    <li>
    <a href="#" class="has-sub">Products</a>
        <ul>
          <li><a href="#">Computers</a></li>
          <li><a href="#">Phones</a></li>
          <li><a href="#">Tablets</a></li>
          <li><a href="#">Other</a></li>
        </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>
</body>

<强> CSS

  body {
  margin: 0;
  padding: 0;

}

ul.egmenu{
  background: #333; 
    height: 30px;
    width: 100%; 

}

ul.egmenu ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}

ul.egmenu li {  
  font-size: 25px; 
  line-height: 30px;
  text-align: left;
}

ul.egmenu a {
  text-decoration: none;
  color: #fff;
  display: block;
  padding-left: 15px;
  border-bottom: 1px solid #888;
  transition: .3s background-color;
}
ul.egmenu a:hover {
  background-color:  #555;
}

ul.egmenu a.active {
  background-color: #aaa;
  color: #444;
  cursor: default;
}

/* Sub Menus */
ul.egmenu li li {
  font-size: 15px;
}



@media screen and (min-width: 650px) {
  ul.egmenu li {
    width: 130px;
    border-bottom: none;
    height: 30px;
    line-height: 30px;
    font-size: 15px;
    display: inline-block;
    margin-right: -4px;
  }

  ul.egmenu a {
    border-bottom: none;
  }

ul.egmenu > ul > li {
    text-align: center;
  }

  ul.egmenu > ul > li > a {
    padding-left: 0;
  }

  /* Sub Menus */
  ul.egmenu li ul {
    position: absolute;
    display: none;
    width: inherit;
  }

ul.egmenu li:hover ul {
    display: block;
  }

  ul.egmenu li ul li {
    display: block;
  }
}

您可以参考以下内容获取有关NavBars的更多信息

主菜单中的子项目未经中断

1 个答案: