Ergebnis 1 bis 10 von 10

Thema: brauche HILFE beim Dropdownmenü

  1. #1
    HTML Newbie
    Registriert seit
    14.05.2015
    Beiträge
    5
    Danke
    2
    Bekam 0 mal "Danke" in 0 Postings

    Standard brauche HILFE beim Dropdownmenü

    ich brauche hilfe beim dropdownmenü
    das was runterdropt kommt immer ganz links auf der seite und nicht unter dem menüeintrag wo es soll

    css
    Code:
    /* Navigation */ nav {    display:block;    height: 50px;    background:#FFFFFF;    text-align:center;}
    nav ul {    display:block;}nav ul li {    float:center;    display:inline;    margin:15px;    position:relative;}nav ul li a {    text-align:center;    text-decoration:none;    color:#454040;    font-size: 1.125em;    line-height:2.5em;    padding:0.563em 0.938em 0.375em 0.983em;    transition:background 0.2s;    -webkit-transition:background 0.2s;}
    nav ul li a:hover {    background:#DBD9D8;    border-bottom: 0.188em solid #E7590B;}nav ul li a.active {    border-bottom: 0.188em solid #E7590B;}
    #submenu {    position: absolute;    visibility:hidden;    background: #FFFFFF;    display:inline-block;    margin:auto;    float:inherit;}#submenu li a{    padding:0 90;    display: block;    text-align:center;    text-decoration:none;    }nav li:hover #submenu{        display:block;        visibility:visible;}li.active #submenu{    display:block;
    menü
    Code:
    <<nav class="nav">            <ul>                <li><a href="index.html">News</a></li>                <li><a href="team.html">Team</a>                    <ul id="submenu">                        <li><a href="sarah.html">Sarah</a></li>                        <li><a href="jan.html>">Jan</a></li>                        <li><a href="sara.html">Sara</a></li>                        <li><a href="geri.html">Geri</a></li>                     </ul>                     </li>                <li><a href="fotos.html">Ueber uns</a></li>                <li><a href="index.html">Studio</a></li>                <li><a href="index.html">Dienstleistungen</a></li>                <li><a href="index.html">Anfahrt</a></li>            </ul>        </nav>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in)
    Registriert seit
    13.06.2012
    Beiträge
    1.151
    Danke
    14
    Bekam 63 mal "Danke" in 61 Postings

    Standard AW: brauche HILFE beim Dropdownmenü

    Neu angemeldet, "ich brauche hilfe" und Codeschnipsel hingerotzt. Ich hoffe niemand hilft. Das nenne ich eine Frechheit.
    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    14.05.2015
    Beiträge
    5
    Danke
    2
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: brauche HILFE beim Dropdownmenü

    kannst du mir wenigstens erklären wie ich diese codeschnispel hier übersichtlicher posten kann?

  4. #4
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: brauche HILFE beim Dropdownmenü

    Hallo

    zum Beispiel so

    Code:
    /* Navigation */ 
    nav {
       display: block;
       height: 50px;
       background: #FFFFFF;
       text-align: center;
    }
    nav ul {
       display: block;
    }
    nav ul li {
       float: center;
       display: inline;
       margin: 15px;
       position: relative;
    }
    nav ul li a {
       text-align: center;
       text-decoration: none;
       color: #454040;
       font-size: 1.125em;
       line-height: 2.5em;
       padding: 0.563em 0.938em 0.375em 0.983em;
       -webkit-transition: background 0.2s;
       transition: background 0.2s;
    }
    nav ul li a:hover {
       background: #DBD9D8;
       border-bottom: 0.188em solid #E7590B;
    }
    nav ul li a.active {
       border-bottom: 0.188em solid #E7590B;
    }
    #submenu {
       position: absolute;
       visibility: hidden;
       background: #FFFFFF;
       display: inline-block;
       margin: auto;
       float: inherit;
    }
    #submenu li a {
       padding: 0 90;
       display: block;
       text-align: center;
       text-decoration: none;
    }
    nav li:hover #submenu {
       display: block;
       visibility: visible;
    }
    li.active #submenu {
       display: block;
    und so

    Code:
    <<nav class="nav">
       <ul>
          <li><a href="index.html">News</a></li>
          <li><a href="team.html">Team</a>
          <ul id="submenu">
             <li><a href="sarah.html">Sarah</a></li>
             <li><a href="jan.html>">Jan</a></li>
             <li><a href="sara.html">Sara</a></li>
             <li><a href="geri.html">Geri</a></li>
          </li>
          <li><a href="index.html">Studio</a></li>
          <li><a href="index.html">Dienstleistungen</a></li>
          <li><a href="index.html">Anfahrt</a></li>
       </ul>
    </nav>
    oder auch so

    Code:
    <!DOCTYPE html>
    <html lang="de">
    <head>
       <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
       <title>Navigation</title>
       <meta name="description" content="HTML5, CSS3">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <!-- Um alte IE HTML5-tauglich zu machen -->
       <!--[if lt IE 9]>
          <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
       <![endif]-->
       <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
       <style>
          /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
          header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
             display: block;
          }
          * {
             -moz-box-sizing: border-box;
             box-sizing: border-box;
          }
          html {
             font-size: 120%;
          }
          body {
             padding: 0;
          }
          p {
          }
    
          /* Navigation */ 
          nav {
             display: block;
             height: 50px;
             background: #FFFFFF;
             text-align: center;
          }
          nav ul {
             display: block;
          }
          nav ul li {
             float: center;
             display: inline;
             margin: 15px;
             position: relative;
          }
          nav ul li a {
             text-align: center;
             text-decoration: none;
             color: #454040;
             font-size: 1.125em;
             line-height: 2.5em;
             padding: 0.563em 0.938em 0.375em 0.983em;
             -webkit-transition: background 0.2s;
             transition: background 0.2s;
          }
          nav ul li a:hover {
             background: #DBD9D8;
             border-bottom: 0.188em solid #E7590B;
          }
          nav ul li a.active {
             border-bottom: 0.188em solid #E7590B;
          }
          #submenu {
             position: absolute;
             visibility: hidden;
             background: #FFFFFF;
             display: inline-block;
             margin: auto;
             float: inherit;
          }
          #submenu li a {
             padding: 0 90;
             display: block;
             text-align: center;
             text-decoration: none;
          }
          nav li:hover #submenu {
             display: block;
             visibility: visible;
          }
          li.active #submenu {
             display: block;
    
       </style>
    </head>
    <body>
       <<nav class="nav">
          <ul>
             <li><a href="index.html">News</a></li>
             <li><a href="team.html">Team</a>
             <ul id="submenu">
                <li><a href="sarah.html">Sarah</a></li>
                <li><a href="jan.html>">Jan</a></li>
                <li><a href="sara.html">Sara</a></li>
                <li><a href="geri.html">Geri</a></li>
             </li>
             <li><a href="index.html">Studio</a></li>
             <li><a href="index.html">Dienstleistungen</a></li>
             <li><a href="index.html">Anfahrt</a></li>
          </ul>
       </nav>
    </body>
    </html>
    Und benutze die Vorschau-Möglichkeit.

    Dann hättest du vielleicht auch die sachlichen Fehler entdeckt, mit denen wir uns rumärgern müssen um dir zu helfen. Zum Beispiel das der CSS-Code einfach aufhört und damit offensichtlich nicht vollständig ist. Oder das im HTML-Teil zwei ul-Elemente geöffnet werden, aber nur eins geschlossen wird.

    Gruss

    MrMurphy

  5. #5
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: brauche HILFE beim Dropdownmenü

    Bitte
    Code:
    <!DOCTYPE html>
    <html lang="de">
    <head>
       <meta charset="utf-8">
       <title>Navigation</title>
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>  
    * {
     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 #E7590B;
    }
    
    li ul {
     position: absolute;
     top:-99999em;
     background:#eee;
    }
    
    li ul li {
     display:block;
    }
    
    nav li:hover ul {
     top:auto;
    }
    </style>
    </head>
    <body>
       <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>">Jan</a></li>
                <li><a href="sara.html">Sara</a></li>
                <li><a href="geri.html">Geri</a></li>
              </ul>
             </li>
             <li><a href="index.html">Studio</a></li>
             <li><a href="index.html">Dienstleistungen</a></li>
             <li><a href="index.html">Anfahrt</a></li>
          </ul>
       </nav>
    </body>
    </html>

  6. Folgende User finden die Antwort von djheke gut:


  7. #6
    HTML Newbie
    Themenstarter

    Registriert seit
    14.05.2015
    Beiträge
    5
    Danke
    2
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: brauche HILFE beim Dropdownmenü

    Vielen dank!!

    - - - Aktualisiert - - -

    djheke kannst du mir bei noch was helfen bitte... ich bekomme das bild vom header nicht kleiner egal wie ich es ändere es bleibt immer gleich groß... hab größe in photoshop geändert und versucht diese neue größe per html - css umzusetzen aber es funktioniert nicht ohne dass alles ganz falsch angezeigt wird

    CSS
    Code:
    /* General Style */ 
    
    
    body {
    	background:#DCDCDC;
    	font-size:100%;
    	margin:0em;
    	padding:0em;
    }
    
    
    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;
    }
    /* 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 #E7590B;
    }
    
    
    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;
    	}
    }

    HTML
    Code:
    <!DOCTYPE  html>
    <html>
    	<head>
        	<meta charset="utf-8">
    		<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="index.html">Studio</a></li>
             <li><a href="index.html">Dienstleistungen</a></li>
             <li><a href="index.html">Anfahrt</a></li>
          </ul>
       </nav>
            <p>
    		<section id="main">
    			<article>
    				<h2>Geri - Tattoo</h2>
    				<img src="images/geri.jpg"/>
    			</article>
    			<aside>
    				<section>
    					<h2><a href="http://carbonfeet78.blogspot.it/" target="_blank">Artworks</a></h2>
    				</section>
    				<section>
    					<h2>Steckbrief</h2>
    					<p></p>					
    				</section>
                    
    			</aside>
    		</section>
    		<footer>
    			<ul>
    				<li>&copy; 2015 Needlefactory</li>
    				<li><a href="kontakt.html">Kontakt</a></li>
    				<li><a href="impressum.html">Impressum</a></li>
    			</ul>
    		</footer>
    	</body>
    </html>
    ich hätte das bild vom header gerne etwas kleiner wie groß genau das müsste ich gern schauen. aber die höhe sollte 70 - 100px ca sein.
    Können Sie mir bitte weiterhelfen?

  8. #7
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: brauche HILFE beim Dropdownmenü

    Code:
    img {
        height:100px;
      
    }

  9. Folgende User finden die Antwort von djheke gut:


  10. #8
    HTML Newbie
    Themenstarter

    Registriert seit
    14.05.2015
    Beiträge
    5
    Danke
    2
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: brauche HILFE beim Dropdownmenü

    Zitat Zitat von djheke Beitrag anzeigen
    Code:
    img {
        height:100px;
      
    }
    ok danke thema erledigt... header img

    VIELEN DANK!

  11. #9
    HTML Newbie
    Themenstarter

    Registriert seit
    14.05.2015
    Beiträge
    5
    Danke
    2
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: brauche HILFE beim Dropdownmenü

    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

    Code:
    <!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>&copy; 2015 Needlefactory</li>
    				<li><a href="kontakt.html">Kontakt</a></li>
    				<li><a href="impressum.html">Impressum</a></li>
    			</ul>
    		</footer>
    	</body>
    </html>
    Code:
    /* 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;
    	}
    }

  12. #10
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: brauche HILFE beim Dropdownmenü

    Also, wenn du keine Lust hast selber etwas zu machen, dann solltest du die eine fertige Vorlage kaufen.

Ähnliche Themen

  1. Brauche hilfe beim positionieren
    Von schramme im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 21.03.2013, 06:11
  2. Brauche Hilfe beim layouten
    Von NyctalusNoctula im Forum Eure Homepages und Foren - Vorstellung und Bewertungen
    Antworten: 5
    Letzter Beitrag: 10.05.2008, 12:25
  3. Brauche hilfe beim Homepage bau!
    Von BeeF im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 16.07.2007, 16:40
  4. BRAUCHE HILFE BEIM IPOT
    Von ipot im Forum Computer - Internet Forum
    Antworten: 0
    Letzter Beitrag: 25.06.2007, 20:31
  5. Ich brauche hilfe beim Teamspeak 2 RC2
    Von Saskia im Forum Sponsor gesucht !
    Antworten: 1
    Letzter Beitrag: 06.05.2007, 02:24

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •