[CSS][HTML] Podświetlanie w menu Opcje

[--Karolina--]

Hejka,
Nie jestem w stanie sobie poradzić z menu w CSS. Mam takie menu http://jsfiddle.net/QLk5a/ chciałabym żeby niebieskie podkreślenie było równe szerokości napisu w głównym menu, a nie jak teraz czyli jest szersze niż napisy. Może ktoś mnie wspomóc?

Bardzo dziękuję.

[Kshyhoo]

Nadaj a a nie li.

[--Karolina--]

Jak rozumiem chodzi o ten kawałek?

[PHP] pobierz, plaintext 
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 90%;
  height: 0;
  position: absolute;
  bottom: 0;
  border-bottom: 5px solid #0774E8;
  margin-left: 10px;
}
 
#cssmenu > ul > li.active:after {
  content: '';
  display: block;
  width: 85%;
  height: 0;
  position: absolute;
  bottom: 0;
  border-bottom: 5px solid #0774E8;
  margin-left: 9px;
}
[PHP] pobierz, plaintext 

[--Karolina--]

Mogę mimo wszystko prosić o pomoc? Podpowiedź lub naprowadzenie na rozwiązanie problemu?

[trueblue]

Dlaczego masz dwa różne stylowania dla :hover i .active? Taki jest cel?

Ksyhoo już Ci podpowiedział, wedle tego:

[HTML] pobierz, plaintext 
#cssmenu > ul > li:hover>a {
...
}
 
#cssmenu > ul > li.active>a {
...
}
[HTML] pobierz, plaintext 

[--Karolina--]

Dlaczego dwa? Tak bo chciałam osiągnąć inne stylowanie głównego menu jak i submenu.

Natomiast wracając do mojego głównego problemu, trochę wyczyściłam kod, zmodyfikowałam zgodnie z radą i niestety nie działa http://jsfiddle.net/QLk5a/2/ (IMG:style_emoticons/default/sad.gif) Jeśli usunę pseudoelementy :after to menu całkowicie się rozjeżdża :/

[trueblue]

[HTML] pobierz, plaintext 
#cssmenu > ul > li:hover>a > span {
#cssmenu > ul > li.active>a > span {
  border-bottom: 5px solid #0774E8;
}
[HTML] pobierz, plaintext 

Ten post edytował trueblue 12.05.2014, 21:28:29

[--tomm--]

to usuń padding z "a":

[HTML] pobierz, plaintext 
#cssmenu a {
  ...
  line-height: 35px;
  padding: 0;
 ...
}
[HTML] pobierz, plaintext 

a nadaj go otaczającenu je "li"

[HTML] pobierz, plaintext 
#cssmenu > ul > li {
  float: left;
    padding: 0 10px;
}
[HTML] pobierz, plaintext