Menu CSS- Drop down - problem z dopasowaniem do layoutu Opcje

[Tao]

Witam!
Pobrałem z internetu kod menu w css. Wszystko ładnie pięknie menu działa jak należy lecz mam problem z edytowaniem jednego elementu w menu. Poniżej zamieszczę przykładowe menu i omówię gdzie znajduje sie mój problem.


kod html

Kod

<link rel="Stylesheet" type="text/css" href="test.css" />
<div id="wrap">
            <ul id="navbar">
                 <li><a href="#">&#187 Home</a>
                     <ul>
                        <li><a href="#">O Nas</a></li>
                        <li><a href="#">Ekipa</a></li>
                    </ul>
                 </li>
                <li><a href="#">Usługi</a>
                    <ul>
                       <li><a href="#">WWW</a></li>
                       <li><a href="#">Grafika</a></li>
                       <li><a href="#">Flash</a></li>
                       <li><a href="#">Cennik</a></li>
                    </ul>
                 </li>
                <li><a href="#">Realizacje</a>
                    <ul>
                       <li><a href="#">Strony www</a></li>
                       <li><a href="#">Grafika</a></li>
                       <li><a href="#">Flash</a></li>
                    </ul>
                 </li>
                <li><a href="#">Sklep</a>
                    <ul>
                       <li><a href="#">Strony www</a></li>
                       <li><a href="#">Layouty</a></li>
                       <li><a href="#">Skrypty</a></li>
                    </ul>
                 </li>
                <li><a href="#">Inne</a>
                    <ul>
                       <li><a href="#">Nasze portale</a></li>
                       <li><a href="#">Ventrilo</a></li>
                    </ul>
                 </li>
                 <li><a href="#">Kontakt</a></li>
            </ul>
        </div>

a tu CSS:

Kod

body {
   font: 62.5%/1.2 Verdana,  sans-serif;
    background-color: #161616;
}
#wrap {
   font-size: 13px;
   width: 960px;
   height: 30px;
   margin: 0 auto;
   background-color: white;
   position: relative; }

#navbar {
   margin: 0;
   padding: 0px;
   background-color: #3b3b3b; /*kolor tla pod menu*/
   height: 30px; }
#navbar li {
   list-style: none;
   float: left; }
#navbar li a {
   display: block;
   padding: 5px 20px; /* odstepy w menu   top - right*/
   background-color: #3b3b3b; /* kolor tla menu*/
   color: white; /*kolor tekstu*/
   text-decoration: none;
   }
#navbar li ul {
   display: none;
   width: 10em; /* Width to help Opera out */
   background-color:#3b3b3b;
   }
#navbar li:hover ul, #navbar li.hover ul {
   display: block;
   position: absolute;
   margin: 0;
   padding: 0; }
#navbar li:hover li, #navbar li.hover li {
   float: none; }
#navbar li:hover li a, #navbar li.hover li a {
    color: white; /*kolor tekstu w submenu  - mozna dodac  obramowaniania -    border-bottom: 1px solid white;*/
   }
#navbar li li a:hover {
   background-color: #ff4200; /*555555 kolor submenu po najechaniu mycha*/
   -moz-border-radius:5px; /*zaokraglone submenu*/
   }

Chce uzyskać efekt że jak najade myszka na napis Home to się podświetli jako zaokrąglony pomarańczowy prostokąt identycznie jak w submenu. Z góry dziekuje za wszelką pomoc bo mam problemy z css.(częsli kodu nie rozumiem w ogole ale jakimś cudem wy edytowałem go jako tako...) Przyklad: http://angryhornets.pl/test/css/menu.html

[Damonsson]

Nie możesz dać po prostu zamiast tego:

[CSS] pobierz, plaintext 
#navbar li li a:hover {
   background-color: #ff4200; /*555555 kolor submenu po najechaniu mycha*/
   -moz-border-radius:5px; /*zaokraglone submenu*/
   }
[CSS] pobierz, plaintext 

to:

[CSS] pobierz, plaintext 
#navbar a:hover {
   background-color: #ff0000; /*555555 kolor submenu po najechaniu mycha*/
   -moz-border-radius:5px; /*zaokraglone submenu*/
   }
[CSS] pobierz, plaintext 

albo jakbyś chciał inny kolor dla submenu to:

[CSS] pobierz, plaintext 
#navbar a:hover {
   background-color: #ff0000; /*555555 kolor submenu po najechaniu mycha*/
   -moz-border-radius:5px; /*zaokraglone submenu*/
   }
 
   #navbar li ul li a:hover {
   background-color: #00ff00; /*555555 kolor submenu po najechaniu mycha*/
   -moz-border-radius:5px; /*zaokraglone submenu*/
   }
[CSS] pobierz, plaintext 

PS. Moja Opera pozdrawia Twoje zaokrąglenia (IMG:style_emoticons/default/wink.gif)

PS2. Suprise drop-down menu nie jest fajne (IMG:style_emoticons/default/wink.gif)

PS3. Zleć to komuś skoro nie rozumiesz, no chyba, że strona ma być zapleczem pod firmę tworzącą strony, to byłoby trochę głupio (IMG:style_emoticons/default/wink.gif)

[Tao]

dziękuję ci bardzo! (IMG:style_emoticons/default/smile.gif)
Co do css ogolnie nie mam z nim "wielkich" problemów - nie rozumem tylko zapisów np.
#navbar li ul li a:hover - widze tu diva - znaczniki listy(i tu sie gubię) i i ze po najechaniu mychy ma się coś zmienić - jakbyś mógł wytłumaczyć ten zapis będę wdzięczny.

I drugie pytanko, czemu DD nie są fajne?

[Damonsson]

teoretycznie powinno być tak:
ul li ul li a:hover { bla bla bla }
czyli: element a, na który najedziemy myszką, znajdujący się w elemencie li, kolejno znajdujący się elemencie ul, kolejno znajdujący się w elemencie li, kolejno znajdujący się w elemencie ul.
Wszystkie te założenia muszą być spełnione.

Ale skoro pierwszemu ul nadałeś #id=navbar, to zamiast ul dajesz #navbar, czyli: #navbar(w domyśle ul) li ul li a:hover

można to łatwo sprawdzić w twoim kodzie HTML:

<ul id="navbar">
<li><a href="#">&#187 Home</a>
<ul>
<li>
<a href="#">O Nas</a>

Hmmm, dd nie są złe, po prostu służą do czego innego, ale żeby zgłębić dlaczego akurat tak, to musisz sam poszukać materiałów, bo ja się przyznam, że nie mam na to pytanie jednoznacznej i konkretnej odpowiedzi.