zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden hover-Untermenüs beim Zeilenumbruch per CSS "mitnehmen"

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.07.2015, 14:59
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
  #2 (permalink)  
Alt 18.07.2015, 13:52
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.07.2015
Beiträge: 34
HappyPOny befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von HappyPOny Beitrag anzeigen
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.
Es lag daran, dass die für die Untermenüs im HTML-Code die Positionierung mit "position: relative; left: 15.3em;" festgeschrieben wurde.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS Mehrere div Objecte per hover bewegen adl-solutions CSS 7 29.09.2013 11:35
Ecken abrunden per css Zombiehunter CSS 2 15.12.2012 00:03
Multi-Level Navigation mit Grafiken koncrete CSS 3 02.08.2008 02:28
Problem mit Menü per CSS jippel CSS 1 31.07.2008 20:53
Textverschieben per CSS? Hesi CSS 2 29.05.2007 12:40


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:34 Uhr.