✔ Horizontale Navigation mit 3 Ebenen - wird unterbrochen

semifisherman · 1. Oktober 2012

Weiss jemand woran es liegt, dass die zweite Ebene die erste unterbricht. wird durch das Untermenü unterbrochen... scheint irgend wo ein eine Hacken zu sein.

Schon jetzt 1000-end Dank für Eure Hilfe !!

HTML

HTML:

<div id="container">
    <div id="header">
        <h1>
            Segelfl... 
        </h1>
        <img src="header.png" alt="" />
    </div>

    <div id="navigation">
        <var>navigation[1|2|3]</var>
    </div>

    <div id="sidebar">
        <var>sidebar</var>
    </div>

    <div id="content">
        <var>content</var>
    </div>

    <div id="footer">
        <div class="gutter">
            <var>footer</var>
        </div>
    </div>
</div>

CSS:

/*  Typo   CSS Code
----------------------------------------------- */

a:link, a:visited
{
    text-decoration: underline;
    color:#e5e5e5;
}
a:active { text-decoration: underline; }
a:hover { text-decoration:none; }


h1 { font:bold 18px/140% "Trebuchet MS", Verdana, sans-serif; color:#e5e5e5; }
h2 { font:bold 14px/140% "Trebuchet MS", Verdana, sans-serif; color:#e5e5e5; }

p {	font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;}

/*  Layout
----------------------------------------------- */

body {
    background: #606062 url(bg.gif) no-repeat top left;
    /*padding:35px 0 0 0;*/
    padding:5px 0 0 0;
    margin:0;
    font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#container
{
    margin:0 auto;
    width:834px;
    background: #403c39;
}

#header
{
    padding:00px;
    color:#e5e5e5;
}

#header h1,
#header a
{
    padding:0;
    font-family:"Helvetica","Lucida Sans Unicode",Tahoma,Verdana,Arial,Helvetica,sans-serif;
    font-size:30px;
    font-weight:normal;
    text-decoration:none;
    line-height:1.3em; 
     color:#e5e5e5;
    text-align:right;
}

#header a:hover { text-decoration:none;  }


#navigation
{
    color:#e5e5e5;
    float:left;
 }

#sidebar
{
    padding:10px 0px 0px 10px;
}

#content
{
    float:right;
    width:814px;
    padding:10px;
}

#footer
{
    clear:both;
    margin-top:10px;
    background:url(footer-bg.gif) repeat-x top;
     background: #403c39;height:65px;
}

#footer .gutter 
{
    height:30px;
    padding:35px 15px 0 90px;
}


/* Navigation */

div.tp-mainnavigation {
	width:814px;  
         margin:0;
	}

ul.mainNav1,
ul.mainNav2,
ul.mainNav3 {
    width:814px;  /
    padding: 0px 0px 0px 50px;  /* Abstand zum Rand für den Link 1 */
	margin:0;
	text-align:left;
    float:left;  
    text-decoration:none !important;
    list-style-type:none;  
/*     border-bottom: 1px solid #e6e6e6;    damit keine Linie sichtbar ist*/
}

ul.mainNav1 li,
ul.mainNav2 li,
ul.mainNav3 li {
	display:inline;  
	margin:0;	
	padding:0;
	text-decoration:none;
}

ul.mainNav1 li a,
ul.mainNav1 li a:visited,
ul.mainNav2 li a,
ul.mainNav2 li a:visited,
ul.mainNav3 li a,
ul.mainNav3 li a:visited {
	display:block;
         
color: #FFD633 ;    
	float:left;
	text-decoration:none !important;  
}

ul.mainNav1 li a,
ul.mainNav1 li a:visited {
    font-size: 120%;    
}

ul.mainNav2 li a,
ul.mainNav2 li a:visited {
    font-size: 100%;   
}

ul.mainNav3 li a,
ul.mainNav3 li a:visited {
    font-size: 100%;
}

ul.mainNav1 li a, ul.mainNav1 li a:visited { padding:5px 25px 5px 0px; }
ul.mainNav2 li a, ul.mainNav2 li a:visited { padding:5px 25px 5px 0px; }
ul.mainNav3 li a, ul.mainNav3 li a:visited { padding:5px 25px 5px 0px; }

ul.mainNav1 li a:hover,
ul.mainNav2 li a:hover,
ul.mainNav3 li a:hover {
	color: #bfaa56;
}



ul.mainNav1 li a.parent,
ul.mainNav2 li a.parent,
ul.mainNav1 li a.current,
ul.mainNav2 li a.current,
ul.mainNav3 li a.current { 
	font-weight:bold;
}

/*ende*/

djheke · 1. Oktober 2012

Du musst die zweite und dritte ebene absolut positionieren. dein div#navigation relativ positionieren.

semifisherman · 1. Oktober 2012

Vielen Dank, dass du dich meldest. Ich habe das CSS von einem anderen kopiert und verstehe leider nur sehr wenig davon. Kannst du mir vielleicht im CSS genau zeigen wo ich was anpassen muss? Vielen Dank.

djheke · 1. Oktober 2012

Tja, die Methode CAP, macht nur wenig Sinn, wenn man nicht weiß was man tut.
Hier mal eine Beispieldatei mit hover. Solltest du auch so übernehmen.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Drop-Down Navigation mit CSS+</title>

 <style type="text/css">
* {                  /* Auf alle Elemente anwenden, NICHT für Formularelement geeignet*/
 margin:0;
 padding:0;
 list-style:none;
 text-decoration:none;
}

#navi  {
  float:left;    /* nach links floaten */
  background:#daa;
  width:100%;  
  position:relative;                         
}

#navi a {
 display:block; /*optional */
 padding:5px 10px;
 color:#fff;
 font-weight:bold;
 text-align:center;
}


#navi li  {
 float:left;    /* damit li ein einer Reihe liegt */
}

