HTML / CSS导航栏列表在屏幕调整大小下方移动

时间:2015-09-21 00:40:06

标签: html css navigation

当我在我的网站上调整浏览器窗口的大小(向左或向右缩小)时,导航栏中列表中的元素会向下移动到另一行。如果它们不适合导航条参数,是否有可能让它们消失?

这是我的网站: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;
}

0 个答案:

没有答案