CSS Hover Menü in Höhe anpassen

[selfmade]

Hallo
habe hier folgendes fertiges auf css basierendes hover Nav-Menü gefunden und dieses bei mir eingebaut.
Funktioniert eigentlich einwandfrei.
Ich möchte nur von den Hauptbuttons die Hintergrundfarbe ändern und die gesamte Menübreite (nicht den eigentlichen Button) auch in ihrer Höhe ändern.
Finde dazu aber rein gar nichts wo ich ansetzen könnte.
Ich vermute es könnte beim div und der dortigen Angabe wrapper liegen.

Kann mir dazu jemand helfen?

Gruß Jürgen

hier das stylesheet

  
  
/*nav-Menü*/  
nav {  
    width: 960px;  
}  
nav ul {  
    padding: 0px;  
    margin: 0px;  
  
    box-shadow: 2px 2px 2px #dfdfdf;  
    -moz-box-shadow: 2px 2px 2px #dfdfdf;  
    -webkit-box-shadow: 2px 2px 2px #dfdfdf;  
}  
  
nav ul:after {  
    clear: both;  
    content: " ";  
    display: block;  
    font-size: 0;  
    height: 0;  
    visibility: hidden;  
}  
  
nav ul,nav ul li{  
    background-color: #FAFAFA;  
}  
nav ul li {  
    list-style: none;  
    float:left;  
  
    border-right: 1px solid #dfdfdf;  
}  
nav ul li a {  
    text-decoration: none;  
    display: block;  
    color: #333;  
    padding: 14px 34px 14px 34px;  
  
    transition: background 0.3s ease-out; /* explorer 10 */  
    -webkit-transition: background 0.3s ease-out; /* chrome & safari */  
    -moz-transition: background 0.3 ease-out; /* firefox */  
    -o-transition: background 0.3 ease-out; /* opera */  
}  
nav  li.cat1:a, nav ul li.cat1: > ul li a{  
    background-color: #E6DD00;  
}  
  
  
nav ul li.cat1:hover a, nav ul li.cat1:hover > ul li a  {  
    background-color: #E6DD00;  
}  
nav ul li.cat2:hover a, nav ul li.cat2:hover > ul li a  {  
    background-color: #8CB302;  
}  
nav ul li.cat3:hover a, nav ul li.cat3:hover > ul li a {  
    background-color: #008C74;  
}  
nav ul li.cat4:hover a, nav ul li.cat4:hover > ul li a {  
    background-color: #004C66;  
}  
nav ul li.cat5:hover a, nav ul li.cat5:hover > ul li a {  
    background-color: #332B40;  
}  
  
nav ul li:hover > a {  
    color: #FAFAFA;  
}  
nav ul li:hover > ul {  
    visibility: visible;  
}  
  
nav ul li ul{  
    display: inline;  
    visibility: hidden;  
    position: absolute;  
    padding:0px;  
}  
nav ul li ul li{  
        float: none;  
}  
nav ul li ul li a {  
    color: #FAFAFA;  
}  
nav ul li ul li a:hover{  
        color: #333;  
        background-color: #FAFAFA !important;  
}  
/* bis hier gehört alles zum Nav-Menü */  
  
  
table.addroom, td, tr{  
	margin: 0;  
	border-spacing: 0;  
	border-collapse: collapse;  
	border-width: 1px;  
	border-style: solid;  
	padding: 0;  
	border-color: 1px #332B40;  
	caption-side:left;  
	/*border:  1pix #332B40;*/  
}

hier der zugehörige html-code

<div id = "wrapper" >  
        <nav>  
			<ul>  
                <li class = "cat5">  
                <a href="/index.php">Typ</a>  
					<ul>  
						<li><a href="#">Übersicht</a></li>  
						<li><a href="#">anlegen/ändern</a></li>  
					</ul>  
                </li>  
                <li class = "cat3">  
                <a href="#">Becken2</a>  
					<ul>  
						<li><a href="#"> Übersicht</a></li>  
						<li><a href="#"> anlegen/ändern</a></li>  
					</ul>	  
                </li>  
				<li class = "cat2">  
                <a href="/index.php">Becken</a>  
					<ul>  
						<li><a href="#">Becken Übersicht</a></li>  
						<li><a href="#">Becken anlegen/ändern</a></li>  
					</ul>  
                </li>  
                <li class = "cat5">  
                <a href="#">Becken Typ</a>  
					<ul>  
						<li><a href="#">Übersicht</a></li>  
						<li><a href="#">anlegen/ändern</a></li>  
					</ul>  
                </li>  
			</ul>  
		</nav>  
	</div>

[Matthias Apsel]

Om nah hoo pez nyeetz, selfmade!

Kann mir dazu jemand helfen?

Damit nicht jeder sich erst das Beispiel zusammenbasteln muss, wäre ein online-Beispiel hilfreich. Deshalb gibt es nur Hinweise, die sich beim Überfliegen ergeben.

box-shadow: 2px 2px 2px #dfdfdf;

-moz-box-shadow: 2px 2px 2px #dfdfdf;
    -webkit-box-shadow: 2px 2px 2px #dfdfdf;

  
die präfixe sind nicht mehr nötig. <http://caniuse.com/css-boxshadow> und wenn, dann immer zuerst die browserspezifischen Angaben  
  
~~~css
»» nav  li.cat1:a, nav ul li.cat1: > ul li a{  

>     background-color: #E6DD00;

cnp-Fehler?

hier der zugehörige html-code

<div id = "wrapper" >

<nav>

Der Wrapper ist ganz sicher nicht notwendig.  
  
  
Matthias

-- 
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Spin und Spinat](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=S#spin).  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  

[selfmade]

»» nav  li.cat1:a, nav ul li.cat1: > ul li a{

background-color: #E6DD00;

>   
> cnp-Fehler?  
>   
> > hier der zugehörige html-code  
> > ~~~html

<div id = "wrapper" >  

> >         <nav>

Der Wrapper ist ganz sicher nicht notwendig.

Matthias

Hallo,
Vielen Dank erstmal das Du mir wieder hilfst.
Sorry aber das mit dem slowakisch habe ich nicht verstanden :(

ok. den wrapper habe ich draussen...
jetzt ist die navigation endlich normal (normal Größe ohne diese lästige Umrandung)

das mit dem cnp-fehler habe ich nicht verstanden.. was meinst Du damit?
Beispiel?

die Menüs sind immer noch weiß nur beim hover wechseln sie wie vorgegeben die Farbe.
Ich möchte die Menüs jedoch in ihrer Standard-farbe also ohne hover farblich anpassen

Kannst Du mir sagen was ich dazu machen muss?

Gruß Jürgen

[Matthias Apsel]

Om nah hoo pez nyeetz, selfmade!

»» nav  li.cat1:a, nav ul li.cat1: > ul li a{

background-color: #E6DD00;

> >   
> > cnp-Fehler?  
> das mit dem cnp-fehler habe ich nicht verstanden.. was meinsthDu  
  
cnp = copy and paste  
  
Der Selektor ist fehlerhaft. Es gibt keine Pseudoklasse a und der Doppelpunkt darf auch nicht allein stehen.  
  
  
Matthias

-- 
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [GUI und Guinan](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=G#gui).  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  

[selfmade]

Om nah hoo pez nyeetz, selfmade!

»» nav  li.cat1:a, nav ul li.cat1: > ul li a{

background-color: #E6DD00;

> > >   
> > > cnp-Fehler?  
> > das mit dem cnp-fehler habe ich nicht verstanden.. was meinsthDu  
>   
> cnp = copy and paste  
>   
> Der Selektor ist fehlerhaft. Es gibt keine Pseudoklasse a und der Doppelpunkt darf auch nicht allein stehen.  
>   
>   
> Matthias  
  
komisch  
  
wow, Du hattest recht.  
Ich hatte tatsächlich den Eintrag in meiner stylesheet doppelt und falsch.  
habe ihn berichtigt.  
  
nur wie bekomme ich im Menü die Standardfarbe weiß weg  
beim hover kann ich die Farben ändern das geht. Ich weiss nur nicht wie ich die nav-leisten-buttons deren backgroundfarbe ändern kann  
  
  
  

[selfmade]

hallo,

habe es gefunden bzw...
wenn ich
die Zeile

nav ul,nav ul li{
    background-color: #E6DD00;
}
ändere dann habe ich in allen buttons eine andere Farbe

was muss ich machen das jeden Butto in der nav-leiste eine andere Farbe gebe?

Gruß Jürgen

[Matthias Apsel]

Om nah hoo pez nyeetz, selfmade!

was muss ich machen das jeden Butto in der nav-leiste eine andere Farbe gebe?

die Seite online stellen. Beispielsweise bei bplaced.net.

Matthias

[selfmade]

Om nah hoo pez nyeetz, selfmade!

was muss ich machen das jeden Butto in der nav-leiste eine andere Farbe gebe?

die Seite online stellen. Beispielsweise bei bplaced.net.

Matthias

ich habe sie lokal.
kannst Du es mir so nicht erklären?

Jürgen

[Vertreter vom Linksetzer]

ich habe sie lokal.
kannst Du es mir so nicht erklären?

Und warum kannst du dir nicht die minimale Mühe machen,hier oder hier oder hier deinen Code einzusetzen? Was ist so schwer daran? Ein bischen was musst du schon auch machen, wenn du Hilfe willst!

[selfmade]

ich habe sie lokal.
kannst Du es mir so nicht erklären?

Und warum kannst du dir nicht die minimale Mühe machen,hier oder hier oder hier deinen Code einzusetzen? Was ist so schwer daran? Ein bischen was musst du schon auch machen, wenn du Hilfe willst!

super danke für die Links.

ich kannte sowas gar nicht
werde ich morgen gleich mal meinen code posten
melde mich dann wieder

Danke nochmal