Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 06.07.2015, 15:59
HappyPOny HappyPOny ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.07.2015
Beiträge: 34
HappyPOny befindet sich auf einem aufstrebenden Ast
Standard hover-Untermenüs beim Zeilenumbruch per CSS "mitnehmen"

Hallo,

Mein Problem ist, dass - wenn bei einer Browserfenster-Breite 480px der Menü5-Punkt in die nächste Zeile umbricht die Untermenü-Punkte 5.x, die dem Menü5 zugeordnet sind, an der ursprünglichen Menü5-Position hängen bleiben. Ich bin an Anregungen, Lösungsansätzen interessiert, wie ich per hover erzeugte Untermenüs x.y beim Zeilenumbruch per CSS "mitnehmen" und an den Menü5-Punkt anhängen kann. Mit der HTML-Datei, der style.css für das 'normale' Browserfenster und den CSS-Formatierungen v480.css, die bei einer Fensterbreite 480px wirksam werden, kann man mit ein Paar Mausklicks die hier beschriebene Lösung nachbauen.

Gruss, HappyPony

HTML-Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
 <head>
  <title>Wandernde Over-Liste</title>

  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
  <meta http-equiv="Content-Style-Type" content="text/css"/>
  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>


  <link rel="stylesheet" media="screen, handheld, projection, tv" type="text/css" href="css/style.css"/>
	<link rel="stylesheet" media="screen, handheld, projection, tv" type="text/css" href="css/v480.css"/>	
 
 <style type="text/css">

</style>
 </head>
 <body>
 
  <div id="kinderzahnaerzte">
    
    <div id="bg">
      
 	  <div id="navigation">
	    <ul style="position: relative; left: 15.3em;">
	                <li class="e1a" style="width: 6.8125em;"><a href="m1.html">Menü1</a>          <ul style="margin-left: em;">          </ul>
</li>
          <li class="e1" style="width: 6.75em;"><a href="m2.html">Menü2</a>          <ul style="margin-left: 6.8125em;">           
           <li><a href="/51.html">Untermenü 2.1</a></li>
           <li><a href="/52.html">Untermenü 2.2</a></li>
           <li><a href="/53.html">Untermenü 2.3</a></li>
           <li><a href="/54.html">Untermenü 2.4</a></li>
           <li><a href="/54.html">Untermenü 2.5</a></li>			
          </ul>
</li>
          <li class="e1" style="width: 7.8125em;"><a href="m3.html">Menü3</a>          <ul style="margin-left: 13.5625em;">           
           <li><a href="/51.html">Untermenü 3.1</a></li>
           <li><a href="/52.html">Untermenü 3.2</a></li>
           <li><a href="/53.html">Untermenü 3.3</a></li>
           <li><a href="/54.html">Untermenü 3.4</a></li>
           <li><a href="/54.html">Untermenü 3.5</a></li>			
          </ul>
</li>
          <li class="e1" style="width: 7.125em;"><a href="m4.html">Menü4</a>          <ul style="margin-left: 21.375em;">           
           <li><a href="/51.html">Untermenü 4.1</a></li>
           <li><a href="/52.html">Untermenü 4.2</a></li>
           <li><a href="/53.html">Untermenü 4.3</a></li>
           <li><a href="/54.html">Untermenü 4.4</a></li>
           <li><a href="/54.html">Untermenü 4.5</a></li>	
          </ul>
</li>
          <li class="e1" style="width: 7.875em;"><a href="m5.html">Menü5</a>          <ul style="margin-left: 28.5em;">
           <li><a href="/51.html">Untermenü 5.1</a></li>
           <li><a href="/52.html">Untermenü 5.2</a></li>
           <li><a href="/53.html">Untermenü 5.3</a></li>
           <li><a href="/54.html">Untermenü 5.4</a></li>
           <li><a href="/54.html">Untermenü 5.5</a></li>					 
          </ul>
</li>
	    </ul>
	  </div>	
	  <div id="content">
	   <div id="content_links">
   
	   </div>
	   <div id="content_mitte">
		 		<h1 >Dies ist eine lokale Entwicklerversion <br /> </h1>

         <h1><span class="unsichtbar">Lorem Ipsum</h1>
				 
               <p style="text-align: left;"><strong>Überschrift</strong></p><ul><li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li><li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li></ul><p><strong>Lorem Ipsum</strong></p><p style="text-align: left;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>	    
	   </div>
	   
	  </div>
	</div>

  </div>
  
 
 </body>
</html>

