Question

所以我正在建立一个网站，我正在使用多个div来分组。但我在页面上添加一个div我的菜单被冻结，你不能再点击它了。此外，菜单上的叠加层不再起作用。以下是我的HTML代码：

    <html>
  <head>
    <title>TestManager - Dashboard</title>
    <link rel="stylesheet" type="text/css" href="style/createcase.css">
  </head>
  <body>
    <div class="menu">
      <ul class="menu">
        <li><a href="dashboard.html">Home</a></li>
        <li><a class="active" href="projects.html">Projects</a></li>
        <li><a href="createcase.html">Create Testcase</a></li>
        <li style="float:right"><a class="logoff" href="logout.html">Logout</a></li>
      </ul>
    </div>
    <div class="create">
      <div class="creatcase">
        <h3>Project Overview</h3>
      </div>
    </div>
  </body>
</html>
  <script>
    var userid = sessionStorage.getItem('userid');
    if (userid == null) {
      window.location.href = 'index.html';
    }
    console.log(sessionStorage.getItem('test'));
  </script>

以下是我的css文件

body{
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: monospace;
}
ul.menu{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  width: 100%;
}
ul.menu li{
  float: left;
}
ul.menu li a{
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
ul.menu li a:hover{
  background-color: #00cc33;
}
ul.menu .active{
  background-color: #00cc33;
}
.create{
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 80%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.creatcase{
    width: 292px;
    padding: 20px;
    background: whitesmoke;
    border-radius: 5px;
    border-top: 5px;
    margin: 0 auto;
}
.creatcase h3{
    text-align: center;
    color: black;
    font-size: 30px;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 20px;
}
.creatcase input{
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    font-size: 14px;
    font-family: monospace;
    padding: 0 20px 0 50px;
    outline: none;
}
.creatcase select{
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    font-size: 14px;
    font-family: monospace;
    padding: 0 20px 0 50px;
    outline: none;
}
.creatcase button{
    width: 100%;
    height: 40px;
    background: #00cc33;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #00e639;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 15px;
    font-family: monospace;
    outline: none;
    cursor: pointer;
    margin-bottom: 10px;
}
.creatcase button:hover{
    background: #33ff66;
}

我在这里缺少什么，因为我遇到了这个问题而无法找到解决方案

Answer 1

您的“创建”div覆盖整个屏幕，防止鼠标事件进入菜单。

.create{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

将此div放在菜单下方，如下所示：

body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: monospace;
}

ul.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  width: 100%;
}

ul.menu li {
  float: left;
}

ul.menu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul.menu li a:hover {
  background-color: #00cc33;
}

ul.menu .active {
  background-color: #00cc33;
}

.create {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 80%;
  position: absolute;
  top: 43px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.creatcase {
  width: 292px;
  padding: 20px;
  background: whitesmoke;
  border-radius: 5px;
  border-top: 5px;
  margin: 0 auto;
}

.creatcase h3 {
  text-align: center;
  color: black;
  font-size: 30px;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 20px;
}

.creatcase input {
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  font-size: 14px;
  font-family: monospace;
  padding: 0 20px 0 50px;
  outline: none;
}

.creatcase select {
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  font-size: 14px;
  font-family: monospace;
  padding: 0 20px 0 50px;
  outline: none;
}

.creatcase button {
  width: 100%;
  height: 40px;
  background: #00cc33;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid #00e639;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 15px;
  font-family: monospace;
  outline: none;
  cursor: pointer;
  margin-bottom: 10px;
}

.creatcase button:hover {
  background: #33ff66;
}

<div class="menu">
  <ul class="menu">
    <li><a href="dashboard.html">Home</a></li>
    <li><a class="active" href="projects.html">Projects</a></li>
    <li><a href="createcase.html">Create Testcase</a></li>
    <li style="float:right"><a class="logoff" href="logout.html">Logout</a></li>
  </ul>
</div>
<div class="create">
  <div class="creatcase">
    <h3>Project Overview</h3>
  </div>
</div>

......或者更好，但根本不使用绝对定位;它容易出现这种错误，而且很少需要。在这种情况下，只需执行此操作即可获得相同的一般效果：

.create {
  width: 100%;
  text-align: center;
  margin-top: 25%; /* <-- adjust to taste */
}

菜单已冻结，无法单击

1 个答案: