Question

1）我的下拉菜单未显示在＆＃39;项目＆＃39;在悬停时。

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

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

注意：我特别没有包装我的＆＃39;项目＆＃39; div中的按钮，以便修复无效。

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

谢谢

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

Answer 2

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

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

2 个答案: