Witam, tworze taka prosta stronke jednak mam maly problem z menu rozwijanym. Dokladnie chodzi o to, że jeżeli najadę myszką na jedno z moich menu, to zawartość div id="tresc"
przesuwa sie w prawo. Jak zrobic zeby to menu nie mialo wplywu na zawartosc tego diva?
index.php
<div id="menu"><a style="text-decoration:none; black; color:red; outline:none; HOVER{color:black} " href="index.php" > <p>Strona Główna
</p></a> <div id="menu"> <p>Przegląd
</p> <li><a href="#">Strona Główna
</a></li> <li><a href="#">Download
</a></li> <li><a href="#">Kontakt
</a></li> <li><a href="#">Forum
</a></li> <div id="menu"> <p style="position:relative; bottom: 8px";>Dokumenty wewnętrzne
</p> <li><a href="#">Strona Główna
</a></li> <li><a href="#">Download
</a></li> <li><a href="#">Kontakt
</a></li> <li><a href="#">Forum
</a></li> <div id="menu"> <p style="position:relative; bottom: 8px";>Dokumenty zewnętrzne
</p> <li><a href="#">Strona Główna
</a></li> <li><a href="#">Download
</a></li> <li><a href="#">Kontakt
</a></li> <li><a href="#">Forum
</a></li> <div id="menu"> <p>Edycja
</p> <li><a href="?page=klient_dodaj">Dodaj klienta
</a></li> <li><a href="#">Download
</a></li> <li><a href="#">Kontakt
</a></li> <li><a href="#">Forum
</a></li>
<?php
$page = (isset($_GET['page']) ? $_GET['page'] : "");
$name = "$page.php";
if(file_exists(basename($name)))
{include($name);}
else
{ echo'Wybierz operacje'; }
?>
oraz style:
html, body{
margin: 0;
padding: 0;
border: none;
background-color: #ababab;
background-repeat: repeat-x;
background-attachment: fixed;}
#pasek{
background-color: #ababab;
height: 1px;
width: 100%;
margin-bottom: 2px;
}
#calosc {
margin: 0 auto;
height: 100%;
width: 60%;
-moz-box-shadow: 5px 5px 15px #000;
-moz-border-radius: 2px;
}
#pasek2{
background-color: white;
height: 50px;
width: 100%;
margin-bottom: 50px;
margin: 0 auto;
}
#pasek3{
background-color: red;
height: 20px;
width: 100%;
}
#baner{
height: 100px ;
width: 100%;
}
#logo{
background-image: url("grafika/logo2.jpg");
background-position: left;
background-attachment: scroll;
background-repeat: no-repeat;
background-color: white;
border: 1px 196df8;
height: 100px ;
width: 100%;
float:left;
}
#logox{
background-image: url("grafika/logox.jpg");
background-position: right;
background-attachment: scroll;
background-repeat: no-repeat;
background-color: white;
border: 1px 196df8;
height: 100px ;
width: 35%;
float: right;
}
#menu{
outline:none;
position:relative; z-index:6;
left: 10px;
background: -moz-linear-gradient(6% 75% 90deg,#8F8F8F, #EBF2F2, #C7C7C7 100%);
font-family: verdana;
color: black;
float: left;
-moz-box-shadow: 0 1px 4px #222;
-moz-border-radius: 2px;
text-shadow: 1px 1px 1px #f1f1f1;
clear: none;
width: 16%;
height: 50px;
overflow: hidden;
margin-right:1px ;
}
#menu:hover {
text-shadow: 1px 1px 1px #afafaf;
outline:none;
background: url("grafika/kreska.jpg") repeat-x 0px 50px , -moz-linear-gradient(6% 75% 90deg,#1A45AB, #1948E3, #C7C7C7 100%);
color: white;
width: 18%;
height: auto; }
ul {
margin-top: 2px;
margin: 5px;
padding: 0px; }
li {
list-style-type: circle;
width: 100%;}
li a {
outline:none;
text-decoration: none;
display: block;
width: 100%;
padding: 5px;
color: white; }
li a:hover {
outline:none;
text-decoration:none ;
color: #3B3B3B;
width: 100%;
padding: 5px;
background-color: #BABABA }
p {
text-align:center ;
}
#tresc{
clear;
background-color: red;
height: 420px ;
width: 100%;
}
#stopka{
background: url("grafika/stopka.png")center no-repeat, -moz-linear-gradient(6% 75% 90deg,#8F8F8F, #EBF2F2, #C7C7C7 100%);
-moz-box-shadow: 5px 5px 15px #000;
-moz-border-radius: 2px;
height: 50px;
width: 100%;
clear: both;
margin-top: 5px;
margin-bottom: 20px;
}
#panel{
height: 15px;
width: 98%;
display: block;
-moz-border-radius: 5px;
-moz-box-shadow: 0 1px 4px #222;
background: -moz-linear-gradient(6% 75% 90deg,#1A45AB, #1948E3, #C7C7C7 100%);
margin-top:10px;
margin-bottom:10px;
margin-left: 5px;
}
#gora{
background-color: white;
height: 100%;
width: 100%;
}