Vertikales submenue in horizontales mainmenue einbinden

susigeha · #1 (**permalink**) 24.02.2011, 21:48

Hallo,

ich bin in Sachen css "blutiger Anfänger" und brauche für folgendes Menü Eure Hilfe:

Ein horizontales Menü soll ein vertikales Untermenü beinhalten können.
Leider werden nach dem Untermenü die restlichen Hauptlinks (4,5,6) des horizontalen Menüs nicht mehr auf einer Ebene dargestellt.

Das ganze Dilemma wird hiersichtbar.

HTML-Code:

<div id="header"> <div id="header-inner">
	  <div id="logo_center">
    <ul id="Navigation"><li><a href="#Beispiel">Hauptlink 1</a></li></ul>
    <ul id="Navigation"><li><a href="#Beispiel">Hauptlink 2</a></li></ul>
    <ul id="Navigation_1">
    					<li><span>aktiver Hauptlink 3</span></li>
    <!--submenue --><div class="clear:both">
                        <li><a href="#">Unterlink 1</a></li>
                        <li><a href="#">Unterlink 2</a></li>
                    </div>
    <!-- end submenue-->
    </ul>
            <ul id="Navigation"><li><a href="#">Hauptlink 4</a></li></ul>
            <ul id="Navigation"><li><a href="#">Hauptlink 5</a></li></ul>
            <ul id="Navigation"><li><a href="#">Hauptlink 6</a></li></ul>                  
      </div>
	  <!-- end logo_center -->
</div> 
	<!-- end header-inner -->
</div> 
	<!-- end header -->

Code:

#header {
	background:url(images/head_2200.jpg) repeat-x left top;
	background-position: center 0;
	width: 100%; 
	position: fixed;
	left: 0;
	top: 0;
	height:383px;
	background-color:#444446;
}

#header p{
	width: 1200px;
	margin: 0 auto;
	padding: 250px 0 120px;
}

#logo_center{
	background:url(images/logo_nav.gif) no-repeat left top;
	background-position: center 0;
	width: 100%;
	margin: 0 auto;
	position: fixed;
	top: 239px;
	text-align:center;
	float:left;
	height:143px;
	
}

ul#Navigation {
    width: 850px;
	margin: 0 auto;
	position:relative;
	left:180px;
    /*border: 1px solid black;
    border-left-color: white; border-top-color: white; */
  }

ul#Navigation li {
    list-style: none;
    display:inline;
	padding: 114px 25px 10px 25px;
	float:left;   
	border: 1px solid black;
    background-color: silver;
  }
  
ul#Navigation a, ul#Navigation span {
    /*padding: 5.3em 0.2em;*/ 
    text-decoration: none; 	
    color:#FFF;
	margin:0;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;

	/*background-color: #444446;*/
  }
  
ul#Navigation_1 {
    width: 150px;
	margin: 0 auto;
	position:relative;
	left:120px;	
  }

ul#Navigation_1 li {
    list-style: none;
    padding: 17px 5px 16px 5px;
	/*padding: 20px 25px 25px 25px;
	float:left;
	display:inline;  
	border: 1px solid black;
    background-color: silver;*/	
	background-image:url(images/bg_lp1.gif);
	background-repeat:repeat-x;
	border-bottom: 1px solid #333;
	color:#FFF;
  }
   
ul#Navigation_1 a {
	/*padding: 85px 22px 65px 22px;*/
    text-decoration: none; 	
    color:#FFF;
	margin:0;
	font-family:Verdana, Geneva, sans-serif;
}

ul#Navigation_1 span {
	/*padding: 85px 22px 65px 22px;*/
    text-decoration: none; 	
    color:#FFF;
	margin:0;
	font-family:Verdana, Geneva, sans-serif;
	font-weight:bold;
}

Bin für jede Hilfe dankbar.

LG
Susi

Manfred62 · #2 (**permalink**) 24.02.2011, 22:11

Zitat:

Das ganze Dilemma...

Wohl wahr. Ein Menü sollte etwas so aussehen:

HTML-Code:

<ul>
<li><a href="#"></a>Link 1</li>
<li><a href="#"></a>Link 2</li>
<li><a href="#">Link 3</a>
  <ul>
  <li><a href="#">Link 3a</a></li>
  <li><a href="#">Link 3b</a></li>
  </ul>
</li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>

Link-Empfehlung zum Basics lernen:
Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)

Gruß Manfred

susigeha · #3 (**permalink**) 24.02.2011, 22:19

Vielen Dank für deine Informationen, aber siehst Du auch eine Möglichkeit die Hauptlinks (4,5,6) bei "meiner" Struktur auf eine Ebene "hoch" zu bekommen?
Gruß Susi

Manfred62 · #4 (**permalink**) 24.02.2011, 22:27

Ja klar, z.B hier:
http://xhtmlforum.de/40267-faq-h-ufi...und.html#faq12

Manfred

heiko_rs · #5 (**permalink**) 24.02.2011, 22:30

