/* Start:/bitrix/templates/inner/components/bitrix/menu/top_menu2/style.css*/
/**Top menu**/
#horizontal-multilevel-menu,
#horizontal-multilevel-menu ul {
	margin: 0;
	padding: 0;
	background: #BC262C url(/bitrix/templates/inner/components/bitrix/menu/top_menu2/images/header_menu_bg.gif) repeat-x;
	min-height: 27px;
	width: 100%;
	list-style: none;
	font-size: 11px;
	float: left;
	/*font-size:90%*/
}

#horizontal-multilevel-menu {}

/*Links*/
#horizontal-multilevel-menu a {
	display: block;
	padding: 5px 10px;
	/*padding:0.3em 0.8em;*/
	text-decoration: none;
	text-align: center;
}

#horizontal-multilevel-menu li {
	float: left;
}

/*Root items*/
#horizontal-multilevel-menu li a.root-item {
	color: #fff;
	font-weight: bold;
	padding: 7px 12px;
}

/*Root menu selected*/
#horizontal-multilevel-menu li a.root-item-selected {
	background: #fc8d3d;
	color: #fff;
	font-weight: bold;
	padding: 7px 12px;
}

/*Root items: hover*/
#horizontal-multilevel-menu li:hover a.root-item,
#horizontal-multilevel-menu li.jshover a.root-item {
	background: #e26336;
	color: #fff;
}

/*Item-parents*/
#horizontal-multilevel-menu a.parent {
	background: url(/bitrix/templates/inner/components/bitrix/menu/top_menu2/images/arrow.gif) center right no-repeat;
}

/*Denied items*/
#horizontal-multilevel-menu a.denied {
	background: url(/bitrix/templates/inner/components/bitrix/menu/top_menu2/images/lock.gif) center right no-repeat;
}

/*Child-items: hover*/
#horizontal-multilevel-menu li:hover,
#horizontal-multilevel-menu li.jshover {
	background: #D6D6D6;
	color: #fff;
}

/*Child-items selected*/
#horizontal-multilevel-menu li.item-selected {
	background: #D6D6D6;
	color: #fff;
}

/*Sub-menu box*/
#horizontal-multilevel-menu li ul {
	position: absolute;
	/*top:-999em;*/
	top: auto;
	display: none;
	z-index: 500;

	height: auto;
	/*width:12em;*/
	width: 135px;
	background: #F5F5F5;
	border: 1px solid #C1C1C1;
}

/*Sub-menu item box*/
#horizontal-multilevel-menu li li {
	width: 100%;
	border-bottom: 1px solid #DEDEDE;
}

/*Item link*/
#horizontal-multilevel-menu li ul a {
	text-align: left;
}

/*Items text color & size */
#horizontal-multilevel-menu li a,
#horizontal-multilevel-menu li:hover li a,
#horizontal-multilevel-menu li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover li a {
	color: #4F4F4F;
	font-weight: bold;
}

/*Items text color & size: hover*/
#horizontal-multilevel-menu li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover a,
#horizontal-multilevel-menu li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover a,
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover a #horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover a #horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover li.jshover a {
	color: #4F4F4F;
}

#horizontal-multilevel-menu li ul ul {
	margin: -27px 0 0 132px;
	/*margin:-1.93em 0 0 11.6em;*/
}

#horizontal-multilevel-menu li:hover ul ul,
#horizontal-multilevel-menu li.jshover ul ul,
#horizontal-multilevel-menu li:hover ul ul ul,
#horizontal-multilevel-menu li.jshover ul ul ul,
#horizontal-multilevel-menu li:hover ul ul ul ul,
#horizontal-multilevel-menu li.jshover ul ul ul ul,
#horizontal-multilevel-menu li:hover ul ul ul ul ul,
#horizontal-multilevel-menu li.jshover ul ul ul ul ul {
	/*top:-999em;*/
	display: none;
}

#horizontal-multilevel-menu li:hover ul,
#horizontal-multilevel-menu li.jshover ul,
#horizontal-multilevel-menu li li:hover ul,
#horizontal-multilevel-menu li li.jshover ul,
#horizontal-multilevel-menu li li li:hover ul,
#horizontal-multilevel-menu li li li.jshover ul,
#horizontal-multilevel-menu li li li li:hover ul,
#horizontal-multilevel-menu li li li li.jshover ul,
#horizontal-multilevel-menu li li li li li:hover ul,
#horizontal-multilevel-menu li li li li li.jshover ul {
	/*z-index:1000;
	top:auto;*/
	display: block;
}

