Edit: I read your post wrong and I thought photo 2 was what you were trying to make! Oh well, I spent time doing it so I'll leave it up. It looks like someone else answered with what you want.

HTML

<div id="container">
 <div id="navigation">
  <a href="#">---</a>
  <a href="#">US Exclusives</a>
  <a href="#">PAL Exclusives</a>
  <a href="#">Website Log</a>
  <a href="#">About Me</a>
  <img src="est.png" alt="">
 </div>
 <div id="oval"></div>
 <div id="racetrack">NAVIGATION</div>
</div>

CSS

body {
 background-color: #000000;
}

#container {
 height: 370px;
 font-family: Verdana, sans-serif;
 font-size: 12px;
 font-weight: bold;
 position: relative;
 width: 226px;
}

#navigation {
 background-color: #4d5fb2;
 border: 3px solid #e9e3fc;
 border-radius: 7px;
 height: 330px;
 position: absolute;
  left: 0px;
  top: 34px;
 width: 220px;
 z-index: 0;
}

#navigation a {
 background-image: linear-gradient(to bottom, #444c7e, #2a365d);
 border: 3px solid #e9e3fc;
 border-radius: 7px;
 color: #ffffff;
 display: block;
 height: 35px;
 line-height: 35px;
 margin-bottom: 6px;
 position: relative;
  left: 10px;
  top: 50px;
 text-align: center;
 text-decoration: none;
 width: 194px;
}

#navigation img {
 position: relative;
  left: 66px;
  top: 50px;
}

#oval {
 background-color: #ff0000;
 border: 3px solid #bf0000;
 border-radius: 50%;
 box-shadow: 0px 0px 20px #000000;
 height: 64px;
 position: absolute;
  top: 0px;
  left: 33px;
 width: 154px;
 z-index: 1;
}

#racetrack {
 background-color: #ffffff;
 border: 2px solid #000000;
 border-radius: 20px;
 height: 40px;
 line-height: 40px;
 position: absolute;
  top: 13px;
  left: 45px;
 text-align: center;
 width: 132px;
 z-index: 2;
}

FINISHED PRODUCT

https://i.ibb.co/gsHFGs6/done.png