Grundsätzliches Vorgehen: Eine ul statt vieler nebeneinander. Die li floaten, a hat display: block;. Eine Sub-Navi folgt direkt auf a, und wird per pos. abs. ins Nirwana geschoben. Beim Hovern ihres Eltern-li wird sie sichtbar. Siehe auch Son of Suckerfish Dropdowns | HTML Dog

Edit: Da war ja schon was

susigeha · #6 (**permalink**) 25.02.2011, 01:14

Vielen lieben Dank euch beiden für die Hilfe.

Ich habe das Menü angepasst, so dass die Hauptlinks auf einer Ebene erscheinen.

Leider hat sich in der neuen Version ein Effekt eingestellt, der in der alten Version nicht vorhanden war.

Beim Vergrößern der Fensterbreite wandert jetzt das Menü nach links.
Der Abstand zwischen Navigationsmenü und dem rechten Bildrand des Logos sollte aber immer den selben Breitenabstand haben. Im Prinzip also so wie unten
der Abstand zwischen "Grafik unten" und AGB-Link immer identisch ist.

Was muss ich oben ändern?

HTML-Code:

	<div id="header"></div><!-- end header -->
	  <div id="logo">
          <div id="menue">  
            <ul id="nav">
            <li><a href="#Beispiel">Hauptlink 1</a></li>
            <li><a href="#Beispiel">Hauptlink 2</a></li>
            <li id="sub"><span>Aktiver Hauptlink 3</span>
            <a href="#Beispiel">Unterlink 1</a>
            <a href="#Beispiel">Unterlink 2</a>
            </li>         
            <li><a href="#Beispiel">Hauptlink 4</a></li>
            <li><a href="#Beispiel">Hauptlink 5</a></li>
            <li><a href="#Beispiel">Hauptlink 6</a></li>
            </ul>
            </div>
                            
      </div>

Code:

body {
  	background-image:url(images/back_loop_center.gif);
 	background-repeat:repeat;
  	background-position: center 0;
	font-size: 0.75em;
	font-family:  Verdana, Arial, sans-serif;
  	color:#000000;  
  	padding: 0;
  	margin: 0;
  	}
	
#header {
	background:url(images/head_2200.jpg) repeat-x left top;
	background-position: center 0;
	width: 100%; 
	position: fixed;
	left: 0;
	top: 0;
	height:240px;
	background-color:#444446;
}

#header p{
	width: 1200px;
	margin: 0 auto;
	padding: 250px 0 120px;
}

#logo {
	background:url(images/logo_nav.gif) no-repeat left top;
	background-position: center 0;
	width: 100%;
	margin: 0 auto;
	position: fixed;
	top: 240px;
	text-align:center;
	float:left;
	height:143px;
	background-color:#444446;
}

#menue {
	width: 100%;
	margin: 0 auto;
	position: fixed;
	left:34.5%;
}

#menue #nav ul {
	width: 100%;
	margin: 0 auto;
}

#menue #nav li {
	float:left;
	list-style:none;
	margin: -12px 5px;

}

#menue #nav a {
	display: block;
	padding: 115px 15px 5px 15px;
	background-color:#999;
	font:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#FFF;
	text-decoration:none;
}

#menue #sub a {
	display: block;
	padding: 15px 15px 17px 15px;
	background-color:#999;
	font:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#FFF;
	text-decoration:none;
	border-bottom: 1px solid #333;	
	background-image:url(images/bg_lp1.gif);
	background-repeat:repeat-x;
}

#menue #nav span {
	display: block;
	padding: 15px 15px 19px 15px;
	background-color:#999;
	border-bottom: 1px solid #333;
	background-image:url(images/bg_lp1.gif);
	background-repeat:repeat-x;
	color:#FFF;
	font-weight:bold;
}

Über einen Tipp würde ich mich sehr freuen.
Gruß Susanne

susigeha · #7 (**permalink**) 25.02.2011, 01:57

Folgende Änderung brachte das gewünschte Ergebnis:

Code:

#menue {
	width: 850px;
	margin: 0 auto;
	position:relative;
	left:165px;
}

Gruß Susi

nevermind · #8 (**permalink**) 25.02.2011, 08:20

Eher so:

HTML-Code:

<div id="header"></div><!-- end header -->
    <div id="menue">  
      <ul id="nav">
        <li><a href="#Beispiel">Hauptlink 1</a></li>
        <li><a href="#Beispiel">Hauptlink 2</a></li>
        <li id="sub"><span>Aktiver Hauptlink 3</span>
          <ul>
            <li><a href="#Beispiel">Unterlink 1</a></li>
            <li><a href="#Beispiel">Unterlink 2</a></li>
          </ul>
        </li>         
        <li><a href="#Beispiel">Hauptlink 4</a></li>
        <li><a href="#Beispiel">Hauptlink 5</a></li>
        <li><a href="#Beispiel">Hauptlink 6</a></li>
      </ul>
    </div>
</div>

<div id="menue" könnte auch wegfallen, die Eigenschaften kann ul bekommen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
In horizontales Menü dropdown einbinden	Star_Scream	CSS	1	14.10.2008 13:45
vertikales Menü mit horizontalem Submenü	FuryDE	CSS	4	12.06.2008 20:44