Как сверстать такой блок?

Question

[HelenaS]

Добрый день!

Пытаюсь сверстать такой блок


Цифру(картинка) подключаю как background. При этом рамка блока почему перечеркивает большую цифру и и если я даю хувер на блок, то он закрывает цифру и стрелку. Вот сам код

<div class="select_ul" id="car_years">
									<div class="dropdown">
									  <a href="#" class="js-link" ><span>Год выпуска... </span></a>
									  <ul class="js-dropdown-list">
									    <li>1988</li>
									    <li>1989</li>
                                                                            </ul>
</div>
<div>

#car_years {
background: url('/img/3not.png') no-repeat;
background-position-x: 10px;
background-position-y: 15px;
z-index: 100 !important;
}

.select_ul {
	.dropdown {
		margin: 2em auto;
		width: 100%;
		border: 1px solid #ebebeb;
		border-bottom: 2px solid #dbdbdb;
		border-radius: .5rem;
	}

	a {
		font-size: 1.8rem;
	  	display: block;
	  	padding: .5em;
	  	color: #c6c6c6;
	  	text-decoration: none;
	  	text-indent: 5rem;
	  	span {
	  		border-bottom: 1px dashed #8c8c8c;
	  	}
	}
	.js-link {
		background: url('/img/down-blk.png') no-repeat right 10px center;
		background-size: 1rem;
	}
	.js-dropdown-list {
		list-style-type: none;
		background-color: #ebebeb;
		border-radius: .5rem;
		margin-bottom: 0;
		display: none;
		position: relative;
		top: 1rem;
		transform: all .5s ease;

		li {
			font-size: 1.6rem;
			color: #484848;
			padding: .5em;
	  		cursor: pointer;
		}
		li:not(:first-child) {
	  		border-top: 1px solid #fff;
		}
		li:last-child {
	  		color: #e53401;
		}
		li:focus, li:hover {
	  		background: #ecf0f1;
		}
		li:active {
		  	background: #fbfcfc;
		} 
	}
	a:focus, a:hover {
  		background: rgba(236, 240, 241, .5);
	}
	a:active {
	  	background: #fbfcfc;
	}

Спасибо!

Answer 1

[Артём Ведищев]

А так?
https://jsfiddle.net/vybrxfxe/

Comments

[HelenaS]

Спасибо)))

Answer 2

[Александр Лысенко]

попробуйте к классу car_years применить свойство background-size

Comments

[HelenaS]

Проблема осталась..

[Александр Лысенко]

Решу вашу проблему если залейте картинку куда-то и код, что бы можно на это было посмотреть и ручками потрогать

Answer 3

[Froggyweb]

Я бы делал цифру абсолютом через псевдоэлемент.

Comments

[HelenaS]

К сожалению, вариант не работает. У меня 5 таких блоков, и абсолют применить не могу.

[Froggyweb]

HelenaS: абсолют применяется к цифре а не к блоку. можно просто z-index поставить если только дело в рамке.