/* Alle Ebenen ausblenden */

#navi ul  ,
#navi  li:hover ul ul , 
#navi  li:hover  ul ul ul  {
 position:absolute;
 left:-9999px;
 width:100%;
}

#navi ul {
 top:auto;      /* auto, damit bei einer schriftgrößenänderung alles da bleibt wo es sein soll*/            
}


/*einzelne  Ebene einblenden */ 
#navi li:hover ul ,
#navi ul  li:hover  ul , 
#navi ul  ul li:hover  ul  {
 position:absolute;
 left:0;
 top:auto;
 width:100%;
}

/* nur für dich ein bissel bunt */
#navi ul  {
 background:#dad;
}
#navi ul ul  {
 background:#add;
}
#navi ul ul ul {
 background:#aad;
}

/* Hover Hinter- und Vordergrundfarbe für alle Ebenen */
#navi li:hover > a , #navi  ul li:hover  > a, #navi ul  ul  li:hover  > a, #navi ul  ul ul  li:hover  > a  {
  background:#ddd;
  color:#fff;
}

 </style>
 
</head>

<body>

<ul id="navi">
 <li><a href="#">Home </a></li>
 <li><a href="#">Kategorie 1  &raquo; </a>
  <ul>
    <li><a href="#">Thema 1 </a></li>
    <li><a href="#">Thema 2 </a></li>
    <li><a href="#">Thema 3 </a></li>
    <li><a href="#">Thema 4 &raquo; </a>
     <ul>
       <li><a href="#">Thema 4.1 </a></li>
       <li><a href="#">Thema 4.2 </a></li>
       <li><a href="#">Thema 4.3 &raquo; </a>
      <ul>
        <li><a href="#">Thema 4.3.1 </a></li>
        <li><a href="#">Thema 4.3.2 </a></li>
        <li><a href="#">Thema 4.3.3 </a></li>
       </ul>
       </li>
        <li><a href="#">Thema 4.4 </a></li>
        <li><a href="#">Thema 4.5 </a></li>
     </ul>
   </li>
  </ul> 
 </li>

 <li><a  href="#">Kategorie 2 &raquo; </a>
 <ul>
    <li><a href="#">Thema 1 </a></li>
    <li><a href="#">Thema 2 </a></li>
    <li><a href="#">Thema 3 </a></li>
    <li><a href="#">Thema 4 &raquo; </a>
   <ul>
       <li><a href="#">Thema 4.1 </a></li>
       <li><a href="#">Thema 4.2 </a></li>
       <li><a href="#">Thema 4.3 </a></li>
     </ul>
   </li> 
  </ul> 
 </li>

 <li><a href="#">Kategorie 3 &raquo; </a>
  <ul>
    <li><a href="#">Thema 1 </a></li>
    <li><a href="#">Thema 2 </a></li>
    <li><a href="#">Thema 3 </a></li>
    <li><a href="#">Thema 4 </a></li>
  </ul>
 </li>
</ul>
</body>
</html>

Hier Live
Beispiel

semifisherman · 3. Oktober 2012

Vielen Dank für Dein Beispiel! Das funktioniert ja wirklich

. Merci.

✔ Horizontale Navigation mit 3 Ebenen - wird unterbrochen

semifisherman

Grünschnabel

djheke

Erfahrenes Mitglied

semifisherman

Grünschnabel

djheke

Erfahrenes Mitglied

semifisherman

Grünschnabel

Neue Beiträge