✔ Zeilenumbruch im <li> tag verhindern

[e-dust]

Guten Abend,

mein Problem ist folgendes:

ich habe eine horizontale Menüleiste mit Pulldown Menü.Mein Problem ist, dass die Sub-Menüpunkte teilweise länger sind als die Hauptpunkte. Das wäre ja kein Problem, wenn ich keinen hover Effekt auf den Links bräuchte.

Menü

<li><a href="#">Main Item</a>
  <ul>
  <li><a href="#">Sub Item 1.1 long Text Example</a></li>

Ich habe dem ul Element keine Breite gegeben, deshalb verstehe ich den Zeilenumbruch auch nicht.
Wie kann ich die Breite des li Elementes anpassen oder gegebenfalls mit einem div tag nachhelfen, sodass der hover Effekt nur den Link betrifft (Hintergrundgrafik wird vertauscht).

Danke im vorraus

 

[Maik]

Hi,

kannst du bitte den vollständigen HTML- und CSS-Code posten, denn anhand des gezeigten Codeschnipsels lässt sich der Zeilenumbruch im li-Element nicht nachvollziehen, respektive reproduzieren.

 

[e-dust]

So sieht der komplette Code für das Menü aus:

<div class="suckertreemenu">
<ul id="treemenu1">
<li style=" padding-left:0px; margin-left:0px;"><a href="#">HOME</a></li>
<li><a href="#">Short Menu</a>
  <ul>
  <li><div id="link"><a href="#">Sub Item 1.1</a></div></li>
  <li><a href="#">Sub Item 1.2 Long Menue Item</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>

Der CSS Code.

.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
height: 18px;
}

.suckertreemenu ul li a{
display: block;
margin-right: 12px;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
color: #AFACAF;
line-height: 18px;
}
	
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 18px; 
display: block;
height: 18px;
}

.suckertreemenu ul li ul li{
display: list-item;
float: left;
overflow:visible;
display: block;
}

.suckertreemenu ul li ul li a{
display: block;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
color: #AFACAF;
line-height: 18px;
padding-right: 0px;
}

#link a:hover{
border-bottom: 1px;
background-color:#FF0000;
}

 

[Maik]

Das dürfte dann wohl an der absoluten Positionierung der zweiten Menüebene liegen, da sie keine Breitenangabe besitzt.

 

[e-dust]

Die absolute Positionierung wird jedoch benötigt, um die Liste vertikal unter dem Hauptmenü zu positionieren.

 

[Maik]

Ich wollte damit auch nicht zum Ausdruck bringen, dass die absolute Positionierung falsch sei, oder aufgehoben werden muss, sondern, dass hier in diesem Fall eine Breitenangabe erforderlich ist, da das Submenü durch seine absolute Positionierung aus dem normalen Textfluss genommen wird.

Und wenn du dir das Stylesheet des Original-Suckertree-Menüs nochmal genauer anschaust, wirst du sehen, dass für die Links eine feste Breite eingerichtet wurde.

/*Top level menu link items style*/
.suckertreemenu ul li a{
display: block;
width: 90px; /*Width of top level menu link items*/
padding: 1px 8px;
border: 1px solid black;
border-left-width: 0;
text-decoration: none;
color: navy;
}

/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 160px; /*width of sub menu levels*/
color: navy;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ccc;
}

 

[e-dust]

Okay das war die Lösung danke

 

[peterjend]

Hi@all,
wollte kein neues Thema eröffnen, da ich über google mit folgendem String hier her fand:
- SuckerTree Horizontal Menu hilfe -

Habe auch das oben erwähnte Menü, was ich versuche, in meine Homepage einzubauen.
Geht soweit alles gut, nur finde ich nicht die Lösung, wie ich im ersten Menü ein weiteres Submenü hinzufügen kann. Habe schon zig Möglichkeiten durch, ich scheine das mit dem css-File nicht zu kappieren?!

Würde mich über Hilfe freuen.

Hier hätte ich gerne noch 2 Submenüs:

<div class="suckertreemenu">
<ul id="treemenu1">
<li>
<a href="http://meine_domain.de/index.php" style="border-left: 1px solid black">Home</a></li>
<li><a href="#">User ACP</a>
  <ul>
  <li><a href="#">Mein Profil</a></li>
  <ul>  
  li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>    </ul>
    </li>
</ul>

Habe da also als Hauptmenü --> User ACP
Als erstes Untermenü --> Mein Profil --> Sub Item 1.1 / Sub Item 1.2 / ...
Nun sollten da noch 2 Submenüs dazu:
Mein Profil 2 --> Sub Item 1.1 / Sub Item 1.2 / ...
Mein Profil 3 --> Sub Item 1.1 / Sub Item 1.2 / ...

Das css-File ist orginal belassen, hier zu sehen:
http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-horizontal/P40/

LG peterjend

 

[Maik]

Hi,

das Markup lautet nun folgendermaßen:

<div class="suckertreemenu">
     <ul id="treemenu1">
         <li><a href="http://meine_domain.de/index.php" style="border-left: 1px solid black">Home</a></li>
         <li><a href="#">User ACP</a>
                <ul>
                    <li><a href="#">Mein Profil</a>
                           <ul>
                               <li><a href="#">Sub Item 1.1</a></li>
                               <li><a href="#">Sub Item 1.2</a></li>
                               <li><a href="#">Sub Item 1.3</a></li>
                               <li><a href="#">Sub Item 1.4</a></li>
                           </ul>
                    </li>
                    <li><a href="#">Mein Profil 2</a>
                           <ul>
                               <li><a href="#">Sub Item 1.1</a></li>
                               <li><a href="#">Sub Item 1.2</a></li>
                           </ul>
                    </li>
                    <li><a href="#">Mein Profil 3</a>
                           <ul>
                               <li><a href="#">Sub Item 1.1</a></li>
                               <li><a href="#">Sub Item 1.2</a></li>
                           </ul>
                    </li>
                </ul>
         </li>
     </ul>
</div>

 

[peterjend]

Hi,
aber hallo, das ging ja wie der Blitz ;-)
Darf ja gar nicht sagen, wie lange ich da nun schon rumgespielt hab,
HERZLICHEN DANK !!

LG peterjend