Question

我非常喜欢学习CSS。不知怎的，我开发了这个菜单栏。但是当我将鼠标悬停在主菜单“主人”或“派对”链接上时，我的子菜单会扰乱我的主菜单宽度。我做了所有类型的代码刮，但找不到任何错误。

这是它的JSFiddle - https://jsfiddle.net/0jwtwrec/

.index-main-nav {
  z-index: 5;
  position: fixed;
  margin-top: 83.2px;
  width: 99.95%;
  background-color: #5f5f5f;
  box-shadow: 0 3px 5px grey;
  height: 46px;
}

.index-main-nav li {
  list-style-type: none;
}

.index-main-nav a {
  text-decoration: none;
  color: #ffffff;
  font-size: 19px;
  letter-spacing: 1px;
  cursor: default;
  font-family: 'Segoe UI', Arial, sans-serif;
  transition: all 0.3s ease-out;
}

.index-main-nav li:hover>a {
  background-color: #4CAF50;
}

.index-main-nav>ul>li {
  float: left;
  display: inline;
}

.index-main-nav>ul>li>a {
  padding: 10px 30px;
  display: flex;
}

.index-main-nav li:hover .index-sub-menu {
  display: block;
}

.index-sub-menu {
  display: none;
  //width: 120%;
  padding-top: 1px;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
  background-color: #2e2728;
  border-radius: 0 0 6px 6px;
  transition: all 0.3s ease-out;
}

.index-sub-menu li a {
  display: block;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

.index-sub-menu ul>li:last-child a {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

<div id="index-main-nav-id" class="index-main-nav">

  <ul style="margin: 0; padding: 0;">
    <li><a href="index.php" style="">Home</a></li>
    <li><a style="width: px;">Master</a>
      <div class="index-sub-menu">
        <ul style="margin: 0; padding: 0;">
          <li><a href="?us=<?php echo base64_encode('getUserList');?>&page=<?php echo base64_encode(1);?>">User list</a></li>
          <li><a href="?par=<?php echo base64_encode('getPartyList');?>&page=<?php echo base64_encode(1);?>">Party List</a></li>
          <li><a href="?comp=<?php echo base64_encode('getComponentList');?>&page=<?php echo base64_encode(1);?>">Component List</a></li>
        </ul>
      </div>
    </li>
    <li><a style="width: 110px;">Party</a>
      <div class="index-sub-menu">
        <ul style="margin: 0; padding: 0;">
          <li><a href="?us=<?php echo base64_encode('getUserList');?>&page=<?php echo base64_encode(1);?>">User list</a></li>
          <li><a href="?par=<?php echo base64_encode('getPartyList');?>&page=<?php echo base64_encode(1);?>">Party List</a></li>
          <li><a href="?comp=<?php echo base64_encode('getComponentList');?>&page=<?php echo base64_encode(1);?>">Component List</a></li>
        </ul>
      </div>
    </li>

  </ul>
</div>

Answer 1

只需将子菜单设置为绝对位置。

.index-sub-menu {
  ...
  position: absolute;
}

根据需要添加.index-main-nav > li {position: relative;}。

注意，对于评论，请使用/* comment */而非// comment进行普通CSS。

<强> jsFiddle

防止子菜单影响主菜单宽度

1 个答案: