hallo henry
ich bräuchte nochmal deine hilfe und zwar würden beim dropdown menü noch sublevels dazu kommen. kannst du mir nochmal helfen?
hast du auch erfahrung mit dem menü dass es für mobile smartphones benutzbar ist? denn es ist nur für das normale menü benutzbar nicht aber für dropdown.
vielen dank im voraus
du kannst mir auch gerne deine paypal adresse schreiben und ich werde dir eine spende für deine arbeit zukommen lassen!
vielen dank
HTML
<!DOCTYPE html>
<html>
<head>
<title>needlefactory.it</title>
<link rel="icon" href="http://www.needlefactory.it/images/icon.png" type="icon/png" />
<link rel="shortcut icon" href="http://www.needlefactory.it/images/icon.png" type="icon/png" />
<link rel="stylesheet" href="style.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.menubutton').click(function() {
$('nav').slideToggle('slow');
});
});5
</script>
</head>
<body>
<section id="menubar">
<ul>
<li><a class="menubutton" href="#menu"><img src="images/menu.png" /></a></li>
</ul>
</section>
<header>
<img src="images/logo_header_v2.jpg" height="150" width="900">
</header>
<nav>
<ul>
<li><a href="index.html">News</a></li>
<li><a href="team.html">Team</a>
<ul>
<li><a href="sarah.html">Sarah</a></li>
<li><a href="jan.html">Rider</a></li>
<li><a href="sara.html">Sara</a></li>
<li><a href="geri.html">CarbonFeet</a></li>
</ul>
</li>
<li><a href="studio.html">Studio</a></li>
<li><a href="#">Dienstleistungen</a>
<ul>
<li><a href="#">Tattoo</a>
<ul>
<li><a href="tattoo/geschichte.html">Geschichte</a></li>
<li><a href="tattoo/wie_funktioniert_es.html">Wie funktioniert tätowieren?</a></li>
<li><a href="tattoo/wo&was.html">Wo & was tätowieren?</a></li>
<li><a href="tattoo/preise.html">Preise</a></li>
<li><a href="tattoo/schmerzen&gefahren.html">Schmerzen und Gefahren</a></li>
<li><a href="tattoo/pflegehinweise.html">Pflegehinweise</a></li>
</ul>
</li>
<li><a href="#">Piercing</a>
</ul>
</li>
<li><a href="anfahrt.html">Anfahrt</a></li>
</ul>
</nav>
<p>
<section id="main">
<section id="main">
<img src="images/logo_con.jpg"
</section>
<footer>
<ul>
<li>© 2015 Needlefactory</li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</footer>
</body>
</html>CSS
/* General Style */
body {
background:#DCDCDC;
font-size:100%;
margin:0em;
padding:0em;
overflow: scroll;
}
h1 {
font-size:2.5em;
line-height:3.8em;
font-family:Helvetica;
font-weight:100;
color:#E2DBDB;
margin:0em;
}
h2 {
font-size:1.563em;
line-height:1.8em;
font-family:Helvetica;
font-weight:100;
color:#2F2D2C;
margin:0em;
padding:1.25em;
text-align:left;
}
p {
line-height:1.25em;
font-family:Helvetica;
font-weight:100;
color:#2F2D2C;
margin:0em;
padding:1.25em;
text-align:justify;
}
ul {
margin:0px;
padding:0px;
}
li {
list-style:square;
font-family:Helvetica;
font-weight:100;
color:#2F2D2C;
line-height:1.25em;
margin:0em;
padding:0em;
margin:0.313em 0em 0.313em 0em;
}
img {
width:90%;
height:auto;
max-width:100%;
}
a {
text-decoration: none;
}
/* On Top Bar */
#menubar {
display:block;
background:#FFFFFF;
}
#menubar ul {
display:block;
width:2em;
padding:0.9em;
}
#menubar ul li {
display:inline;
}
#menubar ul li a.menubutton {
display:none;
}
/* Header */
header {
display:block;
background:#000000;
text-align:center;
}
header img {
height:150px;
width:auto;
/* Navigation */
}
* {
margin:0;
padding:0;
text-decoration: none;
list-style:none;
border:none;
}
nav {
background: #eee;
text-align: center;
}
nav a {
padding:10px 20px;
display:block;
text-align: center;
color:#000;
border-bottom: 2px solid transparent;
}
nav ul li {
display:inline-block;
position: relative;
}
nav ul li a:hover {
background: #DBD9D8;
border-bottom: 2px solid #64b2bf;
}
li ul {
position: absolute;
top:-99999em;
background:#eee;
}
li ul li {
display:block;
}
nav li:hover ul {
top:auto;
}
/* Content Area */
#main {
display:block;
width:96%;
max-width:980px;
margin:1.25em auto;
padding:0em;
}
#main article {
display:inline-block;
width:65.3%;
background:#FFFFFF;
vertical-align: top;
margin:0em;
padding:0em;
text-align:center;
}
#main article img {
max-width:400px;
box-shadow:0px 0px 10px -5px #4c4948;
border-radius: 5px;#
}
#main aside {
display:inline-block;
width:30.6%;
margin-left:3%;
padding:0em;
vertical-align:top;
}
#main aside section {
margin-bottom:1.563em;
background:#FFFFFF;
border-bottom: 0.188em solid #65b1c0;
}
#main article h2 {
padding:1em 1.8em 1em 1.8em;
}
#main aside section ul {
padding:0em 1.875em 1.25em 2.5em;
}
/* Footer */
footer {
display:block;
background:#2F2C2C;
text-align:center;
}
footer ul {
display:block;
width:100%;
max-width:980px;
text-align:left;
margin:0px auto;
}
footer ul li {
display:inline;
font-size:0.8em;
line-height:2.8em;
color:#E2DBDB;
padding:0em 0.625em 0em 0.625em;
}
footer ul li a {
color:#E2DBDB;
}
/* Mobile Style */
@media screen and (max-width:800px) {
body {
font-size:90%;
}
}
@media screen and (max-width:600px) {
#main aside, #main article {
width:100%;
display:block;
margin:0.625em 0em 0.625em 0em;
}
}
@media screen and (min-width:550px) {
nav.nav {
display:block !important;
}
}
@media screen and (max-width:550px) {
body {
font-size:86%;
}
#menubar ul li a.menubutton {
display:block;
}
nav {
display:none;
height:auto;
}
nav ul li {
display:block;
margin:0.3em 0em 0.3em 0em;
}
}
