Drop Down Menu

Status
Nicht offen für weitere Antworten.

Snewi133

Mitglied
Hallo

ich habe mich mal an einem Drop Down Menü rein in CSS versucht und es sieht im Firefox auch recht gut aus!
Wenn ihr euch die Seite aber nun im Explorer anschaut, ist es das reinste Chaos!
Was mache ich falsch könnt ihr mir helfen

Gruß

http://www.snewi.de
 
Ach das gibt es doch gar nicht so einfach die Lösung und ich habs net gesehen :-(
Danke trotzdem!

Findest du das dropdown ok oder gibt es da noch was besseres?

Gruß
 
Hi,

ein Blick in den Seiten-Quellcode offenbart doch alle Geheimnisse.

Code:
<div id="nav">
<ul class="level1">
	<li><a href"/">Home</a></li>

	<li class="submenu"><a href"/services/">Services</a>
		<ul class="level2">
			<li><a href"/services/strategy">Strategy</a></li>
			<li><a href"/services/optimize">Optimization</a></li>
			<li><a href"/services/guidance">Guidance</a></li>
			<li><a href"/services/training">Training</a></li>

		</ul>
	</li>
	<li><a href"/events/">Events</a></li>
	<li class="submenu"><a href"/pubs/">Publications</a>
		<ul class="level2">
			<li><a href"/pubs/articles">Articles</a></li>
			<li class="submenu"><a href"/pubs/tuts">Tutorials</a>

				<ul class="level3">
					<li><a href"/pubs/tuts/html">HTML</a></li>					
					<li><a href"/pubs/tuts/css">CSS</a>
					<li><a href"/pubs/tuts/svg">SVG</a>
					<li><a href"/pubs/tuts/xml">XML</a>
				</ul>
			</li>

			<li><a href"/pubs/wpapers/">White Papers</a></li>
			<li><a href"/pubs/comment/">Commentary</a></li>
		</ul>
	</li>
	<li><a href"/contact/">Contact</a></li>
</ul>
</div>

drop_down.css:
Code:
div#nav
{
	float: left;
	/*width:  7em;*/
	margin: -1px 0 0  7em /*-1px*/;
	background: #E2D4BA;
	border: 1px solid #AAA;
}

div#nav ul
{
	margin: 0;
	padding: 0;
	/*width: 7em;*/
	background: #fdf5e6;
	border: 1px solid #CCC;
	border-width: 0 1px;
}

div#nav li
{
	position: relative;
	list-style: none;
	margin: 0;
	/* Änderung */
	float: left;
	width: 7em;
	line-height: 1em;
	/* ---------- */
}

div#nav li:hover
{
	background: #EBB;
}

div#nav li.submenu
{
	background: url(submenu.gif) 95% 50% no-repeat ;
}

div#nav li.submenu:hover
{
	background-color: #EDD;
	background-image: url(submenu_unten.gif);
}

div#nav li a
{
	display: block;
	padding: 0.25em 0 0.25em 0.5em;
	text-decoration: none;
/*	width: 100%;
	voice-family: "\"}\"";
	voice-family: inherit;*/
	width: 6.5em;
}

div#nav>ul a
{
	width: auto;
}

div#nav ul ul
{
  	position: absolute;
  	/*top: 0;
	left: 7em;*/
	width: 7em;
	display: none;
}

div#nav ul ul li
{
	border-bottom: 1px solid #CCC;
}
div#nav li.submenu li.submenu
{
	background: url(submenu_unten.gif) 95% 50% no-repeat;
}

div#nav li.submenu li.submenu:hover
{
	background-color: #EDD;
	background: url(submenu.gif) 95% 50% no-repeat;
}

div#nav ul.level1 li.submenu:hover ul.level2
{
	display: block;
}

div#nav ul.level2 li.submenu:hover ul.level3
{
	display: block;
}

div#nav ul.level2
{
	top: 1.5em;
	left: -1px;
}

div#nav ul.level3
{
	top: -1px;
	left: 7em;
	border-top: 1px solid #CCC;
}
behavior.css:

Code:
body
{
	/*behavior: url(csshover.htc);*/
	behavior: url(csshover.htc);
}
Und für den IE <7 die "csshover.htc":

Code:
<attach event="ondocumentready" handler="parseStylesheets" />
<script>
/**
 *	Whatever:hover - V1.42.060206 - hover & active
 *	------------------------------------------------------------
 *	(c) 2005 - Peter Nederlof
 *	Peterned - http://www.xs4all.nl/~peterned/
 *	License  - http://creativecommons.org/licenses/LGPL/2.1/
 *
 *	Whatever:hover is free software; you can redistribute it and/or
 *	modify it under the terms of the GNU Lesser General Public
 *	License as published by the Free Software Foundation; either
 *	version 2.1 of the License, or (at your option) any later version.
 *
 *	Whatever:hover is distributed in the hope that it will be useful,
 *	but WITHOUT ANY WARRANTY; without even the implied warranty of
 *	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 *	Lesser General Public License for more details.
 *
 *	Credits and thanks to:
 *	Arnoud Berendsen, Martin Reurings, Robert Hanson
 *
 *	howto: body { behavior:url("csshover.htc"); }
 *	------------------------------------------------------------
 */

var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
	onhover:{on:'onmouseover', off:'onmouseout'},
	onactive:{on:'onmousedown', off:'onmouseup'}
}