CSS-Formatierungen style.css
Code:
#navigation ul{xfloat:left;position:relative;margin:0;padding:0;text-align:left;left:-1px;z-index:4;width:41.25em;height:1.7em;background-color:#fce594;abackground-image:url(http://www.kinderzahnaerzte.de/grafik/bg_navi_e1_off.gif);background-repeat:repeat-x;background-position:bottom;borxder-top:1px solid #4f81cb;borxder-left:1px solid #4f81cb}#navigation ul li{float:left;wixdth:12em;display:block}#navigation ul li a{fxloat:left;padding:.5em 3.25em .5em 3.25em;height:100%;font-weight:bold;font-size:.75em;text-decoration:none;bacxkground-color:#e6e6e8;color:#7f7f7f;display:block;border:0;boxrder-bottom:1px solid #01204b;boryder-left:1px solid #2e65b5;boryder-right:1px solid #021938}#naxvigation ul li a:last-child{border:0;border-right:1px solid #2e65b5;border-left:0}#navigation ul li.e1a a{abackground-image:url(http://www.kinderzahnaerzte.de/grafik/bg_navi_e1_on.gif)}#navigation ul li a:hover{color:#000;background-color:#fff;abackground-image:url(http://www.kinderzahnaerzte.de/grafik/bg_navi_e1_hover.gif);background-repeat:repeat-x;background-position:bottom}

#navigation ul li ul{
	/*
	float:left;
	clear:both;
	*/
	width:13.5em;
	position:absolute; 
/*	position:relative; */
	margin:0;padding:0;
	border:0;
	display:block;
	lefxt:0;
	background:none;
	backxground-color:red}
	
#navigation ul ul li a{
float:left;
position:relative;
left:1px;top:0px;width:13.5em;padding:.35em 0 .35em 1.25em;maxrgin:0 0 .15em 0;height:100%;font-weight:normal;font-size:.735em;text-decoration:none;color:#464646;background-color:#f2f2f2;abackground-image:url(http://www.kinderzahnaerzte.de/grafik/bg_navi_e2_off.png);background-position:bottom;background-repeat:repeat-x;border-top:1px solid #fff;border-right:1px solid #dcdada;borxder-bottom:1px solid #adadad;border-left:1px solid #dcdada;disxplay:block;
/*
visibility:hidden; 
*/
}
#navigation li.e1 ul{

display:none;

text-align:left;

}

#navigation li.e1:hover ul {
	display:block;
}

#navigation li.e1a ul{display:none;text-align:left;posxition:relative}
#navigation li.e1a:hover ul{display:block}
#navigation ul li.e1a ul li a{abackground-image:url(http://www.kinderzahnaerzte.de/grafik/bg_navi_e2_off.png)}

#navigation ul li ul li a:hover{background:none;background-color:#dfdfdf}

