Как сделать так, чтобы ссылка оставалась активной в CSS?

Question

По сути, я хочу, чтобы при нахождении на этом сайте ссылка была активной Я надеюсь, что я объясняю это правильно. Когда вы посещаете эту конкретную страницу, за ссылкой должен быть фон.

Вот код для HTML:

<div class="menudiv">
<div id="menu">
    <ul id="menu">
      <li><a href="?p=start"><span>Hem</span></a></li>
      <li><a href="?p=omoss"><span>Om oss</span></a></li>
      <li><a href="?p=tjanster"><span>Tjänster</span></a></li>
      <li><a href="?p=referenser"><span>Referenser</span></a></li>
      <li><a href="?p=kontakt"><span> Kontakt</span></a></li>
    </ul>
  <div class="clr"></div>
  </div>
  </div>

А вот и CSS:

#menu { float:right; padding:23px 0 0 0; margin:0; width:420px; height:35px;}
#menu ul { text-align:right; padding:0; margin:0; list-style:none; border:0; height:35px;}
#menu ul li { float:left; margin:0; padding:0 5px; border:0; height:35px;}
#menu ul li a { float:left; margin:0; padding:10px 0; color:#5c8783; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none;}
#menu ul li a span { padding:10px 13px; background:none;}
#menu ul li a:hover { background:url(images/r_menu.gif) right no-repeat;}
#menu ul li a:hover span { background:url(images/l_menu.gif) left no-repeat;}
#menu ul li a:active { background:url(images/r_menu.gif) right no-repeat;}
#menu ul li a:active span{ background:url(images/l_menu.gif) left no-repeat;}

Answer 1

Добавьте класс CSS для этой ссылки (например, <a class="CurrentPage">), затем примените селектор к этому классу (например, #menu ul li a:active, a.CurrentPage)

Answer 2

Что вам в основном нужно, так это добавить класс css к тегу в вашем меню. пример:

<li><a href="?p=start" class="currentPage"><span>Hem</span></a></li>

добавьте стиль в свой класс currentPage в соответствии с дизайном, который вы хотите для этого пункта меню

Теперь ваша страница должна быть динамичной, чтобы вы могли установить класс currentPage css для текущего пункта меню, в котором пользователь в данный момент просматривает

пример:

<li><a href="?p=start" class="<?php if(/**check if the user is in this link/menu item**/) echo "currentPage"; ?>" ><span>Hem</span></a></li>

Answer 3

вы даете тот же идентификатор:

  <div id="menu">
     <ul id="menu">

что не так

Вы должны сделать разные идентификаторы.

Answer 4

Насколько я знаю, свойство hover должно ставиться последним в CSS (под активным и другими) для правильной работы.