function parseStylesheets() {
	if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
	window.attachEvent('onunload', unhookHoverEvents);
	var sheets = doc.styleSheets, l = sheets.length;
	for(var i=0; i<l; i++) 
		parseStylesheet(sheets[i]);
}
	function parseStylesheet(sheet) {
		if(sheet.imports) {
			try {
				var imports = sheet.imports, l = imports.length;
				for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
			} catch(securityException){}
		}

		try {
			var rules = (currentSheet = sheet).rules, l = rules.length;
			for(var j=0; j<l; j++) parseCSSRule(rules[j]);
		} catch(securityException){}
	}

	function parseCSSRule(rule) {
		var select = rule.selectorText, style = rule.style.cssText;
		if(!csshoverReg.test(select) || !style) return;

		var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
		var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
		var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
		var affected = select.replace(/:(hover|active).*$/, '');
		var elements = getElementsBySelect(affected);
		if(elements.length == 0) return;

		currentSheet.addRule(newSelect, style);
		for(var i=0; i<elements.length; i++)
			new HoverElement(elements[i], className, activators[pseudo]);
	}

function HoverElement(node, className, events) {
	if(!node.hovers) node.hovers = {};
	if(node.hovers[className]) return;
	node.hovers[className] = true;
	hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
	hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
	function hookHoverEvent(node, type, handler) {
		node.attachEvent(type, handler);
		hoverEvents[hoverEvents.length] = { 
			node:node, type:type, handler:handler 
		};
	}

	function unhookHoverEvents() {
		for(var e,i=0; i<hoverEvents.length; i++) {
			e = hoverEvents[i]; 
			e.node.detachEvent(e.type, e.handler);
		}
	}

function getElementsBySelect(rule) {
	var parts, nodes = [doc];
	parts = rule.split(' ');
	for(var i=0; i<parts.length; i++) {
		nodes = getSelectedNodes(parts[i], nodes);
	}	return nodes;
}
	function getSelectedNodes(select, elements) {
		var result, node, nodes = [];
		var identify = (/\#([a-z0-9_-]+)/i).exec(select);
		if(identify) {
			var element = doc.getElementById(identify[1]);
			return element? [element]:nodes;
		}
		
		var classname = (/\.([a-z0-9_-]+)/i).exec(select);
		var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
		var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
		for(var i=0; i<elements.length; i++) {
			result = tagName? elements[i].all.tags(tagName):elements[i].all; 
			for(var j=0; j<result.length; j++) {
				node = result[j];
				if(classReg && !classReg.test(node.className)) continue;
				nodes[nodes.length] = node;
			}
		}	
		
		return nodes;
	}
</script>
 
Status
Nicht offen für weitere Antworten.
Zurück