CSS：关于如何创建此导航栏的最有效建议？

Question

我正在尝试使用与图像上的导航栏完全相同的导航栏。我在Photoshop中制作了几秒钟，但在代码中制作它并不容易。进步是因为我为它编写了代码，但我担心它没有响应。我的意思是，经过媒体查询的调整后，它可能会在某个时刻出现。

您创建此导航栏的方法是什么？你会如何在徽标下面创建小形状？我的方法是切割形状并切割徽标并对其进行编码，但效果不是很快。

HTML

<header>
<div class="float_center">
  <ul class="navigation">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li>
      <img class="shape" src="<?php echo site_url('assets/images/test.png');?>"/>
      <div class="logo"></div>
    </li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</div>
</header>

CSS

header 
{
    background-color:rgba(0, 0, 0, 0.74);
    height:100px;
} 

.float_center 
{
  float: right;
  position: relative;
  left: -50%; /* or right 50% */
  text-align: left;
}

.float_center > .navigation 
{
  position: relative;
  left: 50%;
}


ul.navigation
{
  list-style-type: none;
  margin:0;
  padding:10px 0;
}
ul.navigation > li 
{
  float: left;
  list-style-type: none;
  margin: 0 6px;
}
ul.navigation > li > a 
{
  display: block;
  height: 26px;
  line-height: 70px;
  font-family: "American Captain";
  font-size: 20px;
  letter-spacing: 2px;
  color: #FFF;
  text-transform: uppercase;
  padding: 0px 50px;
}

ul.navigation > li > a:hover, a:active, a:focus
{
  color: #d43100;
}

.logo 
{
    background: url("../images/logo.png");
    background-repeat:no-repeat;
    background-size: 150px;
    height:150px;
    display:block;
    width:150px;
    margin-top:6px;
    padding: 0;
}

.shape
{
    position: absolute;
    width:28%;
    top: 101px;
    left: 31.5%;
    z-index: -1;
}

Answer 1

第一次迭代

演示：http://codepen.io/dcdev/full/Jhtxv/

#nav { position:absolute;top:0;height:50px;background:#666; width:100%;}
ul { list-style:none;display:inline;width:100%;margin:0 5%; }
ul li { display:inline-block; width:10%;border:1px solid #000;}
.bump { top:0;left:50%;width:25%;height:65px;border-radius:50%;background:#666;font-size:50px;line-height:70px;color:yellow;text-align:center;line-height:50px; }

<div id="nav">
<ul>
  <li>Menu 1</li>
  <li>Menu 2</li>
  <li class="bump">M</li>
  <li>Menu 3</li>
  <li>Menu 4</li>
</ul>
</div>

---

第二次迭代

基于kshay的答案，我认为这是一个比我之前匆匆输出的例子更好的解决方案..我采取了他的例子并进一步改进了它的精神，使它更有效..

演示：http://cssdeck.com/labs/full/z4rbbe47

#navbar{padding:25px 30px 0;width:500px;height:40px;background:#808080;position:absolute;}
#navbar a{width:80px;background:#808080;float:left;text-decoration:none;text-align:center;}
#navbar a:nth-child(n+3){float:right;}
.circleimage{border-radius:50%;width:150px;height:65px;background-color:#808080;margin-left:175px;}
.circleimage img{margin:0 auto;display:block;position:relative;bottom:10px;}

<div id="navbar">
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <div class="circleimage">
      <img src="https://d13yacurqjgara.cloudfront.net/users/305445/avatars/small/m-icon-sml.png?1364435283" />
    </div>
</div>

---

第3次迭代

今晚决定再多玩一遍，我觉得我觉得它完美无缺......

演示：http://cssdeck.com/labs/full/z4rbbe47

#navbar:before { content:'\A';display:block;width:100vw;height:65px;position:absolute;background:#808080;top:0;z-index:-1; }
#navbar:after { content:url(https://d13yacurqjgara.cloudfront.net/users/305445/avatars/small/m-icon-sml.png?1364435283);display:block;height:85px;position:absolute;background:#808080;top:0;z-index:1;border-radius:50%;width:175px;height:80px;background-color:#808080;margin:0 auto;left:0;right:0; }
#navbar { padding:20px 0 0;width:100%;height:40px;background:#808080;text-align:center; }
#navbar a { width:25%;margin:0 40px;background:#808080;text-decoration:none;color:#fff;font-weight:600;letter-spacing:0.025em;text-transform:uppercase; }
#navbar a:nth-child(2) { margin-right:100px }
#navbar a:nth-child(3) { margin-left:100px }
a:hover,a:active,a:focus,a:visited { text-decoration:none;outline:none; }

<div id="navbar">
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
</div>

全宽：

约600px宽度：

Answer 2

我没有找到你可以找到它的图片，并在这里添加它是演示http://jsfiddle.net/zf2kkyLc/2/

<强> HTML

<div id="navbar">
<ul>
<a href="#"><li>Link</li></a>
<a href="#"><li>Link</li></a>
<a href="#"><li class="sec">Link</li></a>
<a href="#"><li class="third">Link</li></a>
</ul>
<div class="circleimage"></div>
</div>

<强> CSS

#navbar{
width:500px;
height:50px;
background-color:#808080;
}

#navbar ul{
position:absolute;
list-style:none;
}
#navbar a{
width:80px;
background-color:#808080;
float:left;
text-decoration:none;

}

.circleimage {
border-radius: 50%;
width: 150px;
height: 80px;
background-color:#808080;
margin-left:200px;

}

li.sec{
margin-left:160px;

}
li.third{
margin-left:170px;

}