Question

我创建了一个子菜单，当您将鼠标悬停在“服务”链接上时会出现。但是，当我将鼠标移到子菜单上时，它消失了，原因是它位于我想要的导航下面。

到目前为止，我已经尝试过将子菜单置于其自然的顶部位置，并使用z-index使其位于导航后面。我发现由于子菜单的位置是绝对的，因此无法正常工作。

body {
  font-family: acumin-pro, sans-serif;
  font-size: 16px;
  letter-spacing: .25px;
  margin: 0;
}

.header {
  display: flex;
  width: 100%;
}

.nav {
  width: 80%;
  margin: auto;
  position: relative;
}

.nav a {
  color: #000;
}

.nav ul:hover li a {
  color: #eee
}

.nav ul li:hover a {
  color: #333;
}

.nav a:last-child {
  margin: 0px;
}

.nav ul {
  list-style: none;
  padding: 0px;
}

.nav ul li {
  display: inline-block;
  margin: 0 35px 0 0;
}

.three:hover>.sub-menu {
  display: block;
  opacity: 1
}

.sub-menu {
  height: 200px;
  position: absolute;
  top: 100%;
  background: #333;
  display: none;
  opacity: 0;
  left: 0;
  right: 0;
}

<div class="header">
  <div class="nav">
    <ul>
      <li>
        <a class="one">Home</a>
      </li>
      <li>
        <a class="two">About</a>
      </li>
      <li class="three">
        <a class="">Services</a>
        <div class="sub-menu"></div>
      </li>
      <li>
        <a class="four">Contact</a>
      </li>
    </ul>
  </div>
</div>

该子菜单应位于导航的正下方，并且当我将鼠标从该子菜单的链接上移开时，该子菜单应保持可见。

Answer 1

我已经将padding-bottom: 20px;悬停了链接需要连接到子菜单，以便它仍然可以悬停

body {
  font-family: acumin-pro, sans-serif;
  font-size: 16px;
  letter-spacing: .25px;
  margin: 0;
}

.header {
  display: flex;
  width: 100%;
}

.nav {
  width: 80%;
  margin: auto;
  position: relative;
}

.nav a {
  color: #000;
}

.nav ul:hover li a {
  color: #eee
}

.nav ul li:hover a {
  color: #333;
  padding-bottom: 20px;
}

.nav a:last-child {
  margin: 0px;
}

.nav ul {
  list-style: none;
  padding: 0px;
}

.nav ul li {
  display: inline-block;
  margin: 0 35px 0 0;
}

.three:hover>.sub-menu {
  display: block;
  opacity: 1
}

.sub-menu {
  height: 200px;
  position: absolute;
  top: 100%;
  background: #333;
  display: none;
  opacity: 0;
  left: 0;
  right: 0;
}

<div class="header">
  <div class="nav">
    <ul>
      <li>
        <a class="one">Home</a>
      </li>
      <li>
        <a class="two">About</a>
      </li>
      <li class="three">
        <a class="">Services</a>
        <div class="sub-menu"></div>
      </li>
      <li>
        <a class="four">Contact</a>
      </li>
    </ul>
  </div>
</div>

Answer 2

删除边距.nav ul并为.nav a添加填充

.nav ul {
      list-style: none;
      padding: 0px;
      margin:0;
    }
.nav a {
  color: #000;
  padding: 10px 0;
  display: block;
}

body {
  font-family: acumin-pro, sans-serif;
  font-size: 16px;
  letter-spacing: .25px;
  margin: 0;
}

.header {
  display: flex;
  width: 100%;
}

.nav {
  width: 80%;
  margin: auto;
  position: relative;
}

.nav a {
  color: #000;
  padding: 10px 0;
display: block;
}

.nav ul:hover li a {
  color: #eee
}

.nav ul li:hover a {
  color: #333;
}

.nav a:last-child {
  margin: 0px;
}

.nav ul {
  list-style: none;
  padding: 0px;
  margin:0;
}

.nav ul li {
  display: inline-block;
  margin: 0 35px 0 0;
}

.three:hover>.sub-menu {
  display: block;
  opacity: 1
}

.sub-menu {
  height: 200px;
  position: absolute;
  top: 100%;
  background: #333;
  display: none;
  opacity: 0;
  left: 0;
  right: 0;
}

<div class="header">
  <div class="nav">
    <ul>
      <li>
        <a class="one">Home</a>
      </li>
      <li>
        <a class="two">About</a>
      </li>
      <li class="three">
        <a class="">Services</a>
        <div class="sub-menu"></div>
      </li>
      <li>
        <a class="four">Contact</a>
      </li>
    </ul>
  </div>
</div>

Answer 3

我用了这个。

var varBoolean = true;
var i = 0;;

while (varBoolean == true) {
    bookList = Object.getOwnPropertyNames(esvJSON);
    randBook = bookList[Object.keys(bookList)[Math.floor(Math.random() 
* 66)]];
    inputVerse = esvJSON[randBook][input1];

Object.size = function(obj) {
    var bookLength = 0, key;
    for (key in obj) {
        if (obj.hasOwnProperty(key)) bookLength++;
    }
    return bookLength;
};

// Get the size of an object
var bookLength = Object.size(inputVerse);



if (input1 >= bookLength) {
    i++;
    //randBook = bookList[Object.keys(bookList)[Math.floor(Math.random() * 66)]];
}
else if (esvJSON[randBook][input1][input2] == undefined) {
    i++;
    //randBook = bookList[Object.keys(bookList)[Math.floor(Math.random() * 66)]];
}
else {
    bibleVerse = esvJSON[randBook][input1][input2];
    output = randBook + " " + input1 + ":" + input2 + " " + bibleVerse;
    varBoolean = false;
}
if (i > 66) {
    varBoolean = false;
    output = "Sorry, we have no verse for your time."
    }
}

body {
  font-family: acumin-pro, sans-serif;
  font-size: 16px;
  letter-spacing: .25px;
  margin: 0;
}

.header {
  display: flex;
  width: 100%;
}

.nav {
  width: 80%;
  margin: auto;
  position: relative;
}

.nav a {
  color: #000;
}

.nav ul:hover li a {
  color: #eee
}

.nav ul li:hover a {
  color: #333;
}

.nav a:last-child {
  margin: 0px;
}

.nav ul {
  list-style: none;
  padding: 0px;
}

.nav ul li {
  display: inline-block;
  margin: 0 35px 0 0;
}

.three:hover>.sub-menu {
  display: block;
  opacity: 1
}

.sub-menu {
  height: 200px;
  position: absolute;
  top: 100%;
  background: #333;
  opacity: 0;
  left: 0;
  right: 0;
  display: none;
}
.sub-menu::before {
  content: "";
  top: -18px;
  width: 100%;
  height: 20px;
  position: absolute;
}

Answer 4

只需将其替换为您现有的CSS，别无其他。

/NickServ INFO <username>

悬停时如何使菜单保持可见

4 个答案: