菜单不是作为列表打开的

Question

我已经创建了一个下拉菜单，但它不像我想要的那样显示为列表。相反，它显示在我的页面的顶部横幅上。我尝试过摆弄CSS，但是没有用。

只需要指出正确的方向，这可以显示在列表格式。

​

.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;
}

<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>

​

任何帮助都将不胜感激！

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>

​