div.menu-clear-left {
	clear: left;
}

.root-item-selected a span {

	color: #004a92;
	font-weight: bold;

}




.item-selected a span {

	color: #004a92 !important;
	font-weight: bold;
}
.breadcrumbs li:last-child a{
	color: #135d99 !important;
	pointer-events: none;
}

Отличная задача. Грамотно оформленные «хлебные крошки» (breadcrumbs) не только улучшают внешний вид сайта, но и делают навигацию гораздо удобнее для пользователя.

Я подготовил для вас современный CSS-код. Он уберет стандартные точки списка, выстроит элементы в одну линию с помощью Flexbox, добавит аккуратные разделители и настроит плавные эффекты при наведении (hover).

Вот готовое решение:

HTML
Ваш исходный код я оставил без изменений, только отформатировал для удобства чтения:

HTML
<ul class="breadcrumbs" title="Двойной щелчок - Редактировать параметры компонента">
  <li><a href="/" title="Главная">Главная</a></li>
  <li><a href="/project/" title="Наши работы">Наши работы</a></li>
  <li><a href="/project/sovremennye-avtomobili/" title="Современные автомобили">Современные автомобили</a></li>
</ul>
CSS
Добавьте этот код в ваш файл стилей:

CSS
/* Базовый контейнер */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none; /* Убираем стандартные маркеры списка */
  padding: 12px 20px;
  margin: 0;
  background-color: #f8fafc; /* Светло-серый фон */
  border-radius: 8px; /* Скругленные углы */
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Легкая тень для объема */
}

/* Выравнивание элементов внутри списка */
.breadcrumbs li {
  display: flex;
  align-items: center;
}

/* Стилизация ссылок */
.breadcrumbs a {
  text-decoration: none;
  color: #3b82f6; /* Приятный синий цвет */
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease-in-out; /* Плавность анимации */
}

/* Hover-эффекты (при наведении курсора) */
.breadcrumbs a:hover {
  color: #1d4ed8; /* Текст становится темнее */
  background-color: #e0e7ff; /* Появляется легкий фоновый цвет */
  text-decoration: none;
}
.main .breadcrumbs li + li:before {
	margin: 0 !important;
}
.main .breadcrumbs span {
	padding: 4px 8px;
}
/* Стили для последней (текущей) страницы */
.breadcrumbs li:last-child a {
  color: #64748b; /* Приглушенный серый цвет текста */
  font-weight: 400;
  pointer-events: none; /* Делает ссылку некликабельной (мы и так на этой странице) */
  background-color: transparent; /* Убираем фон при наведении, если он случайно сработает */
}
#menu li li a {
	padding-left: 15px;
	font-weight: 400;
	color: #fff;
	text-shadow: none;
	border-top: dotted 1px transparent;
	border-bottom: dotted 1px transparent;
	transition: all .15s linear;
}

#menu li li a:hover {

	color: #004a92;
	font-weight: bold;
	border-top: dotted 1px rgba(255, 255, 255, .15);
	border-bottom: dotted 1px rgba(255, 255, 255, .15);
	background: rgba(0, 223, 252, .02);
}


#container {
	margin: auto auto;
	width: 962px;
}



#menu:after {
	width: 100%;
	height: 0px;
	visibility: hidden;
	overflow: hidden;
	content: '';
	display: inline-block;
}

#menu {
	text-align: center;
	margin-top: 10px;
	/* Обнуляем для родителя*/
	line-height: 0;
	font-size: 1px;
	/* 1px для Opera */

	/* Лекарство для IE6-7*/
	text-justify: newspaper;
	zoom: 1;


}


#menu li+li+li+li+li {

	padding-right: 0;

}

#menu,
#menu ul {
	list-style: none;

}

#menu>li {

	/*float: left;
		position: relative;
		overflow: visible;
		perspective: 1000px;
		display: inline-block;
		line-height: normal;*/
	-webkit-perspective: 1000px;
	position: relative;
	perspective: 1000px;
	z-index: 40;
	display: inline-block;
	text-align: left;

	/* Востанавливаем у потомков, кроме последнего*/
	line-height: normal;

	/* Без него в Opera будет отступ под элементами */
	vertical-align: top;

	/* эмуляция inline-block для IE6-7*/
	//display : inline;
	//zoom : 1;


}



