没有 div 悬停时的导航栏下拉菜单答案

【问题标题】：Nav bar dropdown menu when hover with no div没有 div 悬停时的导航栏下拉菜单
【发布时间】：2017-08-21 19:53:11
【问题描述】：

1) 悬停时，我的下拉菜单未显示在“项目”下。

2) 如果我做 .dropdown-content { display: block; } 然后它显示但它没有在项目下对齐。

我需要你的帮助！我需要悬停才能工作并修复对齐方式。

注意：我特别没有将我的“项目”按钮包装在 div 中，因此该修复将不起作用。

codepen 链接： https://codepen.io/anon/pen/JyvdzM?editors=1100

谢谢

【问题讨论】：

你能把你所有的链接都包装在一个<li>元素中吗？这将使您的生活轻松 100 倍。

标签： html css

【解决方案1】：

如果您将锚点包装在列表中，它可以很容易地实现，如下所示：

header {
    position: fixed;
    width: 100%;
    background: #4168a8;
}

.container {
    width: 90%;
    height: 75px;
    margin: 0 auto;
}

nav {
    color: white;
    float: left;
    font-size: 14px;
    font-family: Raleway;
    text-decoration: none;
    margin-top: 11px;
    -webkit-font-smoothing: antialiased;
}

nav li {
  display: inline;
}

.title {
    color: #DB5461;
    font-size: 24px;
    font-family: Raleway;
    text-decoration: none;
    margin-right: 35px;
    letter-spacing: 1px;
    text-transform: lowercase;
    -webkit-font-smoothing: antialiased;
    font-weight: bold;
}

nav a {
    color: white;
    text-decoration: none;
    margin-right: 35px;
    position: relative;
    display: inline-block;
    padding: .4em;
    padding-left: .2em;
    padding-right: .2em;
    text-transform: uppercase;
}

.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    left: 0;
    top:100%;
    background-color: #f9f9f9;
    z-index: 1;
}

.dropdown-content a {
    color: black;
    text-decoration: none;
    display: block;
    text-transform: lowercase;
    margin: 0px;
}

.dropdown:hover > .dropdown-content {
    display: block;
}

.dropdown-content a:hover { /* When you hover over items in dropdown */
    background-color: #ddd;
}

.underline_animation::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #222;
    -webkit-transform: scaleX(0);
    visibility: hidden;
    -webkit-transition: all .6s ease;
}

.underline_animation:hover::after {
    -webkit-transform: scaleX(1);
    visibility: visible;
}

.links {
    float: right;
    margin-top: 26px;
}

.links a {
    margin-left: 20px;
    text-decoration: none;
    display: inline-block;
}

.links a:hover {
    opacity: 0.7;
}

body {
    margin: 0;
    background: #222;
}

<html>
    
    <head>
        <link href="https://fonts.googleapis.com/css?family=Belleza" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
        <link href="style.css" type="text/css" rel="stylesheet">
        <title>title</title>
        <link rel="icon" href="images/favicon.png">
    </head>
    
    <body>
        
        <header>
            <div class="container">
                
                <nav>
                    <a href="#" class="title">my name</a>
                    <a>|</a>
                    <li>
                      <a href="#" class="underline_animation">home</a>
                    </li>
                    <li class="dropdown">
                      <a href="#">projects</a>
                        <div class="dropdown-content">
                            <a href="#" class="underline_animation">Link 1</a>
                            <a href="#" class="underline_animation">Link 2</a>
                            <a href="#" class="underline_animation">Link 3</a>
                        </div>
                    </li>
                    <li>
                      <a href="#" class="underline_animation">about me</a>
                    </li>
                    <li>
                      <a href="#" class="underline_animation">resume</a>
                    </li>
                </nav>
                
                <div class="links">
                    <a href="#" target = "_blank">
                        <img src="images/icon1.png" height="25" width="25">
                    </a>
                    <a href="#" target = "_blank">
                        <img src="images/icon2.png" height="25" width="25">
                    </a>
                </div>
                
            </div>
        </header>
        
        
        
        
    </body>
    
</html>

【讨论】：

太棒了！它完美地工作。如何将下拉菜单集中在项目上？
@Geozah 我要做的是增加下拉菜单的宽度以匹配项目链接。

【解决方案2】：

一般来说，导航栏是不好的做法，你真的需要用 div 包裹的东西，而这打破了导航栏的事实是一个问题。不妨查看https://www.w3schools.com/css/css_navbar.asp 了解一些更好的做法

【讨论】：