Blackylein
Erfahrenes Mitglied
Hallo!
Ich habe ein Menü gestaltet und möchte dieses jetzt in ein dynamische Menü verwandeln. Wenn man also über einen Menüpunkt fährt, sollen darunter mehrere Menüpunkte erscheinen, so wie in dem Beispiel bei Self-HTML (ich muss zugeben, dass ich die Erklärungen bei Self-HTML nicht verstehe).
Hier der Code meiner HTML Seite
hier der CSS-Code
Ich hoffe ihr könnt mir irgendwie weiterhelfen.
Ich habe ein Menü gestaltet und möchte dieses jetzt in ein dynamische Menü verwandeln. Wenn man also über einen Menüpunkt fährt, sollen darunter mehrere Menüpunkte erscheinen, so wie in dem Beispiel bei Self-HTML (ich muss zugeben, dass ich die Erklärungen bei Self-HTML nicht verstehe).
Hier der Code meiner HTML Seite
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Online-Version of the Intranet</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="carina skladal">
<meta name="keywords" content="carina, skladal, carina skladal, intranet, hak, baden, hak baden">
<meta name="description" content="onlineversion der intranet-site">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="logo"><img src="http://www.tutorials.de/forum/images/header.gif"></div>
<div class="menue">
<div class="menueitem1"><b>.news</b></div>
<div class="menueitem2"><b>.pics</b></div>
<div class="menueitem3"><b>.downloads</b></div>
<div class="menueitem4"><b>.votings</b></div>
<div class="menueitem5"><b>.community</b></div>
<div class="menueitem6"><b>.dates</b></div>
</div>
<div class="space"></div>
.......
</body>
</html>hier der CSS-Code
Code:
body {
background-color: #506173;
font-family: Arial, sans-serif;
font-size: 10pt;
color: #000000;
}
.logo {
width: 798px;
height: 120px;
padding: 0px;
position: relative;
margin-left: auto;
margin-right: auto;
}
.menue {
width: 798px;
height: 30px;
padding: 0px;
position: relative;
margin-left: auto;
margin-right: auto;
}
.menueitem1 {
width: 133px;
background-image: url("../images/menueitem1.gif");
background-repeat: no-repeat;
float: left;
text-align: center;
position: relative;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
.menueitem1:hover {
background-color: #000000;
background-image: none;
color: #FFFFFF;
}
.menueitem2 {
width: 133px;
background-image: url("../images/menueitem2.gif");
background-repeat: no-repeat;
float: left;
text-align: center;
position: relative;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
.menueitem2:hover {
background-color: #000000;
background-image: none;
color: #FFFFFF;
}
.menueitem3 {
width: 133px;
background-image: url("../images/menueitem3.gif");
background-repeat: no-repeat;
float: left;
text-align: center;
position: relative;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
.menueitem3:hover {
background-color: #000000;
background-image: none;
color: #FFFFFF;
}
.menueitem4 {
width: 133px;
background-image: url("../images/menueitem4.gif");
background-repeat: no-repeat;
float: left;
text-align: center;
position: relative;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
.menueitem4:hover {
background-color: #000000;
background-image: none;
color: #FFFFFF;
}
.menueitem5 {
width: 133px;
background-image: url("../images/menueitem5.gif");
background-repeat: no-repeat;
float: left;
text-align: center;
position: relative;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
.menueitem5:hover {
background-color: #000000;
background-image: none;
color: #FFFFFF;
}
.menueitem6 {
width: 133px;
background-image: url("../images/menueitem6.gif");
background-repeat: no-repeat;
float: left;
text-align: center;
position: relative;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
.menueitem6:hover {
background-color: #000000;
background-image: none;
color: #FFFFFF;
}Ich hoffe ihr könnt mir irgendwie weiterhelfen.
