zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Multi Level Navigation

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.07.2008, 10:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.07.2006
Beiträge: 18
Carino befindet sich auf einem aufstrebenden Ast
Standard Multi Level Navigation

Hallo zusammen,

ich versuche gerade eine horizontale Navigation, die in IE 6, FF und IE7 funktioniert, auch gangbar zu machen, wenn ein Div darunter angeordnet ist.
Ich muss dem ul#navmenu-h Element für den FF eine Höhe von 500 geben, damit beim überfliegen die Untermenüpunkte nicht direkt verschwinden. Der IE6 schiebt den Inhalt darunter natürlich 500 Punkte tiefer. Habe versucht mich mit dem ZIndex zu behelfen, aber irgendwie hängt es irgendwo. Der FF macht übrigens keine Probleme. Nur IE6 und IE 7.

Hier mein Code. Vielleicht hat ja jemand eine Idee.
Ps ich würde auch eine fertige Lösung nehmen, probierte mich mit "Son of Suckerfish". Wichtig sind nur 4 Ebenen, die von der Menülänge sich dem Inhalt anpassen.

Grüße,
Carino

HTML:
Code:
<div id="topmenu">
<div class="inside">

<!-- indexer::stop -->
<div class="mod_navigation block">

<a href="index.php/products.html#skipNavigation_1" class="invisible" title="Skip navigation"></a>
<!--[if gte IE 5.5]>
<script language="JavaScript" src="tl_files/layout/js/nav-h.js" type="text/JavaScript"></script>
<![endif]-->
<ul id="navmenu-h" class="level_1">
<li class="submenu first"><a href="index.php/leak-detectors-for-tanks.html" title="leak detectors for tanks" class="submenu first" onclick="this.blur();">leak detectors for tanks</a><!--[if gte IE 5.5]>
<script language="JavaScript" src="tl_files/layout/js/nav-h.js" type="text/JavaScript"></script>
<![endif]-->

<ul id="navmenu-h" class="level_2">
<li class="submenu first"><a href="index.php/overpressure.html" title="overpressure" class="submenu first" onclick="this.blur();">overpressure</a><!--[if gte IE 5.5]>
<script language="JavaScript" src="tl_files/layout/js/nav-h.js" type="text/JavaScript"></script>
<![endif]-->
<ul id="navmenu-h" class="level_3">
<li class="submenu first"><a href="index.php/leak-detectors.25.html" title="leak detectors" class="submenu first" onclick="this.blur();">leak detectors</a><!--[if gte IE 5.5]>
<script language="JavaScript" src="tl_files/layout/js/nav-h.js" type="text/JavaScript"></script>
<![endif]-->
<ul id="navmenu-h" class="level_4">
<li class="first"><a href="index.php/dl-330.html" title="DL 330" class="first" onclick="this.blur();">DL 330</a></li>
<li><a href="index.php/dl-330-fc.html" title="DL 330 FC" onclick="this.blur();">DL 330 FC</a></li>
<li><a href="index.php/dl-elc-fc.html" title="DL ELC FC" onclick="this.blur();">DL ELC FC</a></li>
<li><a href="index.php/dl-450.html" title="DL 450" onclick="this.blur();">DL 450</a></li>
<li><a href="index.php/dl-pm.html" title="DL .. PM" onclick="this.blur();">DL .. PM</a></li>

<li><a href="index.php/dlg-450.html" title="DLG 450" onclick="this.blur();">DLG 450</a></li>
<li><a href="index.php/dlg-pm.html" title="DLG .. PM" onclick="this.blur();">DLG .. PM</a></li>
<li class="last"><a href="index.php/dl-4000.html" title="DL-4000" class="last" onclick="this.blur();">DL-4000</a></li>
</ul>
</li>
<li><a href="index.php/construction.html" title="construction" onclick="this.blur();">construction</a></li>
<li><a href="index.php/function.html" title="function" onclick="this.blur();">function</a></li>
<li class="submenu last"><a href="index.php/examples.html" title="examples" class="submenu last" onclick="this.blur();">examples</a><!--[if gte IE 5.5]>
<script language="JavaScript" src="tl_files/layout/js/nav-h.js" type="text/JavaScript"></script>
<![endif]-->
<ul id="navmenu-h" class="level_4">
<li class="first"><a href="index.php/underground-petrol-tank.html" title="Underground petrol tank" class="first" onclick="this.blur();">Underground petrol tank</a></li>

<li><a href="index.php/aboveground-tank.html" title="Aboveground tank" onclick="this.blur();">Aboveground tank</a></li>
<li><a href="index.php/underground-grpfrp-tanks-for-petrol.html" title="Underground GRP/FRP tanks for petrol" onclick="this.blur();">Underground GRP/FRP tanks for petrol</a></li>
<li><a href="index.php/plastic-tanks-for-chemicals.html" title="Plastic tanks for chemicals" onclick="this.blur();">Plastic tanks for chemicals</a></li>
<li class="last"><a href="index.php/petrol-station-with-dl-330-fc-dlr-p-11.html" title="Petrol Station with DL 330 FC + DLR-P 1.1" class="last" onclick="this.blur();">Petrol Station with DL 330 FC + DLR-P 1.1</a></li>
</ul>
</li>
</ul>
</li>
<li class="submenu last"><a href="index.php/underpressure.html" title="underpressure" class="submenu last" onclick="this.blur();">underpressure</a><!--[if gte IE 5.5]>
<script language="JavaScript" src="tl_files/layout/js/nav-h.js" type="text/JavaScript"></script>
<![endif]-->
<ul id="navmenu-h" class="level_3">
<li class="submenu first"><a href="index.php/leak-detectors.29.html" title="leak detectors" class="submenu first" onclick="this.blur();">leak detectors</a><!--[if gte IE 5.5]>
<script language="JavaScript" src="tl_files/layout/js/nav-h.js" type="text/JavaScript"></script>
<![endif]-->

<ul id="navmenu-h" class="level_4">
<li class="first"><a href="index.php/vl-34.html" title="VL 34" class="first" onclick="this.blur();">VL 34</a></li>
<li><a href="index.php/vl-330.html" title="VL 330" onclick="this.blur();">VL 330</a></li>
<li><a href="index.php/vle-sensor.html" title="VL../E + Sensor" onclick="this.blur();">VL../E + Sensor</a></li>
<li><a href="index.php/vl-320-420.html" title="VL 320-420" onclick="this.blur();">VL 320-420</a></li>
<li><a href="index.php/vl-255-pm.html" title="VL 255 PM" onclick="this.blur();">VL 255 PM</a></li>
<li><a href="index.php/vl-255e-pm.html" title="VL 255/E PM" onclick="this.blur();">VL 255/E PM</a></li>
<li><a href="index.php/vl-570e-pm.html" title="VL 570/E PM" onclick="this.blur();">VL 570/E PM</a></li>
<li><a href="index.php/vl-n2.html" title="VL-N2" onclick="this.blur();">VL-N2</a></li>

<li><a href="index.php/vl-h2.html" title="VL-H2" onclick="this.blur();">VL-H2</a></li>
<li><a href="index.php/vlx.html" title="VLX.." onclick="this.blur();">VLX..</a></li>
<li><a href="index.php/vlxa-ex.html" title="VLX../A-Ex" onclick="this.blur();">VLX../A-Ex</a></li>
<li><a href="index.php/vlxex.html" title="VLX../Ex" onclick="this.blur();">VLX../Ex</a></li>
<li><a href="index.php/vlx-350-saex.html" title="VLX 350 SA/Ex" onclick="this.blur();">VLX 350 SA/Ex</a></li>
<li class="last"><a href="index.php/old-systems.html" title="Old systems" class="last" onclick="this.blur();">Old systems</a></li>
</ul>
</li>
<li><a href="index.php/construction.30.html" title="construction" onclick="this.blur();">construction</a></li>
<li><a href="index.php/function.31.html" title="function" onclick="this.blur();">function</a></li>

<li class="submenu last"><a href="index.php/examples.32.html" title="examples" class="submenu last" onclick="this.blur();">examples</a><!--[if gte IE 5.5]>
<script language="JavaScript" src="tl_files/layout/js/nav-h.js" type="text/JavaScript"></script>
<![endif]-->
<ul id="navmenu-h" class="level_4">
<li class="first"><a href="index.php/tank-with-lining-for-diesel-or-heating-oil.html" title="Tank with lining for diesel or heating oil" class="first" onclick="this.blur();">Tank with lining for diesel or heating oil</a></li>
<li><a href="index.php/cylindrical-tank-for-diesel-or-heating-oil.html" title="Cylindrical tank for diesel or heating oil" onclick="this.blur();">Cylindrical tank for diesel or heating oil</a></li>
<li><a href="index.php/flat-bottom-tank-for-diesel-or-heating-oil.html" title="Flat bottom tank for diesel or heating oil" onclick="this.blur();">Flat bottom tank for diesel or heating oil</a></li>
<li><a href="index.php/flat-bottom-tank-for-petrol-vlx-330ex.html" title="Flat bottom tank for petrol + VLX 330/Ex" onclick="this.blur();">Flat bottom tank for petrol + VLX 330/Ex</a></li>
<li><a href="index.php/flat-bottom-tank-for-petrol-vlx-330a-ex.html" title="Flat bottom tank for petrol + VLX 330/A-Ex" onclick="this.blur();">Flat bottom tank for petrol + VLX 330/A-Ex</a></li>
<li class="last"><a href="index.php/upright-standing-tank-with-vlx-350sa-ex.html" title="Upright standing tank with  VLX 350/SA-Ex" class="last" onclick="this.blur();">Upright standing tank with  VLX 350/SA-Ex</a></li>
</ul>
</li>

</ul>
</li>
</ul>
</li>
<li class="submenu"><a href="index.php/leak-detectors-for-pipes-and-hoses.html" title="leak detectors for pipes and hoses" class="submenu" onclick="this.blur();">leak detectors for pipes and hoses</a><!--[if gte IE 5.5]>
<script language="JavaScript" src="tl_files/layout/js/nav-h.js" type="text/JavaScript"></script>
<![endif]-->
<ul id="navmenu-h" class="level_2">
<li class="submenu first"><a href="index.php/overpressure.23.html" title="overpressure" class="submenu first" onclick="this.blur();">overpressure</a><!--[if gte IE 5.5]>
<script language="JavaScript" src="tl_files/layout/js/nav-h.js" type="text/JavaScript"></script>
<![endif]-->
<ul id="navmenu-h" class="level_3">
<li class="submenu first"><a href="index.php/leak-detectors.68.html" title="leak detectors" class="submenu first" onclick="this.blur();">leak detectors</a><!--[if gte IE 5.5]>
<script language="JavaScript" src="tl_files/layout/js/nav-h.js" type="text/JavaScript"></script>
<![endif]-->
<ul id="navmenu-h" class="level_4">
<li class="first"><a href="index.php/dlr-g.html" title="DLR-G" class="first" onclick="this.blur();">DLR-G</a></li>
<li><a href="index.php/dlr-p.html" title="DLR-P" onclick="this.blur();">DLR-P</a></li>

<li><a href="index.php/dlr-gs.html" title="DLR-GS" onclick="this.blur();">DLR-GS</a></li>
<li class="last"><a href="index.php/old-systems.77.html" title="Old Systems" class="last" onclick="this.blur();">Old Systems</a></li>
</ul>
</li>
<li><a href="index.php/construction.69.html" title="construction" onclick="this.blur();">construction</a></li>
<li><a href="index.php/function.70.html" title="function" onclick="this.blur();">function</a></li>
<li class="submenu last"><a href="index.php/examples.71.html" title="examples" class="submenu last" onclick="this.blur();">examples</a><!--[if gte IE 5.5]>
<script language="JavaScript" src="tl_files/layout/js/nav-h.js" type="text/JavaScript"></script>
<![endif]-->
<ul id="navmenu-h" class="level_4">
<li class="first last"><a href="index.php/pipes-on-petrol-station.html" title="Pipes on petrol station" class="first last" onclick="this.blur();">Pipes on petrol station</a></li>
</ul>
</li>

</ul>
</li>
<li class="submenu last"><a href="index.php/underpressure.24.html" title="underpressure" class="submenu last" onclick="this.blur();">underpressure</a><!--[if gte IE 5.5]>
<script language="JavaScript" src="tl_files/layout/js/nav-h.js" type="text/JavaScript"></script>
<![endif]-->
<ul id="navmenu-h" class="level_3">
<li class="submenu first"><a href="index.php/leak-detectors.78.html" title="leak detectors" class="submenu first" onclick="this.blur();">leak detectors</a><!--[if gte IE 5.5]>
<script language="JavaScript" src="tl_files/layout/js/nav-h.js" type="text/JavaScript"></script>
<![endif]-->
<ul id="navmenu-h" class="level_4">
<li class="first"><a href="index.php/vlr-410e.html" title="VLR 410/E" class="first" onclick="this.blur();">VLR 410/E</a></li>
<li><a href="index.php/vlx-330.html" title="VLX 330" onclick="this.blur();">VLX 330</a></li>
<li><a href="index.php/vlx-330a-ex.html" title="VLX 330/A-Ex" onclick="this.blur();">VLX 330/A-Ex</a></li>
<li><a href="index.php/vlx-330ex.html" title="VLX 330/Ex" onclick="this.blur();">VLX 330/Ex</a></li>
<li><a href="index.php/vlx-350sa-ex.html" title="VLX 350/SA-Ex" onclick="this.blur();">VLX 350/SA-Ex</a></li>

<li class="last"><a href="index.php/old-systems.87.html" title="Old Systems" class="last" onclick="this.blur();">Old Systems</a></li>
</ul>
</li>
<li><a href="index.php/construction.79.html" title="construction" onclick="this.blur();">construction</a></li>
<li><a href="index.php/function.80.html" title="function" onclick="this.blur();">function</a></li>
<li class="submenu last"><a href="index.php/examples.81.html" title="examples" class="submenu last" onclick="this.blur();">examples</a><!--[if gte IE 5.5]>
<script language="JavaScript" src="tl_files/layout/js/nav-h.js" type="text/JavaScript"></script>
<![endif]-->
<ul id="navmenu-h" class="level_4">
<li class="first"><a href="index.php/diesel-or-heating-oil-pipes-with-vlr-410e.html" title="Diesel or heating oil pipes with VLR 410/E" class="first" onclick="this.blur();">Diesel or heating oil pipes with VLR 410/E</a></li>
<li><a href="index.php/fill--or-suction-pipes-with-vlx-330.html" title="Fill- or Suction pipes with VLX 330" onclick="this.blur();">Fill- or Suction pipes with VLX 330</a></li>
<li><a href="index.php/pressurerised-pipes-with-vlx-330a-ex.html" title="Pressurerised  pipes with VLX 330/A-Ex" onclick="this.blur();">Pressurerised  pipes with VLX 330/A-Ex</a></li>

<li class="last"><a href="index.php/petrolstation-with-vlx-330a-ex.html" title="Petrolstation with VLX 330/A-Ex" class="last" onclick="this.blur();">Petrolstation with VLX 330/A-Ex</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="index.php/leakage-sensors.html" title="leakage sensors" onclick="this.blur();">leakage sensors</a></li>
<li class="submenu"><a href="index.php/accessories.html" title="accessories" class="submenu" onclick="this.blur();">accessories</a><!--[if gte IE 5.5]>
<script language="JavaScript" src="tl_files/layout/js/nav-h.js" type="text/JavaScript"></script>
<![endif]-->
<ul id="navmenu-h" class="level_2">
<li class="first"><a href="index.php/accessories-pdf.html" title="accessories pdf" class="first" onclick="this.blur();">accessories pdf</a></li>
<li><a href="index.php/installation-kits-pdf.html" title="installation kits pdf" onclick="this.blur();">installation kits pdf</a></li>

<li class="submenu"><a href="index.php/maintenance-service.html" title="maintenance / service" class="submenu" onclick="this.blur();">maintenance / service</a><!--[if gte IE 5.5]>
<script language="JavaScript" src="tl_files/layout/js/nav-h.js" type="text/JavaScript"></script>
<![endif]-->
<ul id="navmenu-h" class="level_3">
<li class="first"><a href="index.php/testing-devices.html" title="testing devices" class="first" onclick="this.blur();">testing devices</a></li>
<li class="last"><a href="index.php/measuring-devices.html" title="measuring devices" class="last" onclick="this.blur();">measuring devices</a></li>
</ul>
</li>
<li class="submenu last"><a href="index.php/miscellaneous.html" title="miscellaneous" class="submenu last" onclick="this.blur();">miscellaneous</a><!--[if gte IE 5.5]>
<script language="JavaScript" src="tl_files/layout/js/nav-h.js" type="text/JavaScript"></script>
<![endif]-->
<ul id="navmenu-h" class="level_3">
<li class="first last"><a href="index.php/tank-gauge.html" title="tank gauge" class="first last" onclick="this.blur();">tank gauge</a></li>
</ul>
</li>
</ul>

</li>
<li class="last"><a href="index.php/information.html" title="information" class="last" onclick="this.blur();">information</a></li>
</ul>
 
<a id="skipNavigation_1" class="invisible" title="Skip navigation"></a>

</div>
CSS:
Code:
ul#navmenu-h {

  margin: 0;
  border: 0 none;
  padding: 0;
  padding-top: 10px;
  width: 650px; /*For KHTML*/
  list-style: none;
  height: 500px ! important;
  height: 0px;
  z-index: 2;
}

ul#navmenu-h li {
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left; /*For Gecko*/
  display: inline;
  list-style: none;
  position: relative;
  height: 24px;
}

ul#navmenu-h ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px;
  list-style: none;
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
}

ul#navmenu-h ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#navmenu-h ul li {
  width: 160px;
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}

/* Root Menu */
ul#navmenu-h p, ul#navmenu-h a {
  border: 1px solid #FFF;
  border-right-color: #CCC;
  border-bottom-color: #DDD;
  padding: 0 6px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;

  color: #666;
  font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}
ul#navmenu-h p {margin: 0; padding: 0 6px; color: #5DC3F4;}

ul ul#navmenu-h a{
  border-bottom-color: #DDD;
  }
  
/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,
ul#navmenu-h li:hover a,
ul#navmenu-h li.iehover a {

  color: #000;
}

/* 2nd Menu */
ul#navmenu-h li:hover li a,
ul#navmenu-h li.iehover li a {
  float: none;
  background: #EEE;
  color: #666;
}

/* 2nd Menu Hover Persistence */
ul#navmenu-h li:hover li a:hover,
ul#navmenu-h li:hover li:hover a,
ul#navmenu-h li.iehover li a:hover,
ul#navmenu-h li.iehover li.iehover a {
  background: #CCC;
  color: #FFF;
}

/* 3rd Menu */
ul#navmenu-h li:hover li:hover li a,
ul#navmenu-h li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
  
}

/* 3rd Menu Hover Persistence */
ul#navmenu-h li:hover li:hover li a:hover,
ul#navmenu-h li:hover li:hover li:hover a,
ul#navmenu-h li.iehover li.iehover li a:hover,
ul#navmenu-h li.iehover li.iehover li.iehover a {
  background: #CCC;
  color: #FFF;
}

/* 4th Menu */
ul#navmenu-h li:hover li:hover li:hover li a,
ul#navmenu-h li.iehover li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 4th Menu Hover */
ul#navmenu-h li:hover li:hover li:hover li a:hover,
ul#navmenu-h li.iehover li.iehover li.iehover li a:hover {
  background: #CCC;
  color: #FFF;
}

ul#navmenu-h ul ul,
ul#navmenu-h ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu-h li:hover ul ul,
ul#navmenu-h li:hover ul ul ul,
ul#navmenu-h li.iehover ul ul,
ul#navmenu-h li.iehover ul ul ul {
  display: none;
}

ul#navmenu-h li:hover ul,
ul#navmenu-h ul li:hover ul,
ul#navmenu-h ul ul li:hover ul,
ul#navmenu-h li.iehover ul,
ul#navmenu-h ul li.iehover ul,
ul#navmenu-h ul ul li.iehover ul {
  display: block;
}
JS:
Code:
navHover = function() {
	var lis = document.getElementById("navmenu-h").getElementsByTagName("LI");
	for (var i=0; i<lis.length; i++) {
		lis[i].onmouseover=function() {
			this.className+=" iehover";
		}
		lis[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" iehover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", navHover);
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
Problem mit Navigation safari CSS 12 20.04.2011 11:11
Hilfe bei CSS Navigation trimalchio CSS 7 10.01.2011 13:13
Float-Problem? mischaef CSS 33 20.10.2010 16:20
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 15:29
Container mit 2 Container darin -> Hintergrund anzeigen bendar CSS 4 05.04.2005 18:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:41 Uhr.