mouseover soll aktiv bleiben

jhaustein · 9. Februar 2009

hallo gemeinschaft

habe ein horizontales menü in der art

home___unternehmen_leistung_aktuelles

wenn ich auf leistung mit der mouse gehe, dann geht darunter ein submenü auf _ kunden und lieferanten - wenn ich mit der mouse über kunden gehe, dann geht dort dann nach rechts luft und auto auf - dumm ist nur, dass dann die bisherigen mouseover also zuerst leistung und dann kunden nicht mehr aktiv sind - wie kann ich da ändern

html code:

HTML:

<div > 
  <ul id="navigation" class="dropdown dropdown-horizontal">
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','bilder/home_aktiv.jpg',1)"><img src="bilder/home_inaktiv.jpg" name="Image4" width="108" height="27" border="0"></a></li>
    <li class="dir"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','bilder/leistungen_aktiv.jpg',1)"><img src="bilder/leistungen_inaktiv.jpg" name="Image2" width="108" height="27" border="0"></a> 
      <ul>
        <li class="dir"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','bilder/kunden_aktiv.jpg',1)"><img src="bilder/kunden_inaktiv.jpg" name="Image5" width="170" height="20" border="0"></a> 
          <ul>
            <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','bilder/luftfahrtindustrie_aktiv.jpg',1)"><img src="bilder/luftfahrtindustrie_inaktiv.jpg" name="Image6" width="170" height="20" border="0"></a> 
            <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','bilder/automobilindustrie_aktiv.jpg',1)"><img src="bilder/automobilindustrie_inaktiv.jpg" name="Image7" width="170" height="20" border="0"></a></li>
          </ul>
        </li>
        <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','bilder/lieferanten_aktiv.jpg',1)"><img src="bilder/lieferanten_inaktiv.jpg" name="Image8" width="170" height="20" border="0"></a></li>
      </ul>
    </li>
    <li class="dir"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','bilder/unternehmen_aktiv.jpg',1)"><img src="bilder/unternehmen_inaktiv.jpg" name="Image9" width="108" height="27" border="0"></a> 
      <ul>
        <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','bilder/unternehmensbereich_aktiv.jpg',1)"><img src="bilder/unternehmensbereich_inaktiv.jpg" name="Image10" width="190" height="20" border="0"></a></li>
        <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','bilder/team_aktiv.jpg',1)"><img src="bilder/team_inaktiv.jpg" name="Image11" width="190" height="20" border="0"></a></li>
      </ul>
    </li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','bilder/aktuelles_aktiv.jpg',1)"><img src="bilder/aktuelles_inaktiv.jpg" name="Image12" width="108" height="27" border="0"></a></li>
    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','bilder/kontakt_aktiv.jpg',1)"><img src="bilder/kontakt_inaktiv.jpg" name="Image13" width="108" height="27" border="0"></a></li>
  </ul>
	</li>


</div>

css:

CSS:

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0; font-family:Verdana;font-size:12px;
}

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left; font-family:Verdana;font-size:12px;
}

ul.dropdown li {
 float: left;
 line-height: 1.3em;
 vertical-align: middle;
 zoom: 1; font-family:Verdana;font-size:12px;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default; font-family:Verdana;font-size:12px;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%; font-family:Verdana;font-size:12px;
}

ul.dropdown ul li {
 float: none; font-family:Verdana;font-size:12px;
}

helper.css
ul.dropdown {
}

	ul.dropdown li {
	 border-style: solid;
	 border-width: 0px 0px 0px 0px;
	border-color:#ffffff;
	 
	}

	ul.dropdown li.hover,
	ul.dropdown li:hover {
	 color: #000;
	}

	ul.dropdown a:link,


	/* -- level mark -- */

	ul.dropdown ul {
	 width: 120px;
	 margin-top: px;
	}

		ul.dropdown ul li {
		 font-weight: normal;
		}



/*-------------------------------------------------/
 * @section		Support Class `dir`
 * @level sep	ul, .class
 */


ul.dropdown *.dir {
 background-position: 100% 50%;
 background-repeat: no-repeat;
}


/* -- Components override -- */

ul.dropdown-horizontal ul *.dir {
 padding-right: 15px;
 background-position: 100% 50%;
 background-repeat: no-repeat;
}

ul.dropdown-upward *.dir {
}

ul.dropdown-vertical *.dir,
ul.dropdown-upward ul *.dir {
}

ul.dropdown-vertical-rtl *.dir {
 padding-right: 10px;
 padding-left: 15px;
 background-position: 0 50%;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%; font-family:Verdana;font-size:12px;
}

