1
ナビゲーションに2つのボックスがある理由がわかりません。選択ボックスのサイズをテキストボックスと一致するように変更します。
たとえば、ホームを利用する場合、ホームのテキストを保持するボックスと右側に突出するボックスの2つのボックスがあります。
突出したボックスを、テキストボックスと同じになるように縮小したい場合は、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>
あなたはコメントでそれをはっきりと描写できますか？あなたが何を言いたいのかははっきりしないのですか？ –
最後の2つの右側のリンクを1つのdivにする（ホーム、プロジェクト...）/ –