Question

http://codepen.io/josterberg/pen/LxEZMy

<header>
        <nav>
            <ul class="nav" id="navigationBar">
                <li class="nav-item-align-left"><a class="active" href="index.html">Home</a></li>
                <li class="nav-item-align-left"><a class="active" href="page2.html">Page 2</a></li>
                <li class="nav-item-align-left"><a class="active" href="page3.html">Page 3</a></li>
                <li class="nav-item-align-left dropdown">
                    <a class="dropbtn">Account</a>
                    <div class="dropdown-content">
                        <a href="#">Settings</a>
                        <a href="#">Logout</a>
                    </div>
                </li>
                <li class="icon">
                    <a href="javascript:void(0);" style="font-size:15px;" onclick="toggleResponsiveNav()">☰</a>
                </li>
            </ul>
            <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
            <script src="js/all.js"></script>
            <script src="js/main.js"></script>
        </nav>
    </header>

正如你所看到的，我对账户的下拉不会向下 - 它会向左移动。我应该在我的CSS中修改哪些会改变这种行为以使我的下降而不是离开？

Answer 1

如果您尝试使用bootstrap导航栏，则还需要包含bootstrap js文件：

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>

看看这个吸虫：

http://embed.plnkr.co/kfUPcF/

Answer 2

好的，我建议你将.dropdown-content更改为

<br>

如果这不起作用，您可以随时<hr>或/Users/briank/Documents/Paper1/ThirdDraft/DTW_DATA/，但这应该有效。请记住，Chrome，Firefox和Opera等浏览器需要刷新CSS代码才能加载更新（或使用私有导航）：P

Answer 3

我不明白为什么你需要使用

def simple_addition(a, b, silent=True):
    res = a + b
    if not silent: print('The answer is %i' % res)
    return res

每一次。只需写下你的CSS：

class = "nav-item-align-left"

在ul.nav中，删除float：left;所以它看起来像：

li {
  float: left;
}

删除ul.nav li中的ul.nav，所以它看起来像

ul.nav {
    width: 100%;
    list-style-type: none;
    margin: 0 0 1em 0;
    padding: 0;
    overflow: hidden;
    background-color: #282828;
}

而不是ul.nav li a {...}

将dropbtn和.dropdown-content中的颜色更改为白色

HTML / CSS导航栏下拉列表不以列表格式显示

3 个答案: