当我在我的网站上调整浏览器窗口的大小(向左或向右缩小)时,导航栏中列表中的元素会向下移动到另一行。如果它们不适合导航条参数,是否有可能让它们消失?
这是我的网站:www.edkernels.com
这是我的JS小提琴:https://jsfiddle.net/zx24ugz8/
<!--CONTAINER FOR ENTIRE SITE-->
<div id="container">
<!--LANGUAGE SELECTION-->
<div id="nav">
<!--LOGO HEADER-->
<div id="lang">
<a href="indexen.html">English</a>
<a href="index.html">Français</a>
</div>
<ul>
<div id="logo">
<img src="images/logo.png" height="45px"/img>
</div>
<!--NAVBAR OPTIONS-->
<li><a href="#">Contact</a></li>
<li><a href="http://www.edkernels.com/forum">Forum</a></li>
<li><a href="#">Leçons</a></li>
<li><a href="#">Blogue</a></li>
<li><a href="#">Ressources</a></li>
</ul>
</div>
CSS
@font-face{
font-family:'BebasNeue';
font-style: normal;
font-weight: normal;
src:url('fonts/BebasNeueBook.eot')
format('embedded-opentype');
src:url('fonts/BebasNeueBook.ttf')
format('truetype');
src:url('fonts/BebasNeueBook.otf')
format('opentype');
}
body{
margin:0;
padding:0;
font-family:'BebasNeue',sans-serif;
letter-spacing:2px;
background-color:#F3F3F3;
}
#logo{
float:left;
height:70px;
padding-top:24px;
}
header{
padding:0;
}
/ ============================== NAV BAR ============================== /
#nav {
font-family:'BebasNeue',sans-serif;
width: 100%;
float: left;
margin: 0 0 0 0;
padding: 0;
background-color: #343236;
height:95px;
vertical-align:middle;
position: fixed;
z-index:999;
}
#nav ul {
list-style: none;
width: 960px;
margin: 0 auto;
height:30;
padding: 0;
transition: 0s; }
#nav li {
float: right;
display:inline;
vertical-align:middle;
line-height:95px;
}
#nav li a { /*When navbar options are hovered over*/
display: block;
padding: 0px 20px 0px;
text-decoration: none;
font-size:15px;
color: #FFF3F3;
-moz-transition: 0.5s; /* Firefox */
-webkit-transition: 0.5s; /* Safari and Chrome */
-o-transition: 0.5s; /* Opera */
transition: 0.5s;
}
#nav li:first-child a {
border-left: 1px solid #fff;
}
#nav li a:hover {
color: #343236;
background-color: #F3F3F3;
-moz-transitio1: 1s; /* Firefox */
-webkit-transition: 1s; /* Safari and Chrome */
-o-transition: 1s; /* Opera */
transition: 1s;
}
#lang{
float:right;
margin:10px 20px;
font-size:9px;
}
#lang a{
padding-right:5px;
padding-left:5px;
color: #F3F3F3;
text-decoration:none;
}
#lang a:hover{
text-decoration: underline;
}