Question

我需要使用CSS3创建导航栏。预期结果的快照如下所示

enter image description here

我使用了<nav> <li> <ul>标签来创建页面的框架，并添加了一些CSS3以模拟所需的输出。当鼠标悬停在导航栏中的“产品”标题上时，必须显示产品下拉菜单。包括快照中指示的适当颜色更改。

CSS3方案如下

这是到目前为止我尝试过的代码，但是我遇到了一些错误，例如失败1-CSS元素错误。请帮助我了解问题出在哪里。

<!DOCTYPE HTML>
<html lang="en">

<head>
  <meta charset=utf-8>
  <title>Create a simple Navigation bar</title>
  <style type="text/css">
    nav {
      position: absolute;
      display: inline-block;
      top: 0;
      width: 100%;
      background-color: green;
    }
    
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: green;
    }
    
    li {
      list-style-type: none;
      display: inline;
      margin-right: 20px;
      font-size: 25px;
    }
    
    a {
      a: link;
      text-decoration: none;
    }
    
    li:hover ul {
      display: block;
      position: absolute;
      left: 200px;
      background-color: green;
      background-repeat: no-repeat;
      margin: 0;
    }
    
    li:hover ul li a:link {
      display: block;
      margin-left: 30px;
      background-repeat: no-repeat;
    }
    
    a:hover {
      color: yellow;
      text-decoration: none;
    }
  </style>
</head>

<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li>
        <a href="#">Products</a>
        <ul>
          <li><a href="#">Engineering</a></li>
          <li><a href="#">Telecom</a></li>
          <li><a href="#">Energy</a></li>
          <li><a href="#">Finance</a></li>
          <li><a href="#">Consultancy</a></li>
        </ul>
      </li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>

</html>

Answer 1

您好，欢迎来到StackOverflow：）

这是我尽力弄清楚规范描述的内容-我在CSS中添加了注释，以帮助您将其映射回规范。

关于您的代码到底有什么问题-很难说出来，因为还有很多额外的事情要进行。它通常有助于使CSS中的事情保持简单（实际上几乎所有代码都如此）。我从头开始，转载了规格说明，以获取以下解决方案。

奖金提示：使用Chome开发工具（或其他特定于浏览器的类似工具）可以帮助您调试CSS如何应用于每个元素。

/*
The nav section in the spec. Pretty much verbatim as the spec describes it
*/
nav {
  display: block;
  position: absolute;
  width: 100%;
  background-color: green;
  top: 0;
}

/*
The li section in the spec. Pretty much verbatim as the spec describes it
*/
li {
  list-style-type: none;
  display: inline;
  margin-right: 20px;
  font-size: 25px;
}

/* This is missing from the spec. Used to hide the submenu initially */
li>ul {
  display: none;
}


/*
The li:hover ul section in the spec. Pretty much verbatim as the spec describes it
*/
li:hover>ul {
  display: block;
  position: absolute;
  left: 200px;
  background-color: green;
  margin: 0;
}


/*
The li:hover ul li a:link section in the spec. Pretty much verbatim as the spec describes it
*/
li:hover>ul>li>a {
  display: block;
  margin-left: -30px;
}

/*
The a a:link section in the spec. Pretty much verbatim as the spec describes it
*/
a {
  color: #fff;
  text-decoration: none;
}
/*
The a a:hover section in the spec. Pretty much verbatim as the spec describes it
*/
a:hover {
  color: orange;
}

<!DOCTYPE HTML>
<html lang="en">

<head>
  <meta charset=utf-8>
  <title>Create a simple Navigation bar</title>
</head>

<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li>
        <a href="#">Products</a>
        <ul>
          <li><a href="#">Engineering</a></li>
          <li><a href="#">Telecom</a></li>
          <li><a href="#">Energy</a></li>
          <li><a href="#">Finance</a></li>
          <li><a href="#">Consultancy</a></li>
        </ul>
      </li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>

</html>

在调整CSS以匹配给定规范方面需要帮助

1 个答案: