Mousover/hover Anzeigeproblem

[ewaldo]

Liebe Forumsmitglieder,

ich habe auf meiner Website http://www.schach-wolfsberg.at/startseite.html in der horizontalen Navigation ein wahrscheinlich kleines CSS Problem, dass ich aber partou nicht lösen kann.

Wenn ich mit dem Mauszeiger über "Information" fahre, klappte das level_2 Menü auf, welches in der Buttonlänge mit der Hintergrundfarbe nach rechts bündig abschließt. Da sich die Länge der Buttons nach der Länge des Buttontextes richtet, welches auch durchaus beabsichtigt ist (entnommen aus dem Buch "Websites erstellen mit Contao" von Peter Müller) hätte ich nun gerne das sich der hover Effekt mit der dunklen Farbe bei allen Unterbuttons rechtsbündig wie die Hintergrundfarbe anpasst.

Beim Button "Tourist" erscheint die dunkle Farbe im hover Effekt nur in der Länge des Buttons, der Rest bleibt in der Hintergrundfarbe. Da ich (noch) kein CSS Profi bin, weiß ich einfach nicht, an welcher Schraube ich hier drehen muss, damit sich der oben beschriebene Effekt einstellt.

Vielen Dank schon im voraus für eure Hilfestellungen

LG
ewaldo

Anbei der navigation.css Code:

@media screen {

/* ====================================
   Horizontale Navigation – Erste Ebene 
   ==================================== */
#header .mod_navigation {
  background: #f1cf74;
  color: #000;
  padding: 0 18px;
  margin-top: 4px;  
}

#header .mod_navigation ul {
  float: left;
  width: auto; /* schrumpft die Liste */
  margin-bottom: 0;
}

#header .mod_navigation li {
  float: left;
  width: auto; /* schrumpft die Listenelemente */
  list-style-type: none;
  border-right: 2px solid #fefce6; /* Trennstriche rechts */
  margin: 0 ;
}

#header .mod_navigation li.first {
  border-left: 2px solid #fefce6; /* Trennstrich am Anfang */
}

#header .mod_navigation a,
#header .mod_navigation span {
  display: block;
  min-width: 78px;
  background-color: transparent; color: #000;
  text-align: center; text-decoration: none;
  padding: 8px;
}

#header .mod_navigation .active,
#header .mod_navigation .trail {
  background-color:#ac1f21; color: #fff;
}

#header .mod_navigation a:hover,
#header .mod_navigation a:focus {
  background-color: #ac1f21; color: #fff;
}

/*====================================
Horizontale Navigation - Zweite Ebene
=====================================*/
/* Möglichkeit 1:  Zwei horizontale Ebenen*/
#container {
	padding-top: 1.5em;
}
#header ul.level_2 {
	position: absolute;
	left: auto;
	top: auto;
	background-color: #ac1f21;
}
#header .level_2 li,
#header .level_2 li.first { border: none; }

/*Möglichkeit 2: Dropdown-Navigation */
/* Listenelemente zweite Ebene untereinander */
#header .level_2 li {
	clear: both;
	border-top: 2px solid #fefce6;
}

/*Zweite Ebene ausblenden*/
#header .level_2 {
	position: relative;
	left: -9999px;
	top: -9999px;
	overflow: hidden;
	display: inline;
	width: 0;
	height: 0;
	z-index: 1; /* "nach vorne", über den Inhaltsbereich */
}

/* Zweite Ebene bei Mouseover einblenden */
#header li:hover .level_2 {
	left: auto;
	top: auto;
	overflow: auto;
	display: block;
	width: auto;
	min-width: 78px;
	height: auto;
	background-color: #F1CF74;
	border-top: 2px solid #fefce6; 
}

#header .level_2 li a { text-align: left; }


/* ==============
   Metanavigation Header   
   ============== */
#header .mod_customnav  {
position: absolute; 
right: 18px; 
top: -32px; 
font-size: 12px; 
}
#header .mod_customnav li {
  float: left;
  width: auto;
  list-style-type: none;
  margin: 0 ;
  
}
#header .mod_customnav a,
#header .mod_customnav span {
  display: block;
  text-decoration: none;
  color: #fff;
  padding: 3px ;
  margin-left: 9px;
}
#header .mod_customnav a:hover,
#header .mod_customnav a:focus {
  margin-top:1px;
  background: #F1CF74;
  color: #000;
}
#header .mod_customnav span.active {
  background-color: #F1CF74;
  color: #000;
  margin-top: 0px;
 
}

/* =================
   Sitemap gestalten
   ================= */
.mod_sitemap ul ul { margin-bottom: 0; }

.mod_sitemap li {
  list-style-type: none;
  margin-left: 0; /* 1. Ebene ohne Einzug links */
}
.mod_sitemap li li { margin-left: 1.5em; } /* linker Einzug */

.mod_sitemap a { text-decoration: none; }
.mod_sitemap .level_1 a { font-weight: bold; }
.mod_sitemap .level_2 a { font-weight: normal; }

} /* Ende @media */

[bizon]

Kleine Änderung

#header .level_2 li {
    border-top: 2px solid #FEFCE6;
    clear: both;
    float: none;
}

[ewaldo]

Vielen vielen Dank,

funzt perfekt!

Gruß ewaldo