#menu a {

	display: block;
	position: relative;
	z-index: 10;
	padding: 13px 13px 13px 13px;
	text-decoration: none;
	color: #135e99;
	line-height: 1;
	font-weight: 400;
	font-size: 17px;
	letter-spacing: -.05em;
	background: transparent;
	text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
	transition: all .25s ease-in-out;
	-webkit-transition: all .25s ease-in-out;
}

#menu>li:hover>a {
	background: #135e99;
	color: #fff;
	text-shadow: none;
}

#menu li ul {
	position: absolute;
	left: 0;
	z-index: 1;
	width: 300px;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	background: transparent;
	overflow: hidden;
	transform-origin: 50% 0%;
	-webkit-transform-origin: 50% 0%;
}

#menu li:hover ul {

	padding: 15px 0;
	background: #135e99;
	opacity: 1;
	visibility: visible;
	box-shadow: 1px 1px 7px rgba(0, 0, 0, .5);
	animation-name: swingdown;
	animation-duration: 1s;
	animation-timing-function: ease;
	-webkit-animation-name: swingdown;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: ease;
}

#menu>li>ul.two-cols {
	width: 500px;
}

#menu>li>ul.two-cols>.col {
	width: 48%;
	margin: 0 1%;
}

#menu>li>ul.two-cols>.col-left {
	float: left;
}

#menu>li>ul.two-cols>.col-right {
	float: right;
}

#menu>li>ul>li>ul {
	display: none;
}

@keyframes swingdown {
	0% {
		opacity: .99999;
		transform: rotateX(90deg);
		-webkit-opacity: .99999;
		-webkit-transform: rotateX(90deg);
	}

	30% {
		transform: rotateX(-20deg) rotateY(5deg);
		animation-timing-function: ease-in-out;
		-webkit-transform: rotateX(-20deg) rotateY(5deg);
		-webkit-animation-timing-function: ease-in-out;
	}

	65% {
		transform: rotateX(20deg) rotateY(-3deg);
		animation-timing-function: ease-in-out;
		-webkit-transform: rotateX(20deg) rotateY(-3deg);
		-webkit-animation-timing-function: ease-in-out;
	}

	100% {
		transform: rotateX(0);
		animation-timing-function: ease-in-out;
		-webkit-transform: rotateX(0);
		-webkit-animation-timing-function: ease-in-out;
	}
}

#menu li li.item-selected a {
	color: #004a92;
	font-weight: bold;
	border-top: dotted 1px rgba(255, 255, 255, .15);
	border-bottom: dotted 1px rgba(255, 255, 255, .15);
	background: rgba(0, 223, 252, .02);
}
/* End */



/* Start:/bitrix/templates/inner/components/bitrix/breadcrumb/breadcrumb/style.css*/
ul.breadcrumb-navigation
{
	padding:0; margin:0;
	padding-top:4px;
	list-style:none;
}

ul.breadcrumb-navigation li
{
	display:inline;
}

ul.breadcrumb-navigation a
{
	
}

ul.breadcrumb-navigation span
{
	
}
/* End */



/* Start:/bitrix/templates/inner/components/bitrix/menu/footer_menu/style.css*/
/* Left menu*/
ul.left-menu
{
	list-style:none;
	margin:0; padding:0;
	margin-bottom:8px;
	position: relative; /*IE bug*/
}

ul.left-menu li
{
	padding: 10px 16px;
	background:#F5F5F5 url(/bitrix/templates/inner/components/bitrix/menu/footer_menu/images/left_menu_bg.gif) top repeat-x;
}

ul.left-menu li a
{
	font-size:100%;
	color:#BC262C;
	font-weight:bold;
	text-decoration:none;
}

ul.left-menu li a:visited
{
	color:#BC262C;
}

ul.left-menu li a:hover
{
	color:#BC262C;
}


ul.left-menu li a.selected:link, 
ul.left-menu li a.selected:visited, 
ul.left-menu li a.selected:active, 
ul.left-menu li a.selected:hover
{
	color:#FC8D3D;
}



/* End */



/* Start:/bitrix/templates/inner/styles.css*/
.image_border{
		border: 5px solid #F4F4F4;
                margin: 6px;
	}
.p_zero{
                font-size: 14px;
		margin: 0 0;
		color: #4f4f4f;
		line-height: 18px;
}
/* End */
/* /bitrix/templates/inner/components/bitrix/menu/top_menu2/style.css */
/* /bitrix/templates/inner/components/bitrix/breadcrumb/breadcrumb/style.css */
/* /bitrix/templates/inner/components/bitrix/menu/footer_menu/style.css */
/* /bitrix/templates/inner/styles.css */