孩子放在父母的兄弟姐妹后面。

I made a navbar with this structure order:

我用这个结构顺序做了一个导航条:

Floating logo (z-index: 9)
浮动的标志(z - index:9)
Topmost navbar (z-index: 8)
最高的导航(z - index:8)
Sidebar (z-index: 7)
侧边栏(z - index:7)
Menu list (z-index: 6)
菜单列表(z - index:6)
"Employee List" div (z-index: -1)
“雇员名册”科(z-index: -1)

When I hover each menu on the list, it should show the dropdown menu (which I put as each menu's child). So far it always seen below the "Employee List" div no matter what z-index I put on it. Can I make it so the dropdown put above it? Is there anything I can do other than putting the dropdown outside the navbar and position it using jquery?

当我把菜单上的每个菜单都停在列表上时，它应该显示下拉菜单(我把它作为每个菜单的子菜单)。到目前为止，它总是出现在“员工列表”下面，不管我在它上面加了什么z索引。我能把它放在上面吗?除了将下拉菜单放到navbar之外，我还能做什么吗?

Additionally, I want the dropdown get hidden when I hover things other than the menu list or the dropdown itself.

另外，当我把鼠标悬停在菜单列表或下拉菜单上时，我希望下拉菜单被隐藏起来。

I'm new in this so please bear with my basic question. Anyone can help me with this? Any help appreciated! :)

我是新手，所以请接受我的基本问题。有人能帮我吗?任何帮助表示赞赏!:)

$(".burger-btn-wrapper").click(function() {
  $(".main-sidebar").toggleClass("main-sidebar-view");
});

.container {
  height: 768px; 
}

.navbar {
  display: block; 
  width: 100%;
  position: relative;
  margin-bottom: 640px;
  color: #333;
  background-color: #fff;
}

.navbar-logo-wrapper {
  position: absolute;
  height: 60px;
  width: 80px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 9;
}

.navbar-logo-wrapper img {
  width: 32px;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.navbar-top {
  width: 100%;
  height: 60px;
  box-shadow: 0px 1px 8px 0 rgba(0,0,0,0.1);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 32px;
  box-sizing: border-box;
  position: relative;
  background-color: #fff;
  z-index: 8;
}

.navbar-top-left {
  z-index: 999;
}

.burger-btn-wrapper {
  display: inline-block;
  text-align: center;
  margin: 0 16px 0 0;
}

.burger-btn-wrapper i {
  font-size: 16px; 
  color: #333;
  line-height: 60px;
  transform: translateY(1px);
}

.module-name {
  height: 60px;
  line-height: 60px;
  text-transform: uppercase;
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #333;
}

.navbar-top-right {
  z-index: 999; 
}

.navbar-top-middle {
  height: 60px;
  text-align: center;
  position: relative;
  line-height: 0;
}

.modules-icon {
  vertical-align: middle;
  display: inline-block;
  width: 60px;
  text-align: center;
}

.modules-icon i {
  font-size: 16px; 
  color: #333;
  line-height: 60px;
}

.navbar-profile {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
  cursor: pointer;
}

.navbar-profile img {
    vertical-align: top;
}
.profpic-wrapper {
  display: inline-block;
  vertical-align: middle;
  width: 60px;
  height: 60px;
  cursor: pointer;
}

.navbar-profpic {
  width: 40px;
  height: 40px;
  background-color: #00c983;
  border-radius: 40px;
  position: relative;
  margin-left: 10px;
  margin-top: 10px;
}

.profile-initial {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

.profile-name {
  display: inline-block;
  vertical-align: middle;
  font-size: 13px;
}

.profile-dropdown-icon {
  vertical-align: middle;
  display: inline-block; 
  margin-left: 8px;
}

.profile-dropdown-icon i {
  font-size: 10px; 
}

.navbar-wrapper {
  display: inline-block;
  width: 100%;
}

.navbar-top-middle img {
  height: 32px; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.navbar-menu {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  z-index: 6;
}

.navbar-menu-list {
  width: 750px;
  list-style-type: none;
  margin: 0;
  padding: 15px 0;
  cursor: pointer;
  margin-left: 0;
}

.navbar-menu-each {
  padding-left: 32px;
  padding-right: 32px;
  display: inline-block;
  position: relative;
}

.navbar-menu-each:first-child {
  padding-left: 32px; 
}

.navbar-menu-each a {
  color: #333;
  font-size: 13px;
  text-decoration: none;
}

.menu-on a {
  font-weight: 700;
  color: #00c983;
}

.navbar-page-name {
  display: block;
  font-size: 22px;
  height: 60px;
  line-height: 60px;
  border-top: solid 0.5px #DEF5ED;
  border-bottom: solid 0.5px #DEF5ED;
  background-color: #F0FBF7;
  color: #333;
  padding-left: 32px;
  z-index: -1;
}

.navbar-menu::-webkit-scrollbar {
  height: 0;
}

.navbar-menu::-webkit-scrollbar-thumb {
  background-color: transparent;
}

.profile-dropdown {
  background-color: #fff; 
  box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
  position: absolute;
  cursor: pointer;
  top: 106px;
}

.submenu-dropdown {
  display: none;
  background-color: #fff;
  box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.15);
  cursor: pointer;
  position: absolute;
  top: 20px;
  left:0;
}

.navbar-menu-each:hover > .submenu-dropdown,
.submenu-dropdown:hover {
  display: block;
}

.submenu-dropdown-each {
  display: block;
  line-height: 48px;
  font-size: 13px;
  color: #333;
  width: auto;
  padding: 0 32px 0 24px;
}

.submenu-dropdown-each:hover {
  background: #f8f8f8;
}

.submenu-selected {
  font-weight: 700;
  color: #00c983;
} 

.main-sidebar {
  background-color: #fff;
  box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
  width: 240px;
  font-size: 13px;
  color: #333;
  position: absolute;
  top: 51px;
  left: -260px;
  -webkit-transition: left 0.5s;
  transition: left 0.5s;
  height: 717px;
  z-index: 7;
}

.main-sidebar-list-wrapper {
  height: 669px;
  width: 240px;
  overflow: auto;
}

.main-sidebar-view {
   left: 0;
   -webkit-transition: left 0.5s;
   transition: left 0.5s;
}

.sidebar-section {
  width: 240px; 
}

.sidebar-section li {
  display: block;
  line-height: 48px;
  padding-left: 16px;
  height: 48px;
}

.sidebar-section-title {
  border-bottom: solid 1px #eee;
  font-size: 16px;
}

.sidebar-icon {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 48px;
}

.sidebar-icon img {
  width: 18px; 
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.sidebar-menu {
  display: inline-block; 
  vertical-align: top;
}

.main-sidebar-list-wrapper::-webkit-scrollbar {
  height: 0;
}

.main-sidebar-list-wrapper::-webkit-scrollbar-thumb {
  background-color: transparent;
}

.main-sidebar-footer {
  height: 48px;
  line-height: 48px;
  text-align: center;
  border-top: solid 1px #eee;
}

@media (max-width: 767px) and (min-width: 576px) {
  .navbar-top {
    padding: 0 24px; 
  }
  
  .navbar-menu-each:first-child {
    padding-left: 24px; 
  }
  
  .navbar-page-name {
    padding-left: 24px;
  }
  
  .callout {
    right: 94px;
  }
}

@media (max-width: 575px) {
  .module-name {
    display: none; 
  }
  
  .profile-name {
    display: none; 
  }
  
  .modules-icon {
    display: none; 
  }
  
  .navbar-top {
    padding: 0 16px; 
  }
  
  .navbar-menu-each:first-child {
    padding-left: 16px; 
  }
  
  .navbar-page-name {
    padding-left: 16px;
  }
  
  .profile-dropdown-icon {
    margin-left: 0; 
  }
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">

<div class="container">

<div class="navbar">
  
  

<div class="main-sidebar">
  <div class="main-sidebar-list-wrapper">
  <ul class="sidebar-section">
    <li class="sidebar-section-title">Organization</li>
    <li class="sidebar-section-each">
      <span class="sidebar-icon"><img src="https://cdn.frontify.com/api/screen/thumbnail/YlkzS0yo52ARysEUFWYs53WfQH7D1kGaAoxmnqhpSOX7nDKTgYxPsF8CuP-EQlJBNM_ye68YqYc2J0BcSLPJwg/159"></span>
      <span class="sidebar-menu">Setup</span>
    </li>
    <li class="sidebar-section-each">
      <span class="sidebar-icon"><img src="https://cdn.frontify.com/api/screen/thumbnail/LZ44Z0dPvtn2OCGT02lwNZuaUK76Zw69uaYSF4sTe63PtTpKS4IiUM7LjsV5VvlH1hsB6bZM4rA8g9fVsYgUzg/192"></span>
      <span class="sidebar-menu">Company</span>
    </li>
    <li class="sidebar-section-each">
      <span class="sidebar-icon"><img src="https://cdn.frontify.com/api/screen/thumbnail/8pNCxwrs9k-2fnR6iCzgQ-FEhutp_EcFTTfb9jD207NZSwBU98yuTSPZAKwsh7muBJKKG-MBcsgoqbEpXnZLnQ/213"></span>
      <span class="sidebar-menu">Employee</span>
    </li>
    <li class="sidebar-section-each">
      <span class="sidebar-icon"><img src="https://cdn.frontify.com/api/screen/thumbnail/mE5M0CywlR63kvqGKenpBEdDFYpOnpHB02javJrGr8r0gJGl_-vuUnKJJpWe6pZChsjIq1yXUgofhicw7MvFCw/177"></span>
      <span class="sidebar-menu">Termination</span>
    </li>
  </ul>
  <ul class="sidebar-section">
    <li class="sidebar-section-title">Compensation &amp; Benefits</li>
    <li class="sidebar-section-each">
      <span class="sidebar-icon"><img src="https://cdn.frontify.com/api/screen/thumbnail/YlkzS0yo52ARysEUFWYs53WfQH7D1kGaAoxmnqhpSOX7nDKTgYxPsF8CuP-EQlJBNM_ye68YqYc2J0BcSLPJwg/159"></span>
      <span class="sidebar-menu">Setup</span>
    </li>
    <li class="sidebar-section-each">
      <span class="sidebar-icon"><img src="https://cdn.frontify.com/api/screen/thumbnail/vYgvWe324-eiGFdWDNoBi7WrWHUAFhEbZCoLWve5NE2rBrFrGmK7ZLjW3W0ggCHce1BCyY6FFTzxRm-Fg9VmBA/168"></span>
      <span class="sidebar-menu">BPJS Ketenagakerjaan</span>
    </li>
    <li class="sidebar-section-each">
      <span class="sidebar-icon"><img src="https://cdn.frontify.com/api/screen/thumbnail/bVKXdl3sBeP8-w1wTrEapdUOlcJFSPi4_koRbRVtzL2NR8N-BPZdJUdpPWjSXC13Um6GLbt5DO1DV2t_j7hQDw/168"></span>
      <span class="sidebar-menu">BPJS Kesehatan</span>
    </li>
    <li class="sidebar-section-each">
      <span class="sidebar-icon"><img src="https://cdn.frontify.com/api/screen/thumbnail/TaVNZzoRbkdvziFtWEyv4sEVQMnVVteQt2CB9aCU4xyOdTaCTDAqL9mqUA-3nGmdJZ7qzLZbxXr2xfXjlVDpDg/173"></span>
      <span class="sidebar-menu">Payroll</span>
    </li>
    <li class="sidebar-section-each">
      <span class="sidebar-icon"><img src="https://cdn.frontify.com/api/screen/thumbnail/NAZCBsbI_bURxMPsr3N05H2_d8KSiz_RtfaMqHp8Tg8tKFEb4RN-5aHgFQiz0y05Ik4BAD8RMRb5LC-Ufg35zA/175"></span>
      <span class="sidebar-menu">PPh 21</span>
    </li>
  </ul>
  <ul class="sidebar-section">
    <li class="sidebar-section-title">Admin Panel</li>
    <li class="sidebar-section-each">
      <span class="sidebar-icon"><img src="https://cdn.frontify.com/api/screen/thumbnail/FNTOwLJTLz1ndzUxgINBH_tCYJgn7rp-HvtVlpTSN1RQ1yuy1q7UskqQikaey0uHl2Fu7C-rXOgaw_VsGH82Lg/136"></span>
      <span class="sidebar-menu">User Management</span>
    </li>
    <li class="sidebar-section-each">
      <span class="sidebar-icon"><img src="https://cdn.frontify.com/api/screen/thumbnail/DLaWkbWQ4jxYfEVNpCKBxOyS8G1mzuN24jzbf62tvMsYRvMD0zob2s2K1mBCj62YTYM_MaQmJlt6KmS0WY2uwA/159"></span>
      <span class="sidebar-menu">Master Data</span>
    </li>
    <li class="sidebar-section-each">
      <span class="sidebar-icon"><img src="https://cdn.frontify.com/api/screen/thumbnail/h2z5yDkjFcZ5OwhHWcI6VrhUL9Yj-u43QPEjlo7XyHE2pR-ghxrJdXw8mfB5C89AzEd403gqfCrd2JAUMbJ1xQ/199"></span>
      <span class="sidebar-menu">Log</span>
    </li>
    <li class="sidebar-section-each">
      <span class="sidebar-icon"><img src="https://cdn.frontify.com/api/screen/thumbnail/cn4XSK1tZu9KoSq5Q7iQXAMWcqjw5JolDHCvP52UD2wvu2brkBoit1F7SDUJmFVChGbo1LthZixKzx5ee3jJsQ/156"></span>
      <span class="sidebar-menu">Data Migration</span>
    </li>
  </ul>
  </div>
  <div class="main-sidebar-footer">
    &copy; CATAPA 2017
  </div>
</div>
  
  <div class="navbar-logo-wrapper">
    <img class="navbar-tree" src="https://cdn.frontify.com/api/screen/thumbnail/7UV_lfX5OBfHxFn5lc3ygK8UTU3z5pivwY9QDSDIOiFemj-DdmDzmwiPvbibaG63IMXz-MmGOs4aH-UqgoT9gw/350">
  </div>
  <div class="navbar-top">
    <div class="navbar-top-left">
      <div class="burger-btn-wrapper">
        <i class="fas fa-bars"></i>
      </div>
      <div class="module-name">Employee</div>
    </div>
    <div class="navbar-top-right">
      <div class="modules-icon"><i class="fas fa-th"></i></div>
      <div class="navbar-profile">
        <div class="profpic-wrapper">
          <div class="navbar-profpic">
            <div class="profile-initial">DJ</div>
          </div>
        </div>
        <div class="profile-name">Dennis Jonathan</div>
        <div class="profile-dropdown-icon"><i class="fas fa-chevron-down"></i></div>
      </div>
    </div>
  </div>
  <div class="navbar-menu">
    <ul class="navbar-menu-list">
      <li class="navbar-menu-each">
        <a href="#">Employee Directory</a>
        <ul class="submenu-dropdown">
          <li class='submenu-dropdown-each'>New Employee Registration</li>
          <li class='submenu-dropdown-each submenu-selected'>Employee List</li>
          <li class='submenu-dropdown-each'>Employee Rehire</li>
          <li class='submenu-dropdown-each'>Employee Without Bank Account</li>
          <li class='submenu-dropdown-each'>Employee Without PPh 21</li>
        </ul>
      </li>
      <li class="navbar-menu-each">
        <a href="#">Memo</a>
        <ul class="submenu-dropdown">
          <li class='submenu-dropdown-each'>Memo Template</li>
          <li class='submenu-dropdown-each'>Print Memo</li>
        </ul>
      </li>
      <li class="navbar-menu-each"><a href="#">Bulk Update</a>
        <ul class="submenu-dropdown">
          <li class='submenu-dropdown-each'>Download &amp; Upload</li>
          <li class='submenu-dropdown-each'>Send Email</li>
        </ul>
      </li>
      <li class="navbar-menu-each">
        <a href="#">Approvals and Undo</a>
        <ul class="submenu-dropdown">
          <li class='submenu-dropdown-each'>Employee Data Approvals</li>
          <li class='submenu-dropdown-each'>Employment Status Undo</li>
        </ul>
      </li>
      <li class="navbar-menu-each">
        <a href="#">Report</a>
        <ul class="submenu-dropdown">
          <li class='submenu-dropdown-each'>Employee Data Report</li>
          <li class='submenu-dropdown-each'>Headcount Report</li>
          <li class='submenu-dropdown-each'>Employee Recapitulation Report</li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="navbar-page-name">
    Employee List
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

更多相关文章

随机推荐