HTML/CSS导航栏下拉菜单不以列表格式

http://codepen.io/josterberg/pen/LxEZMy HTML/CSS导航栏下拉菜单不以列表格式

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

正如你看到的，我的帐户下拉列表中没有downward--它会向左侧会显示。我应该修改我的CSS中的哪些内容，以改变这种行为，让我的下降而不是左侧？

来源

2017-01-05 Jordan Osterberg

使用显示器的颜色！阻止重要的; on .dropdown-content a {}您的ul.nav li a将显示设置为内联; – Bosc

@Bosc谢谢你！这工作！ –

@Jordan我强烈不鼓励使用'！important'，因为它旨在被_user_样式表使用，以覆盖网站样式。而不是使用！important，使选择器更具体，以便覆盖'display：inline' - 例如，我添加了'.nav li.dropdown：hover .dropdown-content a {display：block;并且工作。 –

如果你要使用引导导航栏，你需要包括引导js文件，以及：

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

看看这个plunker：

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

来源

2017-01-05 00:20:19 Yaser

我没有使用bootstrap，看看codepen CSS。 –

@JordanOsterberg如果您未使用引导，那么定义的toggleResponsiveNav函数是什么？ – Yaser

哎呀！忘了将其添加到codepen，请立即检查。 –

好吧，我建议您将.dropdown内容更改为

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #282828; 
    max-width: 100%; 
    width: 100%; 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); 
}

如果这不起作用，您可以始终执行<br>或<hr>，但这应该起作用。请记住，如Chrome，Firefox和Opera一些浏览器需要刷新CSS代码来加载更新（或使用专用导航）：P

来源

2017-01-05 00:43:13

我不知道为什么你需要使用

class = "nav-item-align-left"

每单次。只需在你的CSS中写入：

li { 
    float: left; 
}

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

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

在ul.nav李一删除ul.nav，所以它看起来像

li a { 
    display: inline-block; 
    color: #f2f2f2; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    transition: 0.3s; 
    font-size: 17px; 
    font-family: "SF UI Display Light", serif; 
}

代替ul.nav李一{...}

变化dropbtn和.dropdown内容到白

来源

2017-01-05 02:00:40 utopia

在实际项目中的一些元素中，我使用了这些类。我修改了代码以使其具有通用性，并且不受此项目限制。 –

@JordanOsterberg好的，如果你愿意，你可以在你的代码中使用它。然后就像我上面描述的那样改变其余部分。因为它不是很好，或强烈建议使用！重要 – utopia

HTML/CSS导航栏下拉菜单不以列表格式

回答

相关问题