jaja: Wo blendet CSS die Unterpunkte aus?

hallo erstmal,

ich hab mir das menü von geo.de mal genauer angesehen, ich finde aber nicht den css-befehl wo die unterpunkte ausgeblendet werden wenn man nicht mit der maus drüber fährt.

hier der code:

  
  
/* global whitespace reset */  
* { margin: 0; padding: 0;  }  
  
body {  
  font: 0.83em Verdana,Arial,sans-serif;  
}  
  
ul, li {  
  list-style: none;  
   z-index: 1;  
}  
ul.disc li {  
  list-style: disc;  
  margin-left: 25px;  
}  
acronym, abbr {  
  border-bottom: none;  
}  
  
/* invisible element */  
.invisible {  
  position: absolute;  
  left: -1000px;  
  top: -1000px;  
  width: 0px;  
  height: 0px;  
  overflow: hidden;  
  display: inline;  
}  
/* clear floatings */  
.clearFloat {  
  clear: both;  
  height: 1px;  
  line-height:0;  
}  
/* non-semantic italic and bold style */  
.i { font-style: italic; overflow:auto; }  
.b, .text-bold { font-weight: bold; }  
.ok { color: #090; }  
.error { color: #c00; }  
  
  
  
.intro {  
  margin: 5px 0 20px 0;  
  line-height: 1.3em;  
  font-size: 0.93em;  
  font-weight: normal;  
  color: #6d6d6d;  
}  
  
  
  
/* ==== main navigation ==== */  
#mainNav {  
  width: 824px;  
  font-size: 11px;  
  height: 21px;  
  border-right: 1px solid #999;  
  position: relative;  
  z-index: 200;  
}  
#mainNav ul {  
  visibility: hidden;  
  position: absolute;  
  left: 0;  
  top: 21px;  
  background: #fff;  
  padding-top: 2px;  
  z-index: 200;  
  display: inline;  
}  
#mainNav #topNav11 ul, #mainNav #topNav12 ul { margin-left: -77px; }  
  
#mainNav li {  
  float: left;  
  text-align: center;  
  position: relative;  
  background: #fff;  
}  
#mainNav a {  
  text-decoration: none;  
}  
#mainNav .seperator, #mainNav #seperatorHalfpage {  
  float: left;  
  height: 20px;  
  width: 4px;  
  font-size: 1px;  
  border-left: 1px solid #999;  
  border-top: 1px solid #999;  
}  
#mainNav #seperatorHalfpage {  
  display: none;  
}  
#mainNav li a {  
  display: block;  
  float: left;  
  text-align: center;  
  padding: 3px 4px;  
  font-weight: normal;  
  color: #000;  
  border: 1px solid #999;  
  border-right: none;  
}  
#topNav1  a { width: 38px; }  
#topNav2  a { width: 70px; }  
#topNav3  a { width: 70px; }  
#topNav4  a { width: 70px; }  
#topNav5  a { width: 70px; }  
#topNav6  a { width: 70px; }  
#topNav7  a { width: 72px; }  
#topNav8  a { width: 70px; }  
#topNav9  a { width: 33px; }  
#topNav10 a { width: 76px; }  
#topNav11 a { width: 31px; }  
#topNav12 a { width: 31px; }  
  
/*#topNav4 { border: 1px solid red; }*/  
#mainNav #topNavHalfpage   { display: none; }  
#mainNav #topNavHalfpage a { width: 154px; color: #999; }  
  
body#start     #mainNav #topNav1 a, #mainNav #topNav1 a:hover  { color: #fff; background: #a8cd41; }  
body#natur       #mainNav #topNav2 a, #mainNav #topNav2 a:hover  { color: #fff; background: #15a077; }  
body#technik     #mainNav #topNav3 a, #mainNav #topNav3 a:hover  { color: #fff; background: #193370; }  
body#mensch      #mainNav #topNav4 a, #mainNav #topNav4 a:hover  { color: #fff; background: #9e003a; }  
body#kultur      #mainNav #topNav5 a, #mainNav #topNav5 a:hover  { color: #fff; background: #de6f03; }  
body#reisen      #mainNav #topNav6 a, #mainNav #topNav6 a:hover  { color: #fff; background: #f1c213; }  
body#fotografie  #mainNav #topNav7 a, body#portfolio #mainNav #topNav7 a, #mainNav #topNav7 a:hover  { color: #fff; background: #50595b; }  
body#interaktiv  #mainNav #topNav8 a, #mainNav #topNav8 a:hover, body#info #mainNav #topNav9 a, #mainNav #topNav9 a:hover, body#heftreihen #mainNav #topNav10 a, #mainNav #topNav10 a:hover, body#abo #mainNav #topNav11 a, #mainNav #topNav11 a:hover,  body#shop #mainNav #topNav12 a, #mainNav #topNav12 a:hover, #mainNav #topNavHalfpage-active a, #mainNav #topNavHalfpage a:hover {  
  color: #fff; background: #a8cd41;  
}  
  
  
  
#mainNav ul li, #mainNav ul li a {  
  display: block;  
  text-align: left;  
  clear: both;  
}  
#mainNav ul li a {  
  padding: 2px;  
  border-left: 1px solid #999;  
  border-right: 1px solid #999;  
  border-top: none;  
  border-bottom: none;  
  color: #fff !important;  
}  
  
