<ul class="parent">
  <li><span>Проект 1</span>
    <div class="circle"></div>
    <ul class="dropdown">
      <li>Проект номер 1</li>
      <li>Проект номер 2</li>
      <li>Проект номер 3</li>
      <li>Проект номер 4</li>
      <li>Проект номер 5</li>
      <li>Проект номер 6</li>
      <li>Проект номер 7</li>
    </ul>
  </li>
  <li><span>Проект 2</span></li>
  <li><span>Проект 3</span></li>
</ul>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

body {
  background: red;
}

.parent {
  display: flex;
  height: 100px;
  align-items: center;
  background: brown;
}

.parent span {
  position: relative;
  z-index: 10;
  left: 20px;
}

.parent li {
  margin-left: 80px;
  position: relative;
}

.dropdown {
  position: absolute;
  top: -20px;
  left: 0;
  padding-top: 80px;
  white-space: nowrap;
  background: linear-gradient(transparent 80px, #fff 80px);
  border-radius: 12px;
  padding-left: 20px;
  padding-right: 30px;
  padding-bottom: 20px;
}

.dropdown:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 80px;
  background: #fff;
  border-radius: 12px 12px 0 0;
}

.dropdown:before {
  content: "";
  position: absolute;
  top: 50px;
  left: 93px;
  width: 120px;
  height: 40px;
  background: #fff;
  z-index: 20;
  border-radius: 0 12px 0 0;
}

.dropdown li {
  margin-left: 0;
  position: relative;
  z-index: 30;
}

.circle {
  position: absolute;
  top: 22px;
  left: 97px;
  width: 30px;
  height: 30px;
  background: radial-gradient(
    circle at 10px center,
    #fff 20px,
    transparent 20px
  );
  z-index: 50;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.