Выделение навигационной панели для текущей страницы ⇐ Html

[Anonymous]

Мне было интересно, как бы я добавил возможность выделять поле выделения на панели навигации на странице, на которой вы сейчас находитесь. Вы знаете, чтобы люди знали, на какой странице они находятся.

Очень похоже на этот сайт с белым полем на активной странице: https://woodycraft.net/home/

Вот CSS для моей панели навигации:

/*TOP NAV BAR SECTION*/

*{margin: 0px;
padding: 0px;}

#nav_bar {background-color: #a22b2f;
box-shadow: 0px 2px 10px;
height: 45px;
text-align: center;}

#nav_bar > ul > li {display: inline-block;}

#nav_bar ul > li > a {color: white;
display: block;
text-decoration: none;
font-weight: bold;
padding-left: 10px;
padding-right: 10px;
line-height: 45px;}

#nav_bar ul li ul {display: none;
list-style: none;
position: absolute;
background: #e2e2e2;
box-shadow: 0px 2px 10px;
text-align: left;}

#nav_bar ul li a:hover {background: #8e262a;}

#nav_bar a:active {background: white;}

#nav_bar ul li:hover ul {display: block;}

#nav_bar ul li ul li a {color: #252525;
display: block;}

#nav_bar ul li ul li a:hover {background: #4485f5;
color: #fff;}


Вот HTML-код одной из моих страниц:

• Home
• Status
• Info
• Gamemodes
  
  Survival
• Pure-PVP
• Gamesworld

[*]Rules
[*]Vote
[*]Contact




Подробнее здесь: https://stackoverflow.com/questions/268 ... rrent-page