#mainNav ul li a:hover {  
  color: #000 !important;  
}  
  
#topNav1 ul li a  { width: 145px; background: #a8cd41; }  
#mainNav #topNav2 ul a  { width: 170px; background: #15a077; }  
#mainNav #topNav3 ul a  { width: 100px; background: #193370; }  
#mainNav #topNav4 ul a  { width: 100px; background: #9e003a; }  
#mainNav #topNav5 ul a  { width: 120px; background: #de6f03; }  
#mainNav #topNav6 ul a  { width: 100px; background: #f1c213; }  
#mainNav #topNav7 ul a  { width: 130px; background: #50595b; }  
#mainNav #topNav8 ul a, #mainNav #topNav9 ul a, #mainNav #topNav10 ul a, #mainNav #topNav11 ul a, #mainNav #topNav12 ul a {  
  width: 100px; background: #a8cd41;  
}  
#mainNav #topNav9  ul a { width: 120px; }  
#mainNav #topNav10 ul a { width: 112px; }  
#mainNav #topNav11 ul a { width: 112px; }  
#mainNav #topNav12 ul a { width: 112px; }  
  
body#start     #mainNav #topNav1 ul a:hover, #mainNav #topNav1 ul a:hover  { background: #cde599; }  
body#natur       #mainNav #topNav2 ul a:hover, #mainNav #topNav2 ul a:hover  { background: #a3ecd6; }  
body#technik     #mainNav #topNav3 ul a:hover, #mainNav #topNav3 ul a:hover  { background: #c7d8ff; }  
body#mensch      #mainNav #topNav4 ul a:hover, #mainNav #topNav4 ul a:hover  { background: #f7cbe1; }  
body#kultur      #mainNav #topNav5 ul a:hover, #mainNav #topNav5 ul a:hover  { background: #ffcb98; }  
body#reisen      #mainNav #topNav6 ul a:hover, #mainNav #topNav6 ul a:hover  { background: #f4e5a7; }  
body#fotografie  #mainNav #topNav7 ul a:hover, body#portfolio #mainNav #topNav7 ul a:hover, #mainNav #topNav7 ul a:hover  { background: #dbe2e4; }  
body#interaktiv  #mainNav #topNav8 ul a:hover, #mainNav #topNav8 ul a:hover, body#info #mainNav #topNav9 ul li a:hover, #mainNav #topNav9 ul li a:hover, body#heftreihen #mainNav #topNav10 ul li a:hover, #mainNav #topNav10 ul li a:hover, body#abo #mainNav #topNav11 ul li a:hover, #mainNav #topNav11 ul li a:hover, body#shop #mainNav #topNav12 ul li a:hover , #mainNav #topNav12 ul li a:hover   {  
  background: #cde599;  
}  
  
#mainNav ul a.secondLevel { padding-left: 10px; width: 162px !important}  
#mainNav .first { border-top: 1px solid #999; }  
#mainNav .last  { border-bottom: 1px solid #999; }  
  
#mainNav li:hover>ul {  
  visibility: visible;  
}  
  
  
#blogNav {  
  float: right;  
  margin: -18px 2px 0 0;  
}  
#blogNav a {  
  display: block;  
  float: left;  
  width: 10px;  
  height: 11px;  
  text-align: center;  
  color: #fff;  
  text-decoration: none;  
  padding: 1px 1px 2px 1px;  
  margin-right: 1px;  
}  
#blogNav a:hover, #blogNav a.activeSlide {  
  font-weight: bold;  
  background-color: #d3a100;  
}  
  

danke!

  1. ich hab mir das menü von geo.de mal genauer angesehen, ich finde aber nicht den css-befehl wo die unterpunkte ausgeblendet werden wenn man nicht mit der maus drüber fährt.

    Nebst der Tatsache dass du dir dieses fürchterliche CSS nicht zu Vorbild nehmen solltest: da ist zusätzlich JavaScript beteiligt welches die Klasse "invisible" hinzufügt und entfernt. Die blendet nichts aus sondern verschiebt nur ins Nirvana.

    In Summe scheint die Lösung überladen und träge zu sein.

    Halte dich lieber da dran:
    http://de.selfhtml.org/css/layouts/navigationsleisten.htm

    1. In Summe scheint die Lösung überladen und träge zu sein.

      Add:
      Da jene Navigation nicht über die Tastatur bedienbar ist, gibt es eigentlich keinen Grund für den JS-Einsatz.

      mfg Beat

      --
      ><o(((°>           ><o(((°>
         <°)))o><                     ><o(((°>o
      Der Valigator leibt diese Fische
  2. Hallo jaja,

    ich hab mir das menü von geo.de mal genauer angesehen, ich finde aber nicht den css-befehl wo die unterpunkte ausgeblendet werden wenn man nicht mit der maus drüber fährt.

    #mainNav ul {
       visibility:hidden;
       position:absolute;
       left:0;
       top:21px;
       background: #fff;
       padding-top:2px;
       z-index:200;
       display:inline;
    }

    #mainNav li:hover > ul,
    .teaserL .teaserImg:hover > .clickMark{
       visibility:visible;
    }

    dass da über gebühr mit JavaScript nachgeholfen wird, kann ich nicht finden; die Navigation auf geo.de funktioniert außer im IE6 auch bei deaktiviertem JS.

    Gruß Gernot