1
我无法弄清楚为什么我的导航栏中有两个框。更改选择框的大小以匹配文本框
如果以家为例，有两个框，一个包含Home的文本，一个突出到右侧。
出于清洁的原因，我想缩小凸出的盒子与保存Home, Projects, About Me and Resume的文本框相同，因为当您将鼠标悬停在项目的右侧时，会出现菜单。
https://codepen.io/anon/pen/vJjvWG?editors=1100#0
* {
border: 1px solid rgba(0, 0, 0, 0.3);
}
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;
list-style: none;
}
.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;
}
.projects {
padding-bottom: 10px;
}
.dropdown {
position: relative;
}
.dropdown-content {
width: 91px;
text-align: center;
margin-top: 10px;
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;
font-size: 14px;
}
.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>mytitle</title>
<link rel="icon" href="images/favicon.png">
</head>
<body>
<header>
<div class="container">
<nav>
<a href="#" class="title">my title</a>
<a>|</a>
<li>
<a href="#" class="underline_animation">home</a>
</li>
<li class="dropdown">
<a href="#" class="projects">projects ▾</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
<li>
<a href="#" class="underline_animation">about me</a>
</li>
<li>
<a href="files/resume.pdf" class="underline_animation">resume</a>
</li>
</nav>
<div class="links">
<a href="#" target="_blank">
<img src="images/linkedin_icon.png" height="25" width="25">
</a>
<a href="#" target="_blank">
<img src="images/github_icon.png" height="25" width="25">
</a>
</div>
</div>
</header>
</body>
</html>
你想要什么，你可以在评论中清楚地描述它？目前还不清楚你想说什么？ –
所以你想要最后两个右侧链接在一个单独的div（家庭，项目...）？/ –