probleme de menu par CalvinGuillemet - page 1

bonjour

pour designer un header (a partir d'un template totalement re-modifier) je m'entraine sur ce modele

je veux absolument mettre en horizontal et a la suite le menu et non les entasser l'un dessous l'autre (je voudrais le faire comme le sous menu et que le sous menu se glisse dessous) mais je n'y arrive pas

(je veux que la largeur soit de 100% centrer etc... comme le sous-menu)

si quelqu'un a une idée je suis preneur !

merci

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8;charset=utf-8" />
<style type="text/css">
    
body {
	font: 10px normal Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}

ul#topnav {
	margin: 0; padding: 0;
	float: left;
	width: 100%;
	list-style: none;
	font-size: 1.2em;
    text-align: center;
}
ul#topnav li {
	border-right: 1px solid #555;
    background: grey;
    width: 100%;
}
ul#topnav li a {
	padding: 10px 15px;
	display: inline-block;
	color: #f0f0f0;
	text-decoration: none;
}
    
ul#topnav li span {
	padding: 15px 0;
	position: absolute;
	left: 0; top:35px;
	display: none;
	width: 100%;
	background: #1376c9;
	color: #fff;
}
    
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }

</style>



<body>

    <ul id="topnav">
        <li><a href="">Home</a></li>
        <li>
            <a href="">About</a>
            <span>
                <a href="">The Company</a> |
                <a href="">The Team</a> |
                <a href="">Careers</a>
            </span>
        </li>
        <li>
            <a href="">Services</a>
            <span>
                <a href="">What We Do</a> |
                <a href="">Our Process</a> |
                <a href="">Testimonials</a>
            </span>
        </li>
        <li>
            <a href="">Portfolio</a>
            <span>
                <a href="">Web Design</a> |
                <a href="">Development</a> |
                <a href="">Identity</a> |
                <a href="">Internet Marketing</a> |
                <a href="">Print Design</a>
            </span>
        </li>
        <li><a href="">Contact</a></li>
    </ul>
	



</body>
</html>

probleme de menu

probleme de menu

Supprimer

Modérer

Signaler le message aux modérateurs