Spry Menüleiste in Dreamweaver anpassen

[Hanimoon]

Hallo zusammen,

ich habe eine horizontale Menüleiste die an 2 Stellen Untermenüs bzw. Unteruntermenüs.

Ich möchte eigentlich nur, dass die Untermenüs eine kleinere Schriftart haben als das Hauptmenü (also z.B. font-size: small)

Ich habe schon alle Kombi´s durch, aber irgendwie bekomme ich es nicht hin das nur das die Untermenüs kleiner dargestellt werden. An welcher Stelle des codes wird dies eingegeben?

Vielen Dank für eure Hilfe!
Hanimoon

Hier mein code:

ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    font-size: small;    
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

 

[threadi]

Ohne den HTML-Code dazu zu kennen, würde ich sagen du müsstest die Schriftart in

ul.MenuBarHorizontal ul a.MenuBarItemSubmenu

angeben.

Und verwende bitte Code-Tags wenn Du Quellcode im Forum zeigst.

 

[Hanimoon]

Wenn ich es an dieser Stelle Ändere, dann macht er mir die Schriftgröße des Übermenü welches ein untermenü hat kleiner. Hoffe das ist Verständlich? Die Untermenüpunkte sind immer noch in der selben schriftgröße. Kann es sein, dass ich eine neue Regel aufstellen muss, die nur die Untermenüs anspricht?

Ich hatte es mit

a.MenuBarItemSubmenu
{
font-size: small;
}

versucht, aber das gab überhaupt keine Veränderung.

Hier noch der HTML code

<div id="container">
  <div id="header">
    <h1>Haya Tour</h1>
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="../index.html">About us</a>      </li>
      <li><a href="../ourtours.html">Our Tours</a></li>
      <li><a class="MenuBarItemSubmenu" href="../schedules.html">Schedule</a>
        <ul>
          <li><a class="MenuBarItemSubmenu" href="#">Monthly Schedul</a>
            <ul>
<li><a href="../img/Monthly Schedule/Schedule_En_1.jpg">January</a></li>
              <li><a href="../img/Monthly Schedule/Schedule_En_2.jpg">February</a></li>
              <li><a href="../img/Monthly Schedule/Schedule_En_3.jpg">March</a></li>
              <li><a href="../img/Monthly Schedule/Schedule_En_4.jpg">April</a></li>
              <li><a href="../img/Monthly Schedule/Schedule_En_5.jpg">May</a></li>
              <li><a href="../img/Monthly Schedule/Schedule_En_6.jpg">June</a></li>
              <li><a href="../img/Monthly Schedule/Schedule_En_7.jpg">July</a></li>
              <li><a href="../img/Monthly Schedule/Schedule_En_8.jpg">August</a></li>
              <li><a href="../img/Monthly Schedule/Schedule_En_9.jpg">September</a></li>
              <li><a href="../img/Monthly Schedule/Schedule_En_10.jpg">October</a></li>
              <li><a href="../img/Monthly Schedule/Schedule_En_11.jpg">November</a></li>
              <li><a href="../img/Monthly Schedule/Schedule_En_12.jpg">December</a></li>
            </ul>
          </li>
          <li><a href="../img/Seasonal Schedule/Schedule_En_Seasonal.pdf">Seasonal Schedule</a></li>
</ul>
      </li>
      <li><a href="../gallery.html" class="MenuBarItemSubmenu">Gallery</a>
        <ul>
          <li><a href="#">Driyiah</a></li>
          <li><a href="#">Al Ghat</a></li>
          <li><a href="#">Al Zulfi</a></li>
          <li><a href="#">Camel Festival</a></li>
          <li><a href="#">Abha</a></li>
          <li><a href="#">Al Qatif</a></li>
          <li><a href="#">Al Qasim</a></li>
          <li><a href="#">Al Hasa</a></li>
          <li><a href="#">Madain Saleh</a></li>
          <li><a href="#">Mratt</a></li>
          <li><a href="#">Riyadh City Tour</a></li>
          <li><a href="#">Shagra</a></li>
          <li><a href="#">Al Majmaah</a></li>
        </ul>
      </li>
      <li><a href="../contact.html">Contact us</a></li>
    </ul>
  <!-- end #header --></div>

 

[threadi]

Welches Untermenü meinst Du jetzt genau?

Einige Beispiele anhand deines HTML-Codes:

Das gilt z.B. für "About us" aber auch alle darunter liegenden Menüpunkte, z.B. "Monthly Schedul":

#MenuBar1 a {}

Das gilt z.B. für "Monthly Schedul" aber auch alle darunter liegenden Menüpunkte, z.B. "February":

#MenuBar1 ul a {}

Das hier gilt einzig für Menüpunkte mit der Klasse "MenuBarItemSubmenu", z.B. "Monthly Schedul"

#MenuBar1 a.MenuBarItemSubmenu {}

Das gilt z.B. für "February":

#MenuBar1 ul ul a {}

Tipps:
Für so ein Menü brauchst Du eigentlich keine extra Klassen wie "MenuBarItemSubmenu". Wie man an meinen Beispielen oben sieht, kann man die Angaben auch ausgehend von der ID des Menüs machen. Dadurch ist die Schreibweise etwas kürzer, allerdings vererben sich die Regeln auch automatisch an Elemente die weiter unten liegen. Das kann bei manchen Menüs und manchen Eigenschaften von Vorteil sein, bei anderen nicht.

Die Angabe "font-size: small;" würde ich nicht verwenden. Gib lieber einen px- (für feste Größen) oder em-Wert (für variable Größen) an.

Verwende die Erweiterung Firebug im Firefox oder Chrome um die Wirksamkeit deiner CSS-Regeln zu überprüfen. Dort kannst Du auch direkt im Browser testen was wirkt und was nicht. Gleiches geht auch in Opera und IE nur mit anderen Entwicklerwerkzeugen.

 

[Hanimoon]

Also im Prinzip will ich das: About us, Our Tours, Schedule, Gallery und Kontakt z.B. Schriftgröße 16 haben und das die Untermenüs: Monthly Schedule, Season, Schedule, Januar....., und Driyiah....., die Schriftgröße 14 haben.

Wenn ich allerdings was ändere ändert sich immer nur das Hauptmenü (also z.B. Schedule und Gallery) die Untermenüs bleiben gleich.

 

[threadi]

Wenn Du es nach o.g. Schema änderst, sollte es eigentlich klappen. Es sei denn Du hast in deiner Seite noch irgendwelche CSS-Eigenschaften die diese Angaben überschreiben. Das kann ich natürlich ohne Link zur Seite nicht wissen. Und wie gesagt solltest Du im Firebug sehen können, welche Eigenschaften wo wirken.