Jump to content

Menu Dropdown


Guest mmartinho

Recommended Posts

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.

Link to comment
Share on other sites

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{
		...
		}

...Join the dark side...and get a free cookie...

Link to comment
Share on other sites

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

Link to comment
Share on other sites

<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

...Join the dark side...and get a free cookie...

Link to comment
Share on other sites

.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

...Join the dark side...and get a free cookie...

Link to comment
Share on other sites

<!-- 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.

Link to comment
Share on other sites

.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

...Join the dark side...and get a free cookie...

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.