菜单未作为列表打开

Question

我创建了一个下拉菜单，但它没有显示为我想要的列表。相反，它显示在我页面的顶部横幅上。尝试搞乱CSS但无济于事。

只需指出正确的方向，即如何以列表格式显示。

＆＃13;

＆＃13;

.menu {
  position: absolute;
  /*top: 100%;*/ /* disabled for the sake of demonstration and user-friendly troubleshooting */ 
  right: 0%;
  background: #d2eaf2;
  float: left;
  height: 25px;
  overflow: hidden;
}

.menu--open {
  height: auto;
}

.menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu li {
  border-bottom: 1px solid #575766;
}

.menu a {
  color: black;
  display: block;
  padding: 2em 6em;
  text-transform: uppercase;
  text-decoration: none;
}

＆＃13;

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

<nav class="menu menu-toggle">
<div>click</div> <!-- Added for user-friendly troubleshooting -->
  <ul>
    <li>
      <a href="#About">About</a>
    </li>
    <li>
      <a href="#TopTips">Top Tips</a>
    </li>
    <li>
      <a href="#GetIntoRunning">Get Into Running</a>
    </li>
    <li>
      <a href="#TryThis">Try This</a>
    </li>
  </ul>
</nav>
<div class="menu-toggle">
  <div class="hamburger"></div>
</div>

<script>
  $(document).ready(function() {
    $('.menu-toggle').click(function() {
      $('.menu').toggleClass('menu--open');
    })
  });
</script>

＆＃13;

＆＃13;

＆＃13;

非常感谢任何帮助！

Answer 1

.menu您无需指定float和right值，也可以指定重新排列，将menu-toggle置于.menu之上并添加文字到菜单这将使它工作

$(document).ready(function () {
    $('.menu-toggle').click(function () {
        $('.menu').toggleClass('menu--open');
    })
});

.menu {
    position: absolute;
    background: #d2eaf2;
    top: 50px;
    height:0;
    overflow: hidden;
}

.menu--open {
    height: auto;
}

.menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu li {
    border-bottom: 1px solid #575766;
}

    .menu a {
        color: black;
        display: block;
        padding: 2em 6em;
        text-transform: uppercase;
        text-decoration: none;
    }

.menu a:hover, .menu a:focus {
	background: #7eadbc;
}
.menu-toggle {
	padding: 1em;
	position: absolute;
	left: 0.5em;
	top: 0.5em;
	cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-toggle">
    <div class="hamburger">myMenu</div>
</div>    
<nav class="menu">
    <ul>
        <li>
            <a href="#About">About</a>
        </li>
        <li>
            <a href="#TopTips">Top Tips</a>
        </li>
        <li>
            <a href="#GetIntoRunning">Get Into Running</a>
        </li>
        <li>
            <a href="#TryThis">Try This</a>
        </li>
    </ul>
</nav>

希望这有帮助。

<强>更新

或者，如果您不想要文本，可以为.menu-toggle指定宽度和高度，并为其添加一些css，请查看以下代码段：

$(document).ready(function () {
    $('.menu-toggle').click(function () {
        $('.menu').toggleClass('menu--open');
    })
});

.menu {
    position: absolute;
    background: #d2eaf2;
    top: 50px;
    height:0;
    overflow: hidden;
}

.menu--open {
    height: auto;
}

.menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu li {
    border-bottom: 1px solid #575766;
}

    .menu a {
        color: black;
        display: block;
        padding: 2em 6em;
        text-transform: uppercase;
        text-decoration: none;
 
      }

    .menu a:hover, .menu a:focus {
    	background: #7eadbc;
    }
    .menu-toggle {
    	padding: 1em;
    	position: absolute;
    	left: 0.5em;
    	top: 0.5em;
    	cursor: pointer;
border: 1px solid #222;
    }
.menu-toggle:before {
    content: "";
    position: absolute;
    top: 10px;
    left: 8px;
    width: 1em;
    height: 0.15em;
    background: black;
    box-shadow: 0 0.25em 0 0 black, 0 0.5em 0 0 black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-toggle">
    <div class="hamburger"></div>
</div>    
<nav class="menu">
    <ul>
        <li>
            <a href="#About">About</a>
        </li>
        <li>
            <a href="#TopTips">Top Tips</a>
        </li>
        <li>
            <a href="#GetIntoRunning">Get Into Running</a>
        </li>
        <li>
            <a href="#TryThis">Try This</a>
        </li>
    </ul>
</nav>

Answer 2

您必须编辑.menu类属性。

$(document).ready(function () {
        $('.menu-toggle').click(function () {
            $('.menu').toggleClass('menu--open');
        })
    });

.menu {
    position: absolute;
    right: 0%;
    background: #d2eaf2;
    float: left;
    height: 6px;
    overflow: hidden;
}

.menu--open {
    height: auto;
}

.menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu li {
    border-bottom: 1px solid #575766;
}

.menu a {
    color: black;
    display: block;
    padding: 2em 6em;
    text-transform: uppercase;
    text-decoration: none;
}

.menu a:hover, .menu a:focus {
  background: #7eadbc;
}
.menu-toggle {
  padding: 1em;
  position: absolute;
  left: 0.5em;
  top: 0.5em;
  cursor: pointer;
  border: 1px solid;/*Just for test*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="menu">
    <ul>
        <li>
            <a href="#About">About</a>
        </li>
        <li>
            <a href="#TopTips">Top Tips</a>
        </li>
        <li>
            <a href="#GetIntoRunning">Get Into Running</a>
        </li>
        <li>
            <a href="#TryThis">Try This</a>
        </li>
    </ul>
</nav>
<div class="menu-toggle">
    <div class="hamburger"></div>
</div>