unternavi soll sichtbar bleiben @ tutorials.de: Tutorials, Forum & Hilfe

alkohler · 16.08.11 23:19

Hy habe folgendes problem, meine unternavi bleibt nicht sichtbar. kann mir jemand helfen, wie ich das mache, sitze schon ewig davor. wenn ich z.b. auf menschen klicke, dann bleibt navi und unter navi sichtbar, auch wenn ich den maus cursor unten links in die ecke stelle, aber wenn ich dann weiter klicke, z.b auf team, verschwindet meine navi sofort, wenn ich den maus zeiger nur ein wenig verschiebe. ich möchte aber, dass die navi immer aus geklappt bleibt, solange ich keinen neuen menüpunkt auswähle.
seht ihr den fehler im css******

gruß alex

Code :

//html
 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>navi ein faden</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="menu">
<ul id="nav">
 
<li><a class="nav_2" href="#" tabindex="1">agentur</a>
            <ul>
            <li><a href="#" tabindex="2">konzept</a></li>
            <li><a href="#" tabindex="2">philosophie</a></li>
            <li><a href="#" tabindex="2">anspruch</a></li>
            </ul>
            </li>
    
 
<li><a class="nav_2" href="#" tabindex="1">menschen</a>
        <ul>
            <li><a href="#" tabindex="2">geschichte</a></li>
            <li><a class="nav_2" href="#" tabindex="2">team</a>
                <ul>
                    <li><a href="#" tabindex="3">test1</a></li>
                    <li><a href="#" tabindex="3">test2</a></li>
                    <li><a href="#" tabindex="3">test3</a></li>
                </ul>
            </li>    
        </ul>
    </li>
    
      
<li><a class="nav_2" href="#" tabindex="1">leistungen</a>
        <ul>
            <li><a href="#">angebot</a></li>
            <li><a href="#">portfolio</a></li>
        </ul>
</li>
  
<li><a class="nav_2" href="#" tabindex="1">projekte</a>
        <ul>
            <li><a href="#" tabindex="2">erfahrungen</a></li>
            <li><a class="nav_2" href="#" tabindex="2">look & taste</a>
                <ul>
                    <li><a href="#" tabindex="3">test1</a></li>
                    <li><a href="#" tabindex="3">test2</a></li>
                    <li><a href="#" tabindex="3">test3</a></li>
                </ul>
            </li>    
        </ul>
    </li>
 
</ul>
</div>
 
</body>
</html>
 
 
/* CSS Document */
 
@charset "utf-8";
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;}
100% {zoom:1;}
}
 
 
.menu {width:700px; margin:0; padding:30px 20px 0 20px;;}
#nav {position:relative; font-size:12px; height:38px; z-index:100;}
#nav, #nav ul {padding:0; margin:0; list-style:none; width:700px; text-align:left;}
#nav ul {position:absolute; top:0; left:-9999px; height:0;
-webkit-transition: height 0.6s;
-moz-transition: height 0.6s;
-o-transition: height 0.6s;
transition: height 0.6s;}
#nav li {display:inline; height:38px;}
#nav li a {display:inline-block; height:38px; line-height:38px; padding:0 20px 0 10px; font-size:11px; color:#dedede; /*text-shadow: 1px -1px 1px #000;*/ text-decoration:none; font-weight:bold; outline:0; text-transform:lowercase;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;}
#nav ul li a {font-size:0;}
#nav li a.nav_2 {color:#dedede;}
#nav li ul li a.nav_2 {font-size:11px; color:#dedede;}
#nav li:hover > a {color:#f00;}
#nav li:hover > a.nav_2 {color:#f00;}
#nav li > a:active {color:#000;}
#nav li > a.nav_2:active {color:#000;}
#nav li > a:focus {color:#000; }
#nav li > a.nav_2:focus {color:#000; }
 
#nav li a:active + ul {top:20px; left:0;}
#nav li a:active + ul > li > a {font-size:11px;height:38px;}
#nav li a:focus + ul {top:20px; left:0;}
#nav li a:focus + ul > li > a {font-size:11px;height:38px;}
#nav li > ul:hover {top:20px; left:0;}
#nav li > ul:hover > li > a {font-size:11px;height:38px;}

spicelab · 17.08.11 05:43

Zitat von alkohler

ich möchte aber, dass die navi immer aus geklappt bleibt, solange ich keinen neuen menüpunkt auswähle. seht ihr den fehler im css******

Da wirst du auf ein JS-gestütztes Klappmenü umsatteln müssen, wie z.B. http://www.stunicholls.com/menu/click_brick.html, denn das Original http://www.cssplay.co.uk/menus/csspl...-dropline.html zeigt das gleiche Verhalten.

Übrigens solltest du das Copyright des Autors (Stu Nicholls) beachten, und es beim Veröffentlichen nicht aus dem Stylesheet entfernen!

Zitat von http://www.cssplay.co.uk/menus/cssplay-click-dropline.html

Code css:

/* ================================================================ 
This copyright notice must be untouched at all times.
 
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/cssplay-click-dropline.html
Copyright (c) 2005-2011 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Form1 soll Form2 Öffnen und sich selbst dann Schließen aber Form2 soll offen bleiben!

Folie soll stehen bleiben

Toogle soll geöffnet bleiben

bei rollOver sollen beide Bilder übereinander sichtbar bleiben

Eingabe soll stehen bleiben

E-Mail:

Abonnieren Abbestellen