Question

来自此演示

https:// codepen.io/ducktectiveQuack/pen/mPGMRZ

我无法找出代码块，所以我做了作弊（只是删除＆＃39; /＆＃39;和＆＃39; c＆＃39; lol）之间的空格

我试图让它一旦你点击汉堡菜单，下拉菜单就会出现，但仅此而已。菜单向右移动，然后在将鼠标悬停在社交标签上后再次移动。我只是希望它在整个时间内保持静止，即使在它掉落之后也是如此。

我仍然是HTML / CSS的新手，尤其是JavaScript（我的教授帮我解决了这个问题），所以如果这看起来像是一个非常基本的问题，我很抱歉。

我认为只是把...定位：固定＆＃39;或者＆＃39;职位：绝对＆＃39;会做的但是它不会哈哈。

提前谢谢

Answer 1

下拉列表出现但仅此而已。你可以看到，现在菜单向右移动。它会在你盘旋后再次转移社交标签。我只是想让它一直保持静止，即使它下降了。

尝试将#menu position设为absolute，将.nav li:hover ul position设为absolute，将top设为200px ，left到0px。请注意，html缺少关闭</header>代码。

 #menu {
    position:absolute;
 }

.nav li:hover ul {
    position:absolute;
    top:200px;
    left:0px;
  }

document.getElementsByTagName("h1")[0].style.fontSize = "80px";

body {
  background-color: #a3d5d3;
}

#menu {
  position:absolute;
}

.nav li:hover ul {
    position:absolute;
    top:200px;
    left:0px;
  }

<!doctype html>
<html lang="en">
<head>
  <title>Banana | Home</title>
</head>
<style>
  body {
    padding: 0;
    margin: 0;
    background-image: url("img/vicmensa.jpg");
    background-color: #515151;
  }
  header {
    margin: 40px 0px 0px 60px;
    position: fixed;
  }
  #container {
    margin: 150px 0px 0px 400px;
    text-align: left;
    position: fixed;
    color: white;
    font-size: 24pt;
    font-family: monospace;
  }
  .title-block {
    margin: 20px 0px 0px 30px;
    text-align: left;
    color: #00b4ff;
    font-family: monospace;
    font-size: 24pt;
  }
  .text-block {
    margin: 0px 0px 0px 30px;
    width: 400px;
    text-align: left;
    color: white;
    font-family: monospace;
    font-size: 16pt;
  }
  .nav {
    display: none;
    text-align: left;
    font-size: 14pt;
  }
  .nav a:hover {
    color: white;
    text-decoration: none;
  }
  .nav ul {
    display: none;
    background: none;
  }
  .nav li:hover ul {
    display: block;

  }
  
  a {
    text-decoration: none;
    color: #00b4ff;
  }
  li {
    list-style: none;
  }
  .burger-button {
    background: none;
    position: absolute;
    border: 0;
    color: white;
    outline: none;
    font-size: 20pt;
    font-family: monospace;
  }
  .x-button {
    background: none;
    position: absolute;
    border: 0;
    color: white;
    outline: none;
    font-size: 20pt;
    font-family: monospace;
  }
</style>

<body>
  <header>
    <button class="burger-button" onclick="
				if (document.getElementById('menu').style.display=='block')
				{
					document.getElementById('menu').style.display = 'none'
				}
				else
				{
					document.getElementById('menu').style.display = 'block'
                    /*make the hamburger icon an X and get it to stop moving positions*/
                }
		"><a href="#"><span style = "color: white;">&#9776;</span></a>
      </button>
      <!-- nav -->
      <ul class="nav" id="menu">
        <li> <a href="/"> Home </a> 
        </li>
        <li> <a href="about.html"> About </a> 
        </li>
        <li> <a href="contact.html"> Contact </a> 
        </li>
        <li> <a href="music.html"> Music </a> 
        </li>
        <li> <a href="pictures.html"> Pictures </a> 
        </li>
        <li> <a href="projects.html"> Projects </a>
        </li>
        <li> <a href="resume.html"> Resume </a> 
        </li>
        <li> <a href="#"> Social + </a> 
          <ul>
            <li> <a href="#" target="_blank"> Facebook </a> 
            </li>
            <li> <a href="#" target="_blank"> Twitter </a> 
            </li>
            <li> <a href="#" target="_blank"> Instagram </a> 
            </li>
            <li> <a href="#" target="_blank"> LinkedIn </a> 
            </li>
          </ul>
        </li>
      </ul>
      <!-- end nav -->
  </header>

  <div id="container">
    <div class="title-block">
      first middle last
      <hr style="width: 100%; height: 2px; background-color: white; border-radius: 2px; margin: 0px 0px 5px 0px;">
    </div>
    <div class="text-block">
      <span style="color: #00b4ff"><em> noun </em></span> 
      <br>city, state
      <br>junior at <a href="http://www.usc.edu">university</a> 
      <br>
    </div>
  </div>
</body>

</html>

codepen https://codepen.io/anon/pen/GZXvOR

试图弄清楚如何让汉堡包菜单在打开后保持静止状态

1 个答案: