28111 sujets

CSS et mise en forme, CSS3

[Résolu] Disparition des liens lors de l'utilisation de float

Bonjour,
Je suis toute nouvelle en programmation et j'essaie actuellement de construire mon site web avec une menu horizontal deroulant. J'ai identifie le probleme que je rencontre mais n'arrive pas a le reparer.
Lorsque je supprime le float:left mon menu n'est plus centre horizontalement mais lorsque le float est active les liens ne sont plus accessibles.
que faire? merci beaucoup de votre aide

voici les codes en dessous 


            <ul id="menu">
                <li>
                    <a href="blog.html">BLOG</a>
                    <ul>
                        <li><a href="#">STROLLS</a></li>
                        <li><a href="#">KINGSTON</a></li>
                    </ul>    
                </li>
                <li><a href="#">EVENTS</a>
                    <ul>
                        <li><a href="#">UPCOMING</a></li>
                        <li><a href="#">HISTORY</a></li>
                        <li><a href="#">LIVE STREAM</a></li>
                    </ul>    
                </li>
                <li><a href="#">TRANSPORTATION</a>
                    <ul>
                        <li><a href="#">ISLAND HOP</a></li>
                    </ul>
                </li>
                <li><a href="#">LOBGING</a></li>
                <li><a href="#">ART</a></li>
                <li><a href="#">CONTACT</a></li>
                <li><a href="#">ABOUT US</a></li>
            </ul>




#menu, #menu ul {
    padding:0;
    margin:0;
    list-style-type: none;
    line-height: 21px;
}

#menu {
    font-family: Arial, serif;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
}
 
#menu a {
    display:block;
    padding:0;
    vertical-align:middle;
    width: 150px;
    line-height: 50px;
    background: url(boutonnoir.png);
    color: darkgreen;
    text-decoration: none;
    text-align: center;    
}


html>body #menu li {
    border-right: 1px solid transparent;
}

#menu li ul {
    position: absolute;
    width:144px;
    left: -999em;
}

#menu li ul li {
    border-top: 1px solid #fff;
}

html>body #menu li ul li{
    border-top: 1px solid transparent;
}

#menu a:hover {
    background: url(boutonnoir2.png);
}


#menu li:hover ul, #menu li.sfhover ul{
    left: auto;
    min-height: 0;
}

#menu li {
    float: left;
}
Merci beaucoup allan effectivement inline-block résout le problème parfaitement!
Merci pour les réponses!
Sujet clos
Aller à