[HTML] creare menu di navigazione

Selenio89

Nuovo Utente
9 Mar 2018
16
0
1
35
Ciao a tutti,

sto continuando a imparare html e css ma non riesco a creare un menù di navigazione orizzontale per la pagina web (es. il classico home, about us, contact). E' solo per una pagina di esempio per imparare come creare il menù. Potete scrivermi del codice da usare per piacere? Scusate se sembra banale ma sono ancora principiante
 
Questo è un esempio veloce di codice funzionante! Mancano le immagini che puoi mettere tu a piacimento
HTML:
<!doctype html>

<html>
<head>
                <title>Menu</title>
        <meta charset="utf-8">
        <style type="text/css">
<!--
BODY {
        PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: small/1.5em Georgia,Serif; COLOR: #000; PADDING-TOP: 0px; voice-family: inherit
}
UNKNOWN {
        FONT-SIZE: small
}
#header {
        FONT-SIZE: 93%; BACKGROUND: url(bg.gif) #dae0d2 repeat-x 50% bottom; FLOAT: left; WIDTH: 100%; LINE-HEIGHT: normal
}
#header UL {
        PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 10px; LIST-STYLE-TYPE: none
}
#header LI {
        PADDING-RIGHT: 0px; PADDING-LEFT: 9px; BACKGROUND: url(left.gif) no-repeat left top; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#header A {
        PADDING-RIGHT: 15px; DISPLAY: block; PADDING-LEFT: 6px; FONT-WEIGHT: bold; BACKGROUND: url(right.gif) no-repeat right top; FLOAT: left; PADDING-BOTTOM: 4px; COLOR: #765; PADDING-TOP: 5px; TEXT-DECORATION: none
}
#header A {
        FLOAT: none
}
#header A:hover {
        COLOR: #333
}
#header #current {
        BACKGROUND-IMAGE: url(left_on.gif)
}
#header #current A {
        BACKGROUND-IMAGE: url(right_on.gif); PADDING-BOTTOM: 5px; COLOR: #333
}
-->
                </style>
        </head>

        <body>
                <div id="header">
                        <ul>
                                <!-- CSS Tabs -->
<li id="current"><a href="#">Home</a></li>
<li><a href="#">Prodotti</a></li>
<li><a href="#">Servizi</a></li>
<li><a href="#">Chi Siamo</a></li>
<li><a href="#">Dove Siamo</a></li>

                        </ul>
                </div>
        </body>
</html>
 

Discussioni simili