Listmenu Submenü Border

[Andreas]

Hi,
ich bekomme es einfach nicht hin.
Trotz Hilfe klappt es noch nicht.

Ich  habe ein Menü und ein Submenü
Jeder Hauptmenüpunkt soll oben und unten einen Rand haben
Das Submenü nicht

Das Menü wird aus der DB per PHP generiert

So soll es aussehen:

<div id="linksmenu">
 <ul id="linkslist">
------------------------------------------------
  <li><a href="#">Link1 Hauptmenü</a></li>
------------------------------------------------
  <li><a href="#">Link2 Hauptmenü</a></li>
------------------------------------------------
   <ul id="linkssublist">
    <li><a href="#">Link1 Untermenü</a></li>
    <li><a href="#">Link2 Untermenü</a></li>
    <li><a href="#">Link3 Untermenü</a></li>
    <li><a href="#">Link4 Untermenü</a></li>
  </ul>
 <ul id="hauptmenue">
------------------------------------------------
  <li><a href="#">Link3 Hauptmenü</a></li>
------------------------------------------------
 </ul>
</div>

so sieht es momentan aus
-------------
Menu_1
-------------
  SubMenu_1
  SubMenu_2
  SubMenu_3

Border hier fehlt

menu_2
-------------

Style:

#linksmenu {
 font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
 font-size: 10px;
 white-space: nowrap;
}

#linkslist{
 display:block;
 width:150px;
 background-color: #6B7573;
 border-top:1px solid  #0000cc;
 border-bottom:none;
}

#linkslist a {
 display:block;
 text-decoration: none;
 text-align: left;
 color:#fff;
 padding-left:30px;
 padding-top:6px;
 padding-bottom:7px;
 outline:0;
 border-bottom:1px solid #0000cc;
}

#linkslist a, #linkslist a:visited {
 background: transparent url(../libIMG/nav_1.jpg) left center no-repeat;
 color: #394542;
 text-decoration: none;
 font-weight: bold;
 outline:0;
}

/* ---------- linkes Menü MouseOver + Hervorheben --------- */
#linkslist a:hover...{
...
}

/* ---------------- linkes SubMenu-------------- */
#linkssublist {
 font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
 font-size: 10px;
 white-space: nowrap;
}
#linkssublist{
 display:block;
 width:150px;
 background-color: #E1E1E1;
}
#linkssublist a{
 display:block;
 text-decoration: none;
 text-align: left;
 background-color: #E1E1E1;
 color:#4A494E;
 padding-left:30px;
 padding-top:6px;
 padding-bottom:7px;
 outline:0;
 border-bottom:none;
}
#linkssublist a, #linkssublist a:visited {
 background: #E1E1E1;
 color: #4A494E;
 text-decoration: none;
 font-weight: normal;
 outline:0;
}
/* ---------- linkes SubMenü MouseOver + Hervorheben --------- */
#linkssublist a:hover...{
...
}

[Detlef G.]

Hallo Andreas

So soll es aussehen:

Auch wenn das dein Borderproblem noch nicht löst, das HTML stimmt nicht.

<div id="linksmenu">
<ul id="linkslist">

<li><a href="#">Link1 Hauptmenü</a></li>

<li><a href="#">Link2 Hauptmenü</a></li>

<ul id="linkssublist">

UL darf nicht Kind von UL sein, die id ist auch nicht nötig, weil sie sich leicht über den Nachfahrenselektor ansprechen lässt.

<li><a href="#">Link1 Untermenü</a></li>
    <li><a href="#">Link2 Untermenü</a></li>
    <li><a href="#">Link3 Untermenü</a></li>
    <li><a href="#">Link4 Untermenü</a></li>
  </ul>

Oh, noch ein Hauptmenü?

<ul id="hauptmenue">

<li><a href="#">Link3 Hauptmenü</a></li>

</ul>
</div>

Meinst du so?

<div id="linksmenu">  
 <ul id="linkslist">  
  <li><a href="#">Link1 Hauptmenü</a></li>  
  <li><a href="#">Link2 Hauptmenü</a>  
   <ul>  
    <li><a href="#">Link1 Untermenü</a></li>  
    <li><a href="#">Link2 Untermenü</a></li>  
    <li><a href="#">Link3 Untermenü</a></li>  
    <li><a href="#">Link4 Untermenü</a></li>  
   </ul>  
  </li>  
  <li><a href="#">Link3 Hauptmenü</a></li>  
 </ul>  
</div>

so sieht es momentan aus

Menu_1

SubMenu_1
  SubMenu_2
  SubMenu_3

Border hier fehlt

Vielleicht mit:

#linkslist ul {  
  border-bottom:1px solid #0000cc;  
}  

~~~»»  

> menu\_2  
> -------------  
  
oder:  
~~~css
#linkslist a {  
 /* das Bisherige und zusätzlich */  
 border-top:1px solid #0000cc;  
 margin-top:-1px;  
}  
#linkslist ul a{  
 /* das Bisherige und zusätzlich */  
 border-top:none;  
 margin-top:0;  
}  

Ich habe aber noch keine Vorstellung davon, wie das Menü dann im IE aussehen soll.

Auf Wiederlesen
Detlef

[Andreas]

Die Angegebenen Vorschläge passen nicht, aber ich habe es selbst gelöst.

Die Anmerkungen sind korrekt und werde mir dies zu Herzen nehmen

Danke

Hallo Andreas

So soll es aussehen:

Auch wenn das dein Borderproblem noch nicht löst, das HTML stimmt nicht.

<div id="linksmenu">
<ul id="linkslist">

<li><a href="#">Link1 Hauptmenü</a></li>

<li><a href="#">Link2 Hauptmenü</a></li>

<ul id="linkssublist">

UL darf nicht Kind von UL sein, die id ist auch nicht nötig, weil sie sich leicht über den Nachfahrenselektor ansprechen lässt.

<li><a href="#">Link1 Untermenü</a></li>
    <li><a href="#">Link2 Untermenü</a></li>
    <li><a href="#">Link3 Untermenü</a></li>
    <li><a href="#">Link4 Untermenü</a></li>
  </ul>

Oh, noch ein Hauptmenü?

<ul id="hauptmenue">

<li><a href="#">Link3 Hauptmenü</a></li>

</ul>
</div>

Meinst du so?

<div id="linksmenu">

<ul id="linkslist">
  <li><a href="#">Link1 Hauptmenü</a></li>
  <li><a href="#">Link2 Hauptmenü</a>
   <ul>
    <li><a href="#">Link1 Untermenü</a></li>
    <li><a href="#">Link2 Untermenü</a></li>
    <li><a href="#">Link3 Untermenü</a></li>
    <li><a href="#">Link4 Untermenü</a></li>
   </ul>
  </li>
  <li><a href="#">Link3 Hauptmenü</a></li>
</ul>
</div>

>   
>   
> >   
> >   
> > so sieht es momentan aus  
> > -------------  
> > Menu\_1  
> > -------------  
> >   SubMenu\_1  
> >   SubMenu\_2  
> >   SubMenu\_3  
> >   
> > Border hier fehlt  
>   
> Vielleicht mit:  
> ~~~css

#linkslist ul {  

>   border-bottom:1px solid #0000cc;  
> }  
> 

~~~»»  

> > menu\_2  
> > -------------  
>   
> oder:  
> ~~~css

#linkslist a {  

>  /* das Bisherige und zusätzlich */  
>  border-top:1px solid #0000cc;  
>  margin-top:-1px;  
> }  
> #linkslist ul a{  
>  /* das Bisherige und zusätzlich */  
>  border-top:none;  
>  margin-top:0;  
> }  
> 

Ich habe aber noch keine Vorstellung davon, wie das Menü dann im IE aussehen soll.

Auf Wiederlesen
Detlef

[Detlef G.]

Hallo Andreas

Die Angegebenen Vorschläge passen nicht, aber ich habe es selbst gelöst.

Würdest du bitte so freundlich sein, auch zu posten, was genau bzw. warum es nicht gepasst hat, und wie du es selbst gelöst hast.

In diesem Forum lesen viele mit, um zu lernen, da ist so eine Meldung nicht sehr hilfreich.

Auf Wiederlesen
Detlef