Html + CSS

Pessoal, iniciei o trabalho visual e não tenho certeza se estou colocando no lugar certo... se não estiver favor encaminhar pro local adequado.

Possui os seguintes codigos:

index.html

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Documento sem título</title>
        <link href="arquivo.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
        <br>
        <div id="tudo">
            <div id="menu">
                <ul class="nav">
                    <li><a href="http://www.google.com.br">Goo</a></li>
                    <li><a href="#">Link 2</a>
                        <ul class="submenu">
                            <li><a href="#">Submenu 1</a></li>
                            <li><a href="#">Submenu 2</a>
                                <ul class="submenu-2">
                                    <li><a href="#">Submenu 2.1</a></li>
                                    <li><a href="#">Submenu 2.2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Submenu 3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a>
                        <ul class="submenu">
                            <li><a href="#">Submenu 1</a></li>
                            <li><a href="#">Submenu 2</a></li>
                            <li><a href="#">Submenu 3</a></li>
                            <li><a href="#">Submenu 4</a></li>
                            <li><a href="#">Submenu 5</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Link 5</a></li>
                </ul>
            </div>
            <div id="conteudo">
                <p>&nbsp;</p>
                <p>Conteudo aqui!! </p>
                
            </div>
        </div>
    </body>
</html>

arquivo.css

@charset "utf-8";
/* CSS Document */

*{
    margin: 0;
    padding: 0;
}

#tudo{
    width: 900px;
    margin: 0 auto;
}

#conteudo{
    height: 400px;
    background: #CCCCFF;
}

#menu{
    height: 30px;
}

.nav{
    list-style: none;
    font: 15px "Trebuchet MS", Arial, Helvetica, sans-serif;

}

.nav li{
    float: left;
    position: relative;
}

.nav li a:link,
.nav li a:visited{
    display: block;
    padding: 5px;
    border-left: 10px #999999 solid;
    background: #cccccc;
    text-decoration: none;
    width: 160px;
    color: #000000;
}

.nav li:hover a,
.nav li a:active,
.nav li a:hover{
    display: block;
    padding: 5px;
    border-left: 10px #ffd200 solid;
    background: #999999;
    text-decoration: none;
    width: 160px;
    color: #ffd200;
    font-weight: bold;
}

.submenu{
    margin:0;
    list-style:none;
    display:none;
    width:146px;
    position:absolute;
    top:30px;
}

.nav li:hover .submenu{
    display:block;
}

.submenu li a:link,
.submenu li a:visited{
    display: block;
    padding: 5px;
    border-left: 10px #FFD200 solid;
    background: #cccccc;
    text-decoration: none;
    width: 160px;
    color: #000000;
}

.submenu li:hover a,
.submenu li a:active,
.submenu li a:hover{
    display: block;
    padding: 5px;
    border-left: 10px #999999 solid;
    background: #ffd200;
    text-decoration: none;
    width: 160px;
    color: #000000;
    font-weight: bold;
}

.submenu-2{
    margin:0;
    list-style:none;
    display:none;
    width:130px;
    position:absolute;
    left: 180px;
    top: 0;
}

.nav .submenu li:hover .submenu-2{
    display:block;
}

.submenu-2 li a:link,
.submenu-2 li a:visited{
    display: block;
    padding: 5px;
    border-left: 10px #FFD200 solid;
    background: #cccccc;
    text-decoration: none;
    width: 160px;
    color: #000000;
}

.submenu-2 li:hover a,
.submenu-2 li a:active,
.submenu-2 li a:hover{
    display: block;
    padding: 5px;
    border-left: 10px #999999 solid;
    background: #ffd200;
    text-decoration: none;
    width: 160px;
    color: #000000;
    font-weight: bold;
}

não estou conseguindo colocar a pagina do google por exemplo dento do id=conteudo, isso é possível? ou vou ter que fazer o que?

Topicos relacionados