Question

如何修改我的CSS以复制像mi.com/en/上的菜单＆lt; - 顶部导航栏“国际”下拉菜单内容

https://gyazo.com/d96fc743b0f447cdacb1d3df615f9da6

[编辑]目前，谢天谢地你的帮助（虽然我必须研究你的解决方案，当我试图实际去选择下拉菜单项目..整个下拉消失...我要去现在就搜索一下，希望能找到一些东西，如果你能进一步详细说明，那就好了，那么请大家多谢你的帮助＆lt; 3

HTML

    <!DOCTYPE html>
<html>

  <head>
    <title>Big Project</title>
    <link rel="stylesheet" type="text/css" href="bigproject.css">
    <link rel="stylesheet" type="text/css" href="bigproject.js">

  </head>

  <body>

    <div id="top" class="topnav">
      <ul class="items">
        <li class="list"><span class="hrborder"><a href="#">Brand</a></span></li>
        <div>
          <li class="list"><a href="#"><span class="dropdown">Dropdown</span><div class="dropdown-content">
            <ul class="list" class="items">
              <li class="list">TEXT</li>
              <li class="list">TEXT</li>
              <li class="list">TEXT</li>
            </ul>
          </div></a></li>

        </div>
        <ul class="items2">
          <li class="list2"><a href="#">Login</a></li>
          <li class="list2"><span class="hrborder2"><a href="#">Signup</a></span></li>
        </ul>
      </ul>
    </div>

CSS

  .topnav {
  background-color: #333;
  /* overflow: hidden; */
  height: 40px;
  position: fixed;
  top: 0;
  width: 100%;
  margin-left: -8px;
  padding-left: 0px;
  padding-bottom: 5px;
}

body {
  background-color: #8604f7;
}

#top {
  box-shadow: 0.3px 0.3px;
}

.list {
  display: block;
  float: left;
  width: 100px;
  color: #d1d1d1;
}

.items {
  text-align: center;
  padding-left: 300px;
  height: 100px;
}

.list2 {
  display: block;
  float: right;
  width: 100px;
  color: #d1d1d1;
  margin-left: -8px;
  padding-left: 0px;
  padding-bottom: 5px;
}

.items2 {
  text-align: left;
  padding-right: 300px;
}

.hrborder {
  border-right: 1px;
  border-style: solid;
  border-color: #d1d1d1;
  padding: 10px;
  border-left: hidden;
  border-top: hidden;
  border-bottom: hidden;
  padding-right: 28px;
  padding-top: 1px;
  padding-bottom: 1px;
  border-color: #d1d1d1;
}

.hrborder2 {
  border-right: 1px;
  border-style: solid;
  border-color: #d1d1d1;
  padding: 10px;
  border-left: hidden;
  border-top: hidden;
  border-bottom: hidden;
  padding-right: 17.5px;
  padding-top: 1px;
  padding-bottom: 1px;
  border-color: #d1d1d1;
}

a {
  color: #d1d1d1;
  text-decoration-line: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover + .dropdown-content {
  display: block;
}

[编辑]目前，谢天谢地你的帮助（虽然我必须研究你的解决方案，当我试图实际去选择下拉菜单项目..整个下拉消失...我要去现在就去寻找它，希望能找到一些东西，如果你能进一步详细说明那就好了，那么就有一个很大的感谢你的惊人帮助＆lt; 3就像堆积了一天！ [EDIT2]我在这里被问到的是codepen：https://codepen.io/giwrgos-laphazanidhs/project/editor/ABjaam#

Answer 1

您需要使用Javascript来获得所需的行为。

let toggler = document.getElementById('buttonId')
toggler.addEventListener("mouseover", showDropdown);

function showDropdown() {
 let content = document.getElementById('dropdownContent')
   content.classList.add("show"); 
   contentaddEventListener("mouseleave", hideDropdown)
};

function hideDropdown() {
 document.getElementById('dropdownContent').classList.remove('show')
};

CSS：

.dropdown-content.show {
   display: block;
}

这是粗略的模型。为了更优雅地使用jQuery，将数据目标属性添加到下拉按钮以访问下拉内容。

Answer 2

我已经为你创建了一个靠近Mi Menu的简单片段，我尽量保持简单，这样你就可以按照代码修改代码并根据自己的需要进行修改。

// Add Event on mouse hover
document.querySelector('.dropdown').addEventListener('mouseover', callback);
    
function callback () {
  // Get the dropdown menu height when scroll. The default height set by css to 0.
  let dropdownHeight = this.children[1].scrollHeight;
  // Add the height to dropdown menu (change it from 0 to scroll height value )
  this.children[1].style = `height: ${dropdownHeight}px`;
}

/* General */
*, ::after, ::before {
  box-sizing: border-box;
}

a:active, a:hover {
  outline: 0;
}

body {
  font-family: ProximaNova,Arial,Sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #757575;
}

nav {
  margin: 3rem 0;
  background-color: #212121;
}

/* Normal menu */
.menu {
  padding: 0;
  margin: 0;
  list-style: none;
  white-space: nowrap;
}

.menu .menu-item::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 50%;
  margin-top: -6px;
  width: 1px;
  height: 12px;
  background-color: #424242;
}

.menu .menu-item {
  display: inline-block;
  margin: 0 20px 0 20px;
}

.menu .menu-item .menu-link {
  display: block;
  margin: 0 20px;
  line-height: 40px;
  color: #b0b0b0;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration :none;
  -webkit-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
}

.menu .menu-item .menu-link:hover { 
  color: #ff6700;
}

/* Dropdown menu */
.menu .dropdown {
  position: relative;
}

.menu .dropdown-menu {
  padding: 0;
  margin: 0;
  list-style: none;
  padding: 7px 0;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 999;
  height: 0;
  overflow: hidden;
  -webkit-transition: opacity .5s ease;
  transition: opacity .5s ease;
  height: 0;
  opacity: 0;
}

.menu .dropdown-menu .dropdown-item .dropdown-link {
  line-height: 30px
}

.menu .dropdown-menu .dropdown-item:last-child .dropdown-link {
  margin-bottom: 10px;
}

/* On Hover */
.menu .dropdown:hover {
  background: #fff;
}

.menu .dropdown:hover .menu-link {
  color: #ff6700;
}

.menu .dropdown:hover > .dropdown-menu {
  display: block;
  opacity: 1;
  padding: 7px 0;
  -webkit-box-shadow: 0 3px 4px rgba(0,0,0,.18);
  box-shadow: 0 3px 4px rgba(0,0,0,.18);
}

.menu .dropdown:hover > .dropdown-menu .dropdown-link {
  color: #000
}

.menu .dropdown:hover > .dropdown-menu .dropdown-link:hover {
  color: #ff6700
}

<nav>
  <ul class="menu">
    <li class="menu-item"><a class="menu-link" href="#">Normal</a></li>
    <li class="menu-item dropdown"><a class="menu-link" href="#">Dropdown</a>
      <ul class="dropdown-menu">
        <li class="dropdown-item"><a class="menu-link dropdown-link" href="#">Dropdown item 1</a></li>
        <li class="dropdown-item"><a class="menu-link dropdown-link" href="#">Dropdown item 2</a></li>
        <li class="dropdown-item"><a class="menu-link dropdown-link" href="#">Dropdown item 3</a></li>
      </ul>
    </li>
  </ul>
</nav>

悬停时的CSS下拉菜单

2 个答案: