Menu Dropdown

[Guest mmartinho]

Boas.

Comprei um template para fazer o site da minha "empresa" só que este não tem menu dropdown. E como os meus conhecimentos não são 5* a CSS gostava de saber se alguém me pode ajudar.

CÓDIGO POSTADO EM BAIXO

Melhores Cumprimentos

Marco Martinho

[bruno1234]

Podes pesquisar na net por CSS dropdown e arranjas gratuitamente código fonte e exemplos de menus dropdown feitos em css.

[Guest mmartinho]

Eu já fiz isso. Só que não estou a conseguir incluir no código que já tenho.

[Guest mmartinho]

Preciso de ajuda pessoal..  :bored:

[Guest mmartinho]

Aqui está o código da CSS relativamente à class nav onde está o menu de navegação.

.header .nav {
position:absolute;
top:31px;
right:25px;
margin:0;
padding:0; }

.header .nav li {
position: relative;
float:left;
width:auto;
padding:0 5px !important;
background:transparent; }

.header .nav li a {
font-family: "TitilliumText14L 800 wt", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
position: relative;
display:block;
color:#7a7a7b;
font-size:1.4em;
padding:15px 10px 10px 10px;
text-shadow: 0 1px 0 #fff;
background:transparent; }

.header .nav li a:hover {
color:#5381ac; }

.header .nav li a.selected {
color:#5381ac; }

Aqui está o código html relativo ao menu.

	<div class="header">

                    <h1><a href="index.html">Código Tecnológico</a></h1>

		<ul class="nav">
			<li><a href="#">Teste1</a></li>
                                <ul>
                                    <li><a href="#">Teste1.1</a></li>
                                    <li><a href="dedicatedhosting.html">Teste1.2</a></li>
                                    <li><a href="managedservices.html">Teste1.3</a></li>
                                </ul>
			<li><a href="dedicatedhosting.html">Teste2</a></li>
			<li><a href="managedservices.html">Teste3</a></li>
			<li><a href="support.html">Support</a></li>
			<li><a href="about.html">About Us</a></li>				
		</ul>

	</div>

O aspecto actual do menu só que sem aparecer o drop down pois o mesmo não existe.

http://img684.imageshack.us/img684/7392/aspectomenu.png

Preciso de ajuda urgente com isto. Agradecia todo o vosso apoio

Melhores Cumprimentos

M.M.

[diokhan]

troca isto:

	<div class="header">

                    <h1><a href="index.html">Código Tecnológico</a></h1>

		<ul class="nav">
			<li><a href="#">Teste1</a></li>
                                <ul>
                                    <li><a href="#">Teste1.1</a></li>
                                    <li><a href="dedicatedhosting.html">Teste1.2</a></li>
                                    <li><a href="managedservices.html">Teste1.3</a></li>
                                </ul>
			<li><a href="dedicatedhosting.html">Teste2</a></li>
			<li><a href="managedservices.html">Teste3</a></li>
			<li><a href="support.html">Support</a></li>
			<li><a href="about.html">About Us</a></li>				
		</ul>

	</div>

por isto:

	<div class="header">

                    <h1><a href="index.html">Código Tecnológico</a></h1>

		<ul class="nav">
			<li><a href="#">Teste1</a>
                                    <ul>
                                       <li><a href="#">Teste1.1</a></li>
                                       <li><a href="dedicatedhosting.html">Teste1.2</a></li>
                                       <li><a href="managedservices.html">Teste1.3</a></li>
                                    </ul>
                                </li>
			<li><a href="dedicatedhosting.html">Teste2</a></li>
			<li><a href="managedservices.html">Teste3</a></li>
			<li><a href="support.html">Support</a></li>
			<li><a href="about.html">About Us</a></li>				
		</ul>

	</div>

e sei que no codigo do css precisas de criar algo deste genero:

.header .nav li ul{
	...
	}
.header .nav li:hover ul{
	...
	}
.header .nav li li {
	...
	}
.header .nav li ul a{
	...
	}
	.header .nav li ul a:hover{
		...
		}

[Guest mmartinho]

Boas. Troquei o CSS para o seguinte e nada.

.header h1 a {
font-family: "TitilliumText14L 800 wt", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
color:#333;
text-shadow: 1px 1px 0 #fff;
position:absolute;
top:43px;
left:10px;
margin:0;
padding:0;
height:41px; }

.header .nav {
position:absolute;
top:31px;
right:25px;
margin:0;
padding:0; }

.header .nav li {
position: relative;
float:left;
width:auto;
padding:0 5px !important;
background:transparent; }

.header .nav li a {
font-family: "TitilliumText14L 800 wt", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
position: relative;
display:block;
color:#7a7a7b;
font-size:1.4em;
padding:15px 10px 10px 10px;
text-shadow: 0 1px 0 #fff;
background:transparent; }

.header .nav li a:hover {
color:#5381ac; }

.header .nav li a.selected {
color:#5381ac; }

.header .nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    border-bottom: dotted 1px red;
}

.header .nav ul li {
    position: relative;
}

.header .nav li ul {
    position: absolute;
    top: 0;
    left: 149px;
    display: none;
}

.header .nav ul li a {
    display: block;
    text-decoration: none;
    color: navy;
    background: white;
    border: dotted 1px red;
    border-bottom: 0;
}

.header .nav ul li {height:1%;}
.header .nav ul li a {height:1%;}
.header .nav ul li :houver { color: red; background: silver;}
.header .nav li ul li a {padding: 2px 5px;}
.header .nav li:houver, li.over ul {display: block;} 

Ajudem pessoal sff.

Cumprimentos

Marco Martinho

[diokhan]

<div class="nav">         
   <h1><a href="index.html">Código Tecnológico</a></h1>
       <ul>
            <li><a href="#">Teste1</a>
                <ul>
                     <li><a href="#">Teste1.1</a></li>
                     <li><a href="dedicatedhosting.html">Teste1.2</a></li>
                     <li><a href="managedservices.html">Teste1.3</a></li>
                </ul>
            </li>
            <li><a href="dedicatedhosting.html">Teste2</a></li>
            <li><a href="managedservices.html">Teste3</a></li>
            <li><a href="support.html">Support</a></li>
            <li><a href="about.html">About Us</a></li>                             
      </ul>  
</div>

tenta assim, repara que as linhas que tem highlight são as que alterei

[Guest mmartinho]

Continua sem funcionar.

Cumprimentos

Marco M.

[diokhan]

.nav h1 a {
        font-family: "TitilliumText14L 800 wt", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
        color:#333;
        text-shadow: 1px 1px 0 #fff;
        position:absolute;
        top:43px;
        left:10px;
        margin:0;
        padding:0;
        height:41px; }

.nav {
        position:absolute;
        top:31px;
        right:25px;
        margin:0;
        padding:0; }

.nav li {
        position: relative;
        float:left;
        width:auto;
        padding:0 5px !important;
        background:transparent; }

.nav li a {
        font-family: "TitilliumText14L 800 wt", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
        position: relative;
        display:block;
        color:#7a7a7b;
        font-size:1.4em;
        padding:15px 10px 10px 10px;
        text-shadow: 0 1px 0 #fff;
        background:transparent; }

.nav li a:hover {
        color:#5381ac; }

.nav li a.selected {
        color:#5381ac; }

.nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    border-bottom: dotted 1px red;
}

.nav ul li {
    position: relative;
}

.nav li ul {
    position: absolute;
    top: 0;
    left: 149px;
    display: none;
}

.nav ul li a {
    display: block;
    text-decoration: none;
    color: navy;
    background: white;
    border: dotted 1px red;
    border-bottom: 0;
}

.nav ul li {height:1%;}
.nav ul li a {height:1%;}
.nav ul li :houver { color: red; background: silver;}
.nav li ul li a {padding: 2px 5px;}
.nav li:houver, li.over ul {display: block;} 

tenta assim, que retiras-te a pouco a class=header e no css não alteras-te, distracção minha, tenta e diz algo

[Guest mmartinho]

Nada. Tou a dar em maluco com isto..

[diokhan]

mostra-me como chamas o css

[Guest mmartinho]

<!-- Cascading Style Sheets -->
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/screen.css" />
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/typography.css" />

Os ficheiros existem e estão nas localizações correctas senão nada no documente saia estilizado.

[diokhan]

.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:11px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url("menu-bg.gif") top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
	float:left;
	}
.menu li a{
	color:#666666;
	display:block;
	font-weight:bold;
	line-height:43px;
	padding:0px 25px;
	text-align:center;
	text-decoration:none;
	}
	.menu li a:hover{
		color:#000000;
		text-decoration:none;
		}
	.menu li a:current{
		background:url("current-bg.gif") top left repeat-x;
		color:#ffffff;
		}
.menu li ul{
	background:#e0e0e0;
	border-left:2px solid #339933;
	border-right:2px solid #339933;
	border-bottom:2px solid #339933;
	display:none;
	height:auto;
	filter:alpha(opacity=95);
	opacity:0.95;
	position:absolute;
	width:225px;
	z-index:200;
	/*top:1em;
	/*left:0;*/
	}
.menu li:hover ul{
	display:block;
	}
.menu li li {
	display:block;
	float:none;
	padding:0px;
	width:225px;
	}
.menu li ul a{
	display:block;
	font-size:11px;
	font-style:normal;
	padding:0px 10px 0px 15px;
	text-align:left;
	}
	.menu li ul a:hover{
		background:#949494;
		color:#000000;
		opacity:1.0;
		filter:alpha(opacity=100);
		}
.menu p{
	clear:left;
	}	

este é o css que usei no meu projecto, tenta adaptar para ti para o que precisas

[Guest mmartinho]

Obrigado. Já consegui por o menu a funcionar apesar de ainda não estar tudo como quero. Mas isso tb é só alterar uma coisinha aqui e outra ali e fica feito. Muito Obrigado pela tua ajuda.

http://img35.imageshack.us/img35/8134/menuteste.png

Melhores Cumprimentos

Marco Martinho