Mini cake with css

Question

I'm trying to make buttons that look like a small cake

How do I insert the top of the cake?

example:

http://oi63.tinypic.com/4tx5xj.jpg

ul#menutop {
    padding: 0;
    margin: 50px 20px 20px 10px;

}

ul#menutop li {
    display: inline;

}

ul#menutop li a {
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
	font-size:25px;
    background-color: blue;
}

ul#menutop li a:hover {
    background-color: orange;
}

<ul id="menutop">
  	<li><a href="">Test</a></li>
 	<li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
</ul>

Answer 1

If you don't want to create additional markup, you could always use pseudo-elements.

DEMO

YOUR CODE

ul#menutop {
    padding: 0;
    margin: 50px 20px 20px 10px;

}

ul#menutop li {
    display: inline;

}

ul#menutop li a {
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
	font-size:25px;
    background-color: blue;
    position: relative;
}

ul#menutop li a:hover {
    background-color: orange;
}

ul#menutop li a:after {
  background: red;
  border-radius: 5px 5px 0 0 / 5px 5px 0 0;
  content: '';
  height: 20px;
  width: 75%;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
}

<ul id="menutop">
  	<li><a href="">Test</a></li>
 	<li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
</ul>