Menù a tendina Blog

Souls · 26-03-2016, 14:23

Sto creando un mio blog e mi sono trovato di fronte a questo problema.
Come posso mettere in 'secondo piano' la png in quanto va a oscurare il menù a tendina. Potreste aiutarmi con il codice HTML/CSS?
http://oi65.tinypic.com/1585qvo.jpg

Questo è il codice:

<html lang="it" xmlns="http://riciclandoblog.blogspot.it">
<head>

<title>Riciclando</title>

<style type="text/css">
body {
background-color: z-index;
font-family: Arial;
}

#menu {
width: left;
margin: centre auto;
}

#menu ul {
padding: 0;
margin: 0;
}

#menu li {
position: relative;
float: left;
width: 140px;
text-align: center;
list-style: none;
}

#menu li a {
background-color: z-index:999;
color: #FFF;
padding: 15px 20px;
text-decoration: none;
display: block;
}

#menu li a:hover {
background-color: #4d4d4d;
text-shadow: 0px 0px 1px #FFF;
}

#menu ul ul {
position: absolute;
top: 48px;
visibility: hidden;
}

#menu ul li:hover ul {
visibility: visible;
}

#menu ul ul:hover {
box-shadow: 0px 20px 30px #7C7C7C;
}

#menu ul ul li a {
background-color: #3A3A3A;
}

#menu ul ul li a:hover {
background-color: #3F3F3F;
}
</style>
</head>
<body>
<div id="menu">

<ul>

<li><a href="http://riciclandoblog.blogspot.it/2016/03/riciclando-body-background-color-ccc.html" rel="nofollow" style="text-align: start;">HOME</a></li>

<li>
<a href="http://riciclandoblog.blogspot.it/2016/02/riciclando-body-background-color-ccc.html">Rubrica</a>
<ul>
<li><a href="http://riciclandoblog.blogspot.it/2016/02/riciclando-body-background-color-ccc.html">Compostiamo</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=9010470457773427798#"></a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=9010470457773427798#"></a></li>
</ul>
</li>
<li><a href="http://riciclandoblog.blogspot.it/2016/03/contatti.html" rel="nofollow">Contatti</a></li>
</ul>
</div>
</body>

cenarius_88 · 29-03-2016, 12:55

Ciao. Non so se è la scelta migliore, e per mancanza di tempo non la provo io in prima persona ma lascio a te il compito...

puoi assegnare tramite css l'attributo z-index:valore agli elementi secondo la regola per cui un valore maggiore porta l'elemento a stare davanti

HTML

Codice:

<div id="1">Sono dietro</div>
<div id="2">Sono davanti</div>

CSS

Codice:

#1{
z-index=1;
}
#2{
z-index=2;
}

Dovrebbe funzionare.
Ah... il valore z-index può assumere valori positivi e negativi ma la regola generale non cambia

26-03-2016, 14:23	#1
Souls Member Iscritto dal: Oct 2014 Messaggi: 67	Menù a tendina Blog Sto creando un mio blog e mi sono trovato di fronte a questo problema. Come posso mettere in 'secondo piano' la png in quanto va a oscurare il menù a tendina. Potreste aiutarmi con il codice HTML/CSS? http://oi65.tinypic.com/1585qvo.jpg Questo è il codice: <html lang="it" xmlns="http://riciclandoblog.blogspot.it"> <head> <title>Riciclando</title> <style type="text/css"> body { background-color: z-index; font-family: Arial; } #menu { width: left; margin: centre auto; } #menu ul { padding: 0; margin: 0; } #menu li { position: relative; float: left; width: 140px; text-align: center; list-style: none; } #menu li a { background-color: z-index:999; color: #FFF; padding: 15px 20px; text-decoration: none; display: block; } #menu li a:hover { background-color: #4d4d4d; text-shadow: 0px 0px 1px #FFF; } #menu ul ul { position: absolute; top: 48px; visibility: hidden; } #menu ul li:hover ul { visibility: visible; } #menu ul ul:hover { box-shadow: 0px 20px 30px #7C7C7C; } #menu ul ul li a { background-color: #3A3A3A; } #menu ul ul li a:hover { background-color: #3F3F3F; } </style> </head> <body> <div id="menu"> <!-- Lista generale --> <ul> <!-- 1° Elemento --> <li><a href="http://riciclandoblog.blogspot.it/2016/03/riciclando-body-background-color-ccc.html" rel="nofollow" style="text-align: start;">HOME</a></li> <!-- 2° Elemento: (Sottomenu) --> <li> <a href="http://riciclandoblog.blogspot.it/2016/02/riciclando-body-background-color-ccc.html">Rubrica</a> <ul> <li><a href="http://riciclandoblog.blogspot.it/2016/02/riciclando-body-background-color-ccc.html">Compostiamo</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=9010470457773427798#"></a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=9010470457773427798#"></a></li> </ul> </li> <li><a href="http://riciclandoblog.blogspot.it/2016/03/contatti.html" rel="nofollow">Contatti</a></li> </ul> </div> </body> Ultima modifica di Souls : 26-03-2016 alle 14:44.

29-03-2016, 12:55	#2
cenarius_88 Member Iscritto dal: Nov 2007 Città: Alcamo Messaggi: 103	Ciao. Non so se è la scelta migliore, e per mancanza di tempo non la provo io in prima persona ma lascio a te il compito... puoi assegnare tramite css l'attributo z-index:valore agli elementi secondo la regola per cui un valore maggiore porta l'elemento a stare davanti HTML Codice: <div id="1">Sono dietro</div> <div id="2">Sono davanti</div> CSS Codice: #1{ z-index=1; } #2{ z-index=2; } Dovrebbe funzionare. Ah... il valore z-index può assumere valori positivi e negativi ma la regola generale non cambia

Strumenti
Mostra una versione stampabile Invia questa pagina per email