Hey,
ich habe eine Website für einen Freund erstellt. Ich weiß leider, trotz durchlesen vieler Tutorials, nicht, wie ich es hinkriege ein Dropdown Menü zu erstellen.
Ein Menü habe ich berreits. Es soll jedoch bei einem Menüpunkt ein Dropdown Menü erscheinen wenn man über diesen Menüpunkt mit der Maus fährt.
Meine Website sieht bis jetzt so aus:
[Only registered and activated users can see links. Click Here To Register...]
Ich möchte das bei dem Menüpunkt "Angebote" ein Dropdown Menü bei einem Hover auf Angebote erscheint. Dies soll nur in CSS und HTML/PHP gecoded werden. Und ich hoffe das ihr mir da helfen könnt.
Mein jetziger Code sieht so aus:
index.php
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>XX</title>
</head>
<body>
<div class="clear">
<div id="border">
<div id="header">
<center><img src="img/head.png" width="300px" height="80px"></center>
</div>
<div id="menu">
<div id="navi">
<?PHP include("navi.php"); ?>
</div>
</div>
<div id="section">
<?PHP
$includeDir = ".".DIRECTORY_SEPARATOR."pages".DIRECTORY_SEPARATOR;
$includeDefault = $includeDir."home.php";
if(isset($_GET['s']) && !empty($_GET['s']))
{
$_GET['s'] = str_replace("\0", '', $_GET['s']);
$includeFile = basename(realpath($includeDir.$_GET['s'].".php"));
$includePath = $includeDir.$includeFile;
if(!empty($includeFile) && file_exists($includePath))
{
include($includePath);
}
else
{
include($includeDefault);
}
}
else
{
include($includeDefault);
}
?>
</div>
</div>
</div>
</body>
</html>
navi.php
Code:
<li class="topmenu"><a href="index.php"><h1 class="h1menu">Startseite</h1></a></li>
<li class="topmenu"><a href="index.php?s=oeffnung"><h1 class="h1menu">Öffnungszeiten</h1></a></li>
<li class="topmenu"><a href="index.php?s=angebote"><h1 class="h1menu">Angebote</h1></a></li>
<li class="topmenu"><a href="index.php?s=fotos"><h1 class="h1menu">Fotos</h1></a></li>
<li class="topmenu"><a href="index.php?s=links"><h1 class="h1menu">Links</h1></a></li>
<li class="topmenu"><a href="index.php?s=kontakt"><h1 class="h1menu">Kontakt</h1></a></li>
CSS:
Code:
html {
padding:0;
margin:0;
height:100%;
}
body {
width:1000px;
margin:0;
padding:0;
background:url(../img/bg.png) repeat;
margin-left:auto;
margin-right:auto;
height:100%;
border-right:1px solid black;
border-left:1px solid black;
}
#header {
width:1000px;
height:150px;
background:#fff url("../img/banner.png");
position:relative;
margin-top:0;
}
#header img {
padding-top:30px;
}
#menu {
position:relative;
background:url("../img/menu2.png") repeat-x;
width:1000px;
height:52px;
margin-left:auto;
margin-right:auto;
text-align:center;
margin-top:30px;
box-shadow:1px 1px 10px #333333;
}
#navi {
margin-left:auto;
margin-right:auto;
}
#navi li {
list-style:none;
}
.h1menu {
font-size:14px;
margin-top:15px;
text-shadow:#000 0px 0px 4px;
color:#fff496;
}
.topmenu a {
text-decoration:none;
float:left;
width:120px;
height:48px;
margin-left:10px;
margin-right:10px;
margin-top:2px;
}
.topmenu a:hover {
background:url("../img/hover.png") repeat-x;
}
#section {
position:relative;
width:900px;
height:100%;
margin-left:auto;
margin-right:auto;
margin-top:30px;
background:#eefcff;
border:1px solid #000;
border-radius: 18px;
padding:6px;
box-shadow: 2px 2px 20px #000;
}
.clear {
clear:both;
}
Ich hoffe das ihr mir vielleicht bei meinem Problem/Frage helfen könnt :)
Gruß
Critone