#content form input,#content form textarea{margin:0 0 1em 0;border:1px solid #ececec;background-color:#ececec;color:#000;padding:.35em}#content form input:hover,#content form textarea:hover,#content form input:focus,#content form textarea:focus,#content form .formElement:focus,#content form .formElement:hover,#content form .formElement:active{background-color:#ececec;border:1px solid #c6c6c6}#button{margin:1em 0 0 0;background-color:#005ba9;border:0;color:#000}#bereich_fullwidth{float:left;position:relative;left:5.65em;width:55em;margin:1em 0 0 0;padding:0;bacxkground-color:red}#bereich_fullwidth p{floyat:left;font-size:.69em;font-weight:normal;line-height:1.75em;color:#666;margin:0 1.5em 0 0;padding:0 0 1em 0}#bereich_fullwidth p a{font-weight:normal;color:#005ca9;text-decoration:none}#bereich_fullwidth table{margin:0;padding:0;xfont-size:2em;margin-left:-.25em}#bereich_fullwidth h2{floyat:left;font-size:.8em;font-weight:bold;color:#005ca9;margin-bottom:0;padding-bottom:0}#bereich_fullwidth h2 a{font-size:1em;font-weight:bold;color:#005ca9;text-decoration:none}#bereich_fullwidth h3,#bereich_fullwidth h4,#bereich_fullwidth h5{float:left;font-size:.8em;font-weight:bold;color:#666}.box{width:17.66em;width:23.45em;height:16em;fxont-size:1em;padding:0;margin:0}#bereich_fullwidth a.box{float:left;margin:0;padding:1em;text-decoration:none;fonxt-size:1em;color:#666;display:block}a.box:hover{background-color:#ececec;text-decoration:none}p a.box{paddxing:1em;line-hxeight:1.75em;xfont-size:1em;color:#666;text-decoration:none}a.box h2,a.box hr{display:none}a.boxx img{border:0}#box1{}#box2{margin:0 0 0 .95em}#box3{margin:0 0 0 .95em}#suche_inhalt{}.endobox{margin:.5em 0 0 2.35em;padding:0;width:39.75em;width:35.75em;width:20.75em;float:left;bacxkground-color:#f2f2f2;mixn-height:154px;border:1px solid #ccc}.endobox h2 a{floxat:left;color:#d00000;font-size:.85em;color:#777;text-decoration:none;border-bottom:1px solid #f9cf00;margin:0;padding:0}#bereich_fullwidth .endobox div.daten,#bereich_fullwidth .endobox h2,.daten{margxin:0 0 0 .5em;paddxing:.5em 0 0em 0;margin:1em;padding:0;font-size:.69em}.endobox_plz{background-color:#f9cf00;width:6em;text-align:right;margin:.5em;padding:.5em;font-size:.69em;color:#777}.endobox div.daten a{color:#777;border-bottom:1px solid #f9cf00;text-decoration:none}#endoform_content{floxat:left;wixdth:6em;hexight:1.3em;heigyht:1.3em;padding:0;margin:0 0 0 2.35em}#endosuche_content input{padding:.35em 0 .35em .35em;margin:0;lixne-height:.35em;bxorder:0;font-size:.69em;colxor:#ccc}#suchfeld_endocontent{border:1px solid #999}#endocontent_submit{border:0;color:#fff;background:#f9cf00}#endosuche_content input:hover,#endxosuche input:focus{background-color:#f9cf00;maxrgin:0 0 0 2.35em;paxdding:0;color:#000}hr.hrcontent{display:block;float:left;margin:0 0 1em 0;padding:0;border:0;border-top:1px dotted #999;width:39.75em;height:0}body{background-color:#fefae7;padding:0;margin:20px 0 0 0;text-align:left;font-family:Arial,Verdana,Switzerland,Helvetica,sans-serif;font-size:100.01%}.unsichtbar{display:none}img a{border:0;border:none;border-bottom:0px}#kinderzahnaerzte{margin:0 auto 0 auto;text-align:center;width:57.375em;backgroxund-image:url(../grafik/background.jpg)}#bg{float:left;width:57.375em;background-image:url(http://www.kinderzahnaerzte.de/grafik/background.jpg.pagespeed.ce.zpO7B1Hkkm.jpg)}#metanavi{float:left;margin:0 0 .35em 0;padding:0;width:56.500em;text-align:left;backxground-color:green}#metanavi ul{margin:0 -.5em 0 0;padding:0;float:right;list-style-type:none;list-style-position:outside}#metanavi ul li{margin:0;padding:0;float:left;font-size:.6em}#metanavi ul li a{padding:0 1em 0 1em;font-weight:normal;text-transform:uppercase;text-decoration:none;color:#5a5a5a}#metanavi ul li a:hover{color:#aaa}#seitenkopf{float:left;width:56.5750em;text-align:left;margin:0;padding:0;backgrxound-color:#f9d100}#bundesverband_der_kinderzahnaerzte_logo{float:left;margin:0;padding:0}#bundesverband_der_kinderzahnaerzte_logo a img{widxth:.267em;heixght:.157em;border:0}#seitenkopfbild{z-index:0;float:left}#kopfbild{position:relative;z-index:0;float:left}#navigation{float:left;width:56.500em;height:1.7em;text-align:left;margin:0;padding:0;background-color:#f9cf00}#content{float:left;position:relative;width:56.500em;text-align:left}#content_links{posxition:relative;txop:4.75em;float:left;min-height:1em;width:15.3em;bxackground-color:green;txext-align:left}#content_links img{margin-top:2.5em}#content_mitte{float:left;width:41em}#content_rechts{float:right;margin:8em 0 0 0;width:2.300em}#content h1{font-size:.8em;font-weight:bold;color:#f9d100;margin:0;padding:0}#content h2{font-size:.8em;font-weight:bold;color:#f9d100;margin:0;padding:0;margin-bottom:0;padding-bottom:0}#content_links p{margin:1em 2em 0em 2em;font-size:.75em}ul#content_mitte,#content_mitte p ul,#content_mitte ul{margin:0 1.5em 1em 0;padding:0}#content_mitte ul li,#content_mitte p ul li{line-height:1.75em;font-size:.75em;lxist-style-type:square;margin:0em 3.1em 0em 4.5em;padding:0;color:#000;list-style-position:outside}#content_mitte ol li,#content_mitte p ol li{line-height:1.75em;font-size:.75em;lxist-style-type:square;margin:0em 3.1em 1em 2.5em;padding:0;color:#000;list-style-position:outside}#content_mitte h1{font-size:1.15em;margin:2em 2em 1.75em 2em;font-weight:bold;text-transform:uppercase;color:#f3c900}#content_mitte h2{font-size:1.15em;margin:1em 2em .75em 2em;font-weight:bold;text-transform:uppercase;color:#7e7e7e}#content_mitte h3{font-size:.75em;font-weight:bold;line-height:1.25em;color:#000;margin:2em 3.1em 0em 3.1em;padding:0 0 0 0}#content_mitte p{font-size:.75em;font-weight:normal;line-height:1.75em;color:#000;margin:0em 3.1em 0em 3.1em;padding:0 0 1em 0}#content_mitte table{margin:0em 3.1em 0em 2.1em}#content_mitte table tr td{font-size:.75em;font-weight:normal;line-height:1.25em;color:#000}#content_mitte table tr td p{font-size:1em;margin:0px;padding:0px}#content_mitte p a,#content_mitte ul li a,#content_mitte p ul li a,#content_mitte table tr td a,#content p a{color:#5a5a5a;font-weight:normal;text-decoration:underline;xborder-bottom:1px dotted #5a5a5a}#content_mitte p a:hover,#content_mitte ul li a:hover,#content_mitte p ul li a:hover,#content p a:hover{color:#000;boxrder-bottom:1px solid #f3c900}hr{display:none}form{padding:0;margin:0}p{padding:0;margin:0}#footer{float:left;position:relative;clear:both;margin:0;padding:0;width:57.375em;height:1.9em;text-align:right;background-image:url(/grafik/xfooter.jpg.pagespeed.ic.TOKxz5xr3C.jpg);background-repeat:no-repeat}#footer p{float:left;font-size:.65em;margin:4em 0 0 27em;color:#a4a5a5}#footer p a{color:#a4a5a5;text-decoration:none}#footer p a:hover{color:#005ca9;text-decoration:none}#kinderzahnarzt_suche{position:absolute;z-index:99;margin:0;padding:0;background-color:red}#kinderzahnarzt_suche form{position:relative;padding:0;margin:0;border:0}#kinderzahnarzt_suche input{padding:.35em .225em .35em 2em;margin:0;xposition:relative;width:11.2em;background:#fff url(/grafik/xlupe.gif.pagespeed.ic.PbtIRpEM3d.png) center 0 no-repeat;background-position:3px center;borxder:1px solid white;border:0;font-size:.69em;color:#ccc}#kinderzahnarzt_suche input:hover,#kinderzahnarzt_suche input:focus{background:#fff url(/grafik/xlupe2.gif.pagespeed.ic.WmoV9hlJp4.png) center 0 no-repeat;background-position:3px center;color:#666}hr{display:hidden}#content_links ul{margin:1em 0em 0em 0em;padding:0em;float:left;width:15.3em;list-style-type:disc;list-style-position:outside}#content_links ul li{float:left;display:block;width:15.3em;margin:0em;padding:0em}#content_links ul li a{font-size:.75em;margin:0em 0em 0em 0em;padding:0em;margin:0em;height:100%;margin:0em 0em 0em 0em;padding:.25em .5em .5em 1em;display:block;line-height:1.5em;text-decoration:none;color:#5a5a5a}#content_links ul li a:hover,#content_links ul li a:selected{color:#333}
CSS-Formatierungen v480.css
Code:
@media only screen and (max-width:480px){
	#kinderzahnaerzte,#metanavi,#bg,#seitenkopf,#navigation,#content,#content_links,#content_mitte,#footer,#content_links ul,#content_links ul li, #navigation ul, #bereich_fullwidth,.box,.endobox,hr.hrcontent,.jcrop-tracker{
	width:auto;
}

	#navigation > ul {
		position: absolute; left: 0em;
	}
	#navigation ul li.e1 > a, #navigation ul li.e1a > a{
		color: green;
	}	
	
	#navigation ul > li.e1:last-child > a {
	color:red;
	}	

#navigation li.e1:last-child > ul li a {	
	color:blue;
	
	}		

	#navigation li.e1:hover:last-child > ul li a {
	float:left;
	position:absolute;
	left: 0px; top: 0px;
	display:block;
	color:red;	
	}

	#kinderzahnaerzte{
	backgroxund-image:none
	}
	#bg{
		background-image:none
	}
	img#kopfbild, img#seitenkopf{
	display:none
	}
	
}
Mit Zitat antworten
Sponsored Links