ul.dropdown li:hover > ul {
 visibility: visible;
 font-family:Verdana;font-size:12px;
}

Maik · 10. Februar 2009

Hi,

mit dem onmouseout-Eventhandler in den Links, und darin der MM_swapImgRestore()-Funktion ist es auch kein Wunder, dass der mouseover-Effekt umgehend verschwindet, sobald die Maus zur tieferen Menüebene wandert, und den oberen Menüpunkt verlässt, denn dann feuert dieser Event, und setzt das "Hover"-Bild wieder zurück.

Grundsätzlich würden im Stylesheet die Selektoren hierfür so lauten:

CSS:

ul.dropdown li:hover a { /* 1. Menüebene */ } 
ul.dropdown li:hover ul li:hover a { /* 2. Menüebene */  }  
ul.dropdown li:hover ul li:hover ul li:hover a { /* 3. Menüebene */ }

und für den IE (<7), der die :hover-Pseudoklasse nur auf das a-Element anwendet:

CSS:

ul.dropdown li a:hover { /* 1. Menüebene */ }  
ul.dropdown li a:hover ul li a:hover { /* 2. Menüebene */ }  
ul.dropdown li a:hover ul li a:hover ul li a:hover { /* 3. Menüebene */ }

Siehe als Beispiel auch http://www.cssplay.co.uk/menus/dd_valid.html.

Folglich wirst du die bestehende Menüstruktur auflösen, dich darin von den <img>-Tags und dem Bildertausch via Javascript verabschieden, und stattdessen die Bilder als Hintergrund für die einzelnen Links definieren müssen, um dann nach obigem Schema den mouseover-Effekt zu steuern.

Wie sich ein Bildertausch mit CSS umsetzen lässt, kannst du in meinem CSS-Tutorial CSS-Rollover nachlesen.

Und beachte bitte unsere Netiquette (Nr.15) bzgl. deiner durchgehenden Kleinschreibung - vielen Dank!

mfg Maik

jhaustein · 10. Februar 2009

hi vielen dank

habe mich jetzt für die variante entschieden ohne bilder

HTML:

@charset "UTF-8";

/** 
 * Default CSS Drop-Down Menu Theme
 *
 * @file		default.css
 * @name		Default
 * @version		0.1
 * @type		transitional
 * @browsers	Windows: IE5+, Opera7+, Firefox1+
 *				Mac OS: Safari2+, Firefox2+
 *
 * @link		http://www.lwis.net/
 * @copyright	2008 Live Web Institute. All Rights Reserved.
 *
 * Module Classes: *.dir {} *.on {} *.open {} li.hover {} li.first {} li.last {}
 * Expected directory tag - li
 *
 */

@import "helper.css";


/*-------------------------------------------------/
 * @section		Base Drop-Down Styling
 * @structure	ul (unordered list)
 *				ul li (list item)
 *				ul li a (links)
 *				/*\.class|(li|a):hover/
 * @level sep	ul
 */


