The Items navigation design

Question

Can you help me to achieve this style for items of the navigation menu while respecting the width of each 'li' element

Design image

enter image description here
My attempt:

 .nav_list ul li a {
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
color: #4d4d4d;
border-right: 2px solid #c79c60;
padding-right: 15px;
margin-right: 15px;
display: inline-block;
height: 12px;
line-height: 11px;
border-bottom: 1px solid orange;
box-sizing: border-box;
}

Thanks

Hi, SO isn't a place where you get free job done. You can get help for issues you have in code you have. So please make an attempt to make you menu item and come back when you hit an issue. — web-tiki, Nov 27 '14 at 09:26
the tricky part is how to create the triangle and the border in the same blocks — Boytun, Nov 27 '14 at 09:38
we can do the trcick like this: background:url(line.png) bottom right no-repeat; but I want create the style with a pure css code — Boytun, Nov 27 '14 at 09:40
possible duplicate of [How does this CSS triangle shape work?](http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work) — Abhitalks, Nov 27 '14 at 09:52

Weafs.py · Accepted Answer · 2014-11-27T09:49:39.960

You can add a triangle on :hover to the :before :pseudo-element and use calc(50% - 5px)(5px is the width of the triangle) to position the triangle in the center.

body {
  background: url(http://s25.postimg.org/b6q25p4p7/black_thread.png) repeat black;
}
.nav-container {
  top: 20px;
  position: relative;
  width: 100%;
  height: 30px;
}
.nav {
  width: 100%;
  height: 30px;
  maring: 0 auto;
  text-align: center;
}
.menu-item {
  display: inline-block;
  width: 67px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #C79C60;
  position: relative;
}
.menu-item:hover {
  cursor: pointer;
  border-bottom: 2px solid #C79C60;
}
.menu-item:hover:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  bottom: 0;
  left: calc(50% - 5px);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid #C79C60;
}

<body>
  <div class="nav-container">
    <div class="nav">
      <div class="menu-item">HOME</div>
      <div class="menu-item">ABOUT US</div>
      <div class="menu-item">LOCATIONS</div>
      <div class="menu-item">SERVICES</div>
      <div class="menu-item">CONTACT US</div>
    </div>
  </div>
</body>

Thanks a lot it's works fine with some modifications ;) – Boytun Nov 27 '14 at 10:28 — Boytun, Nov 27 '14 at 10:28

Konstantin Dzuin · Answer 2 · 2014-11-28T09:00:04.033

I suppose to use absolute positioned pseudo element with horizontal auto-alignment. If you need the triangle appears not only in hover state just remove :hover from CSS-selector.

.b-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
}


.b-nav-item {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  border-bottom: 2px solid #c59b62;
}
.b-nav-item__label {
  font: 300 1em/1.2 sans-serif;
  text-transform: uppercase;
  text-align: center;
  color: #c59b62;
}
.b-nav-item:hover::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 0;
  margin: auto;

  border-right: 4px solid transparent;
  border-bottom: 4px solid #c59b62;
  border-left: 4px solid transparent;
}

<div class="b-nav-item">
  <span class="b-nav-item__label">Home</span>
  <a href="#" class="b-link"></a>
</div>
<div class="b-nav-item">
  <span class="b-nav-item__label">Home Sweet Home</span>
  <a href="#" class="b-link"></a>
</div>

You can find live demo at http://codepen.io/kdzuin/pen/JodaQL

The Items navigation design

2 Answers2