CSS Dropdown Menü, wo ist der fehler?

  1. fallen

    fallen Thread Starter MacUser Mitglied

    Mitglied seit:
    15.12.2003
    Beiträge:
    533
    Zustimmungen:
    10
    guten morgen,

    ich bin gerade an einer homepage, und die brauchte ein menü. da dachte ich mir mal, dass ein css dropdown menü ganz gut wäre. gesagt getan, allerdings passt es irgendwie nicht richtig. das soll oben und links ganz bündig sein, aber es bleibt immernoch weiss vom hintergrund an den rändern. (beim body ist margin 0!)

    wäre toll, wenn jemand den fehler sehen würde...!


    html code:
    Code:
    	<ul id="nav">
    	<li id="menu" class="off"><a href="#">Aktuelles</a>
    	<ul>
      <li><a href="#">Meldungen</a></li>
      <li><a href="#">Termine</a></li>
    	</ul></li>
    	<li id="menu" class="off"><a href="#">Verband</a>
    	<ul>
      <li><a href="#">Aufgaben</a></li>
      <li><a href="#">Leistungen</a></li>
      <li><a href="#">Projekte</a></li>
      <li><a href="#">Vorstand</a></li>
      <li><a href="#">Mitglieder</a></li>
      <li><a href="#">Geschichte</a></li>
    	</ul></li>
    	<li id="menu" class="on"><a href="#">Gewerbe</a>
    	<ul>
      <li><a href="#">Statistik</a></li>
      <li><a href="#">Recht</a></li>
    	</ul></li>
    	<li id="menu" class="off"><a href="#">Service</a>
    	<ul>
      <li><a href="#">Preisempfehlung</a></li>
      <li><a href="#">Broschüren</a></li>
      <li><a href="#">Infos</a></li>
      <li><a href="#">Seminare</a></li>
    
    	</ul></li>
    	<li id="menu" class="off"><a href="#">Kontakt</a>
    	<ul>
      <li><a href="#">Geschäftsstelle</a></li>
      <li><a href="#">Presse</a></li>
    	</ul></li>
    </ul>
    
    mit diesem css code:
    Code:
    	<style type="text/css" media="all">
    	#divNav {
    		margin: 0;
    		padding: 0;
    		height: 53px;
    		width: 999px;
    	}
    	
    	#nav {
    	position: relative;
    	height: 53px;
    	background-image: url(../images/nav.jpg);
    	background-repeat: repeat-x;
    	width: 999px;
    	padding-left: 0px;
    
    	}
    
    	#nav li ul, #nav li ul {
    		margin: 0;
    		padding: 0;
    	}
    
    	#nav a {
    		text-decoration: none;
    	}
    
    	#nav li { /*float the main list items*/
    		margin: 0;
    		float: left;
    		display: block;
    		padding-right: 0px;
    	}
    
    	#nav li ul {
    		display: none;
    	}
    
    	#nav li.off ul, #nav li.on ul  { /*put the subnav below*/
    	position: absolute;
    	top: 28px;
    	left: 0;
    	padding-top: 0px;
    	height: 25px;
    	width: 999px;
    	padding-left: 0px;
    	background-image: url(../images/nav2.jpg);
    	}
    
    	#nav li.on ul {
    	background-image: url(../images/nav2.jpg);
    	}
    
    	#nav li.on:hover ul, #nav li.over ul { /*for ie*/
    	background-image: url(../images/nav2.jpg);
    	}
    
    	#nav li a {
    		color: #FFFFFF;
    		font-weight: bold;
    		display: block;
    		width: 124px;
    		padding: 0;
    	}
    
    	#nav li.on a {
    		color: #000000;
    	}
    
    	#nav li.on ul a, #nav li.off ul a {
    		border: 0;
    		float: left; /*ie doesn't inherit the float*/
    	background-image: url(../images/nav2_kl.jpg);
    		width: auto;
    		margin-right: 0px;
    	}
    
    	#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
    	background-image: url(../images/nav2_kl.jpg);
    	}
    
    	#nav li.on ul {
    		display: block;
    	}
    
    	#nav li.off:hover ul, #nav li.over ul {
    		display: block;
    		z-index: 6000;
    	}
    
    	#nav li.off a:hover, #nav li.on a:hover { 
    		color: #FFFFFF;
    	}
    
    	/*do the image replacement*/
    
    
    
    	#menu a {
    	display: block;
    	position: relative;
    	height: 28px; /*contains all hover states*/
    	background-image: url(../images/nav.jpg);
    	background-repeat: repeat-x;
    	}
    
    /*first, put the initial states in place*/
    
    #menu a {
    	background-position: 0 0;
    }
    
    /*active area - for this demo - the code could be based on a body class, and probably work better.*/
    
     #menu.on a {
     	background-position: 0px -28px;
     } /*add selectors for the other li's and background-positions*/
    
    /*hover states*/
    
    #menu a:hover, #menu:hover a, #menu.over a {
    	background-position: 0 -28px;
    }
    
    
    
    /*subnav formatting*/
    
    #nav li.off ul a, #nav li.on ul a {
    	display: block;
    	color: #000000;
    	font-family: arial, verdana, sans-serif;
    	font-size: 10px;
    }		
    
    #nav li.on ul a {
    }
    	
    
    	body {
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    }
        </style>
     
    fallen, 20.01.2007
    #1
  2. Jakob

    Jakob MacUser Mitglied

    Mitglied seit:
    05.01.2004
    Beiträge:
    1.067
    Zustimmungen:
    21
    Ein Link zur betreffenden Seite wäre besser. Vielleicht liegt es ja gar nicht an den geposteten Informationen.
     
    Jakob, 20.01.2007
    #2
  3. fallen

    fallen Thread Starter MacUser Mitglied

    Mitglied seit:
    15.12.2003
    Beiträge:
    533
    Zustimmungen:
    10
    danke, hast recht.

    in dreamweaver zeigt er mir links auch noch einen rahmen an...
    und im IE siehts auch seltsam aus...

    http://www.herzflimmern-artwork.de/menu/menu.html

    die schrift steht tatsächlich immer oben links im moment, das kommt dann, wenns alles funktioniert!
     
    fallen, 20.01.2007
    #3
  4. VMPR

    VMPR MacUser Mitglied

    Mitglied seit:
    17.02.2005
    Beiträge:
    1.084
    Zustimmungen:
    30
    VMPR, 20.01.2007
    #4
  5. acid

    acid MacUser Mitglied

    Mitglied seit:
    18.08.2005
    Beiträge:
    472
    Zustimmungen:
    0
    Gib dem Body mal padding: 0px mit, momentan hast du nur margin angegeben
     
    acid, 20.01.2007
    #5
  6. fallen

    fallen Thread Starter MacUser Mitglied

    Mitglied seit:
    15.12.2003
    Beiträge:
    533
    Zustimmungen:
    10
    @VMPR, das design steht schon, aber danke! wie gesagt, schriften und so sind nicht positioniert...

    hab ich gemacht acid, ist aber kein unterschied.
     
    fallen, 20.01.2007
    #6
  7. 2nd

    2nd MacUser Mitglied

    Mitglied seit:
    25.07.2004
    Beiträge:
    8.901
    Zustimmungen:
    242
    Der Universalselektor sollte helfen:

    Code:
    * {
       margin: 0;
       padding: 0
    }
    
    Dir ist bewusst, dass Du für den IE bis v6 einen Workaround für solcherart Menus brauchst?!

    Ausserdem solltest Du Deine IDs nicht mehrfach im Dokument verwenden (#menu).

    2nd
     
    2nd, 20.01.2007
    #7
  8. fallen

    fallen Thread Starter MacUser Mitglied

    Mitglied seit:
    15.12.2003
    Beiträge:
    533
    Zustimmungen:
    10
    ja und eigentlich ist das auch drin, aber irgendwie gehts grade nicht mehr...
    mensch ist das ein mist...
     
    fallen, 20.01.2007
    #8
  9. fallen

    fallen Thread Starter MacUser Mitglied

    Mitglied seit:
    15.12.2003
    Beiträge:
    533
    Zustimmungen:
    10
    fallen, 20.01.2007
    #9
  10. ThaHammer

    ThaHammer MacUser Mitglied

    Mitglied seit:
    01.06.2004
    Beiträge:
    3.277
    Zustimmungen:
    13
    ThaHammer, 20.01.2007
    #10
Die Seite wird geladen...
Ähnliche Themen - CSS Dropdown Menü
  1. dennz2017
    Antworten:
    2
    Aufrufe:
    306
    wegus
    10.04.2017
  2. hello
    Antworten:
    1
    Aufrufe:
    238
    beage
    12.09.2015
  3. Hoooray
    Antworten:
    2
    Aufrufe:
    328
    Hoooray
    21.07.2015
  4. Kemna
    Antworten:
    6
    Aufrufe:
    569
    Kemna
    03.04.2015
  5. morator
    Antworten:
    1
    Aufrufe:
    631
    falkgottschalk
    01.02.2011