Hallo,
ich vesuche aus diversen Gründen meine Homepage (http://www.fr*nzisk*-h*ering.weebly, bitte * durch "a" ersetzen) neu mit HTML und CSS in Microsoft Expression Web zu schreiben. Bitte habt Verständnis mit mir, denn ich kenne ich mit diesem Thema eigentlich nicht aus.
Leider funktioniert mein Dropdown-Menü in der Navigationsleiste nicht, d. h. wenn ich mit dem Mauszeiger über Galerie fahre erscheint nichts. Dazu ist noch zu sagen, dass das Dropdown-Menü vertikal unter dem Punkt Galerie erscheinen soll.
Hier mein HTML-Code:
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>a.a</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<div id="top">
<div id="logo">
<img src="images/Logo WS.png" />
</div>
<div id="nav">
<ul><li><a href="index.html">Galerie</a><li>
<ul>
<li><a href="portrait.html">Portrait</a><li>
<li><a href="paare.html">Paare</a><li>
<li><a href="freunde.html">Freunde</a><li>
<li><a href="schwangerschaft.html">Schwangerschaft</a><li>
<li><a href="babys.html">Babys</a><li>
<li><a href="kinder.html">Kinder</a><li>
<li><a href="familie.html">Familie</a><li>
<li><a href="hochzeit.html">Hochzeit</a><li>
<li><a href="tiere.html">Tiere</a><li>
</ul>
<li/>
<li><a href="preise.html">Preise</a></li>
<li><a href="about.html">Über mich</a></li>
<li><a href="contact.html">Kontakt</a></li>
</ul>
</div>
</div>
<div id="content">
<a href="portrait.html"><img src="images/Galerie Portrait.png" width="280px" height="229px"></a>
<a href="babys.html"><img src="images/Galerie Babys.png" width="280px" height="229px"></a>
<a href="hochzeit.html"><img src="images/Galerie Hochzeit.png" width="280px" height="229px"></a>
<a href="tiere.html"><img src="images/Galerie Tiere.png" width="280px" height="229px"></a>
<a href="paare.html"><img src="images/Galerie Paare.png" width="280px" height="229px"></a>
<a href="freunde.html"><img src="images/Galerie Freunde.png" width="280px" height="229px"></a>
<a href="schwangerschaft.html"><img src="images/Galerie Schwangerschaft.png" width="280px" height="229px"></a>
<a href="kinder.html"><img src="images/Galerie Kinder.png" width="280px" height="229px"></a>
<a href="familie.html"><img src="images/Galerie Familie.png" width="280px" height="229px"></a>
</div>
<div id="footer">
<div id="footer-links">
<ul>
<li> Gutscheine</li>
<li> </li>
<li>Impressum</li>
<li>Datenschutzerklärung</li>
<li>© 2014 - a.a</li>
</ul>
</div>
<div id="footer-social-media">
<ul>
<li><a href=“http://www.facebook.com/a.a“><img src=”Bild Facebook auswählen” /></a></li>
<li><a href=“mailto:a@a.de“><img src=”Bild E-Mail auswählen” /></a></li>
</ul>
</div>
</div>
</body>
</html>Hier mein CSS-Code:
Code
/* Reset */
html, body {
margin:0;
padding:0;
border:0;
background:transparent;
font-size:10px;
}
div,span, article, aside, footer, header, hgroup, nav, section,
h1, h2 h3, h4, h5, h6, p, blockquote, a, ol, ul, li,
table, tr, th, td, tbody,tfoot, thead {
margin:0;
padding:0;
border:0;
vertical-align:baseline;
background: transparent;
}
img {
margin: 0;
padding: 0;
border: 0;
}
table, tr, td, td, tbody, tfoot, thead {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
background: transparent;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input, select, textarea, form, fieldset {
margin: 0;
padding: 0;
border: 0;
}
article, aside, dialog, figure, footer, header; hgroup, nav, section {
display: block;
}
h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike {
font-family:"Open Sans";
font-size: 100%;
font-weight: normal;
font-style: normal;
line-height: 100%;
text-indent: 0;
text-decoration: none;
text-align: left;
color: #464646;
}
ol, ul {
list-style: none;
}
/* Global */
html { }
body { background-color: #ffffff; }
/* Headings */
h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #464646; }
h1 { font-size: 22px; }
h2 { font-size: 14px; }
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img h1 { margin: 0; }
/* Text Elements */
p { color: #464646; font-size: 14px; line-height: 100%; }
p .left { margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p .right { margin:1.5em 0 1.5em 1.5em; padding: 0; }
a { }
a:link { color: #464646; }
a:visited { color: #464646; }
a:active { color: #b0b0b0; }
a:focus { color: #b0b0b0; }
a:hover { color: #b0b0b0; }
blockquote { color: #000; font-size: 12px; }
strong { font-weight: bold; }
em { font-style: italic; }
/* Containers */
#top { background-color: #ffffff; width: 100%; overflow: hidden;
border-bottom: 1px #e7e7e7 solid; height:200px; text-align:center; z-index:20; }
#logo { margin:0px auto; }
#nav {
text-align:center;
}
#nav ul {
padding:0px;
width:100%;
margin: 0px;
display:block;
}
#nav li {
display: inline-block;
}
#nav ul li {
list-style:none;
}
#nav ul li a {
display:block;float: left; padding: 10px 20px;
}
#nav ul li ul {
display:inline;
visibility:hidden;
position:absolute;
padding:0px;
}
#nav ul li ul li {
float:none;
}
#content { float: left; width: 900px; padding: 15px; }
#content h1 { margin: 0 0 20px 0; font-size: 22px; padding: 20px 0; }
#content p { margin: 5px 0; line-height: 160%; text-align:justify; }
#content h2 { margin: 20px 0 0 0; }Vielen Dank vorab.