0

I have applied a Tutorial to make a horizontal menu , but I don't know why the first (small) child don't get in the same line with the rest..

here's a preview 

<nav>

    <ul class="menu">
                <li id="home"><a href="#home" class="homeIcon">Acceuil</a></li>
                <li id="Bureau"><a href="#bureau">Bureau</a></li>
                <li id="actualites"><a href="#Act">Actualités</a></li>
                <li id="partenaires"><a href="#part">Partenaires</a></li>
                <li id="contact"><a href="#contact">Contact</a></li>
                <li id="Liens"><a href="#liens">Liens utiles</a></li>
                <li id="Liens"><a href="#liens">lien+subtitles</a>
                    <ul class="sousmenu">
                        <li id="Liens"><a href="#liens">Liens utiles</a></li>
                        <li id="Liens"><a href="#liens">Liens utiles</a></li>
                        <li id="Liens"><a href="#liens">Liens utiles</a></li>
                        <li id="Liens"><a href="#liens">Liens utiles</a></li>
                    </ul>
                </li>
    </ul>
</nav>

CSS:

.menu{

margin:0 auto;
padding:0;
list-style-type:none;
display:table;
position:relative;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
margin-bottom: 50px;
white-space: nowrap;
}

.menu  > li{
/* Specifying a fallback color and we define CSS3 gradients for the major browsers: */


background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);

border-right: 1px solid rgba(9, 9, 9, 0.125);

/* Adding a 1px inset highlight for a more polished efect: */

box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
-moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
-webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
position:relative;
display:inline-block;

list-style: none;

}

.menu >li +li {

width:200px;
text-align:center;
}
.menu li:after{


content:'.';
text-indent:-9999px;
overflow:hidden;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:1;
opacity:0;

/* Gradients! */

background-image:-webkit-gradient(linear, left top, right top,  from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));


box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;


-moz-transition:0.25s all;
-webkit-transition:0.25s all;
-o-transition:0.25s all;
transition:0.25s all;
}

.menu li:first-child{
border-radius: 4px 0 0 4px;
}

.menu li:first-child:after,
.menu li.selected:first-child:after{
box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
-webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;

border-radius:4px 0 0 4px;
}

.menu li:last-child{
border-radius: 0 4px 4px 0;
}


.menu li:last-child:after,
.menu li.selected:last-child:after{
box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;

border-radius:0 4px 4px 0;
}

.menu li:hover:after,
.menu li.selected:after,
.menu li:target:after{

opacity:1;
}

.menu:hover li.selected:after,
.menu:hover li:target:after{
opacity:0;
}

.menu li.selected:hover:after,
.menu li:target:hover:after{
opacity:1 !important;
}

.menu li a{
color: #5d5d5d;
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-weight:bold;
padding: 12px 35px 14px;
position: relative;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
z-index:2;
text-decoration:none !important;

}

.menu a.homeIcon{
background:url('img/rsz_home-icon.png') no-repeat center center;
overflow: hidden;
padding-left: 12px;
padding-right: 12px;
text-indent: -9999px;
width: 5%;

}
.sousmenu {
text-decoration:none;
list-style: none;
position:absolute;
visibility:hidden;
padding:0;
}
.menu  li:hover .sousmenu{
visibility:visible;
 }
.sousmenu li {

position:relative;
width:200px;
background-color: #f0f0f0;
background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
  border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

Thanks for help, and sorry for my bad english

user3568611
  • 133
  • 2
  • 14

2 Answers2

1

Try this:

.menu >li +li {
  width: 200px;
  text-align: center;
  height: 100%;
}

.menu li:first-child {
  border-radius: 4px 0 0 4px;
  float: left;
}
  • You have changed .menu > li+li to .menu>li ? I dont want to change the size of the first child, I don't want to show the "accueil" word. Instead I have putten a home icon.. – user3568611 Apr 04 '15 at 14:21
1

This is due to the overflow:hidden; property you added to the .homeIcon link, which also is displayed in inline-block. Setting the overflow property to anything other than visible changes the baseline of inline-block elements; see Why is this inline-block element pushed downward?

The solution is to either not use overflow:hidden (no screen is 9999px wide so this looks like a viable option), or to set the baseline property of the link and the list-item to bottom, such as here: https://jsfiddle.net/Mazala/5xo5L3xL/

Community
  • 1
  • 1
Guillaume Bokiau
  • 51
  • 4