ul.dropdown {
}

	ul.dropdown li {
	 padding: 7px 10px;
	 border-style: solid;
	 border-width: 0px 0px 1px 0;
	 border-color: #fff #d9d9d9 #d9d9d9;
	 background-color: #f6f6f6;
	 color: #000;
	 
	}

	ul.dropdown li.hover,
	ul.dropdown li:hover {
	 background-color: #eee;
	 color: #000;
	}

	ul.dropdown a:link,
	ul.dropdown a:visited	{ color: #000; text-decoration: none; }
	ul.dropdown a:hover		{ color: #000; }
	ul.dropdown a:active	{ color: #ffa500; }


	/* -- level mark -- */

	ul.dropdown ul {
	 width: 160px;
	 margin-top: 1px;
	}

		ul.dropdown ul li {
		 font-weight: normal;
		}



/*-------------------------------------------------/
 * @section		Support Class `dir`
 * @level sep	ul, .class
 */


ul.dropdown *.dir {
 padding-right: 20px;
 background-position: 100% 50%;
 background-repeat: no-repeat;
}


/* -- Components override -- */

ul.dropdown-horizontal ul *.dir {
 padding-right: 15px;
 background-position: 100% 50%;
 background-repeat: no-repeat;
}

ul.dropdown-upward *.dir {
}

ul.dropdown-vertical *.dir,
ul.dropdown-upward ul *.dir {
}

ul.dropdown-vertical-rtl *.dir {
 padding-right: 10px;
 padding-left: 15px;
 background-position: 0 50%;
}

HTML:

  <ul id="navigation" class="dropdown dropdown-horizontal">
    <li><a href="./">Home</a></li>
    <li class="dir">Leistungen 
      <ul>
        <li class="dir"><a href="./">Kunden</a> 
          <ul>
            <li><a href="./">Luftfahrtindustrie</a> 
            <li><a href="./">Automobilindustrie</a></li>
          </ul>
        </li>
        <li><a href="./">Lieferanten</a></li>
      </ul>
    </li>
    <li class="dir">Unternehmen 
      <ul>
        <li><a href="./">Unternehmensbereich</a></li>
        <li><a href="./">Team</a></li>
      </ul>
    </li>
    <li><a href="./">Aktuelles</a></li>
    <li><a href="./">Kontakt</a></li>
  </ul>
	</li>


</div>

wie bekomme ich es hin, dass die breite der hauptmenüpunkte etwas grösser wird

also width = 82px
wenn ich das so mache, dann sieht es so bei mir aus

Maik · 10. Februar 2009

Wo hast du denn diese Breite deklariert?

Aus der Hüfte heraus:

CSS:

ul.dropdown li a {
float:left;
width:82px;
}

Und nochmal die Bitte an dich, in deinen Beiträgen auf die erwünschte Groß- und Kleinschreibung zu achten.

mfg Maik

jhaustein · 10. Februar 2009

Hallo - mache ich ab jetzt -

nun sieht das so aus - wäre toll, wenn Du da nochmal schauen könntest

Maik · 10. Februar 2009

Fehlt da nicht irgendwas an CSS-Code, denn u.a. kann ich die horizontale Ausrichtung des Hauptmenüs mit deinem letzten Codesnippet überhaupt nicht reproduzieren.

mfg Maik

jhaustein · 10. Februar 2009

schau bitte mal,

das ist die Dropdown.css

HTML:

@charset "UTF-8";

/**
 * Horizontal CSS Drop-Down Menu Module
 *
 * @file		dropdown.css
 * @package		Dropdown
 * @version		0.7.1
 * @type		Transitional
 * @stacks		597-599
 * @browsers	Windows: IE6+, Opera7+, Firefox1+
 *				Mac OS: Safari2+, Firefox2+
 *
 * @link		http://www.lwis.net/
 * @copyright	2006-2008 Live Web Institute. All Rights Reserved.
 *
 */

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0; font-family:Verdana;font-size:12px;
}

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left; font-family:Verdana;font-size:12px;
}

ul.dropdown li a {
float:left;
width:82px;
height:15px;
}

ul.dropdown li {
 float: left;
 line-height: 1.3em;
 vertical-align: middle;
 zoom: 1; font-family:Verdana;font-size:12px;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default; font-family:Verdana;font-size:12px;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%; font-family:Verdana;font-size:12px;
}

ul.dropdown ul li {
 float: none; font-family:Verdana;font-size:12px;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%; font-family:Verdana;font-size:12px;
}

ul.dropdown li:hover > ul {
 visibility: visible;
 font-family:Verdana;font-size:12px;
}

das ist die helper.css

HTML:

* {
 margin: 0;
 padding: 0;
}



p { margin-bottom: 1em; }

ul.classic {
 list-style: disc;
 margin-bottom: 1em;
 padding-left: 2em;
}

h1,h2,h3 {
 margin-bottom: .5em;
 font-family: Arial, Helvetica, sans-serif;
 line-height: normal;
}

h1 {
 border-bottom: solid 1px #d9d9d9;
 font-weight: normal;
 font-size: 180%;
 text-indent: 5px;
 letter-spacing: -1px;
}

.dropdown-upward {
 margin-top: 400px !important;
}

Maik · 10. Februar 2009

Vielleicht solltest du dir besser mal http://www.htmldog.com/articles/suckerfish/dropdowns/example/ anschauen, was die Positionierung / Ausrichtung der Submenüs betrifft - ansonsten paßt doch die Breite der Links.

mfg Maik

jhaustein · 10. Februar 2009

Hi Maik

Breite passt - aber die Höhe nicht (siehe Bild)

Maik · 10. Februar 2009

Wenn du mit "Höhe" die verschobene Startposition der Submenüs meinst:

CSS:

ul.dropdown ul li a { float: none; }

mfg Maik

mouseover soll aktiv bleiben

jhaustein

Grünschnabel

Maik

jhaustein

Grünschnabel

Anhänge

Maik

jhaustein

Grünschnabel

Anhänge

Maik

jhaustein

Grünschnabel

Maik

jhaustein

Grünschnabel

Maik

Neue Beiträge