Html CSS导航图像背景

我正在为wordpress制作模板，但我无法解决此问题：

我有自己的导航风格：

<style>
body {
 background: #FFFBD0;
}

/* Navigation */
ul {
 list-style-type:none;
 margin:0;
 padding:0;
}

.menu-item
{
 padding: 22px 20px 22px 20px;
 background:url('images/button_brown.png') no-repeat;
 display:inline;
}

a {
 color: #FFFBD0;
 text-decoration:none;
}

</style>

<div class="div-menu">
<ul id="menu" class="menu">
    <li class="menu-item"><a href="">Home</a></li> 
    <li class="menu-item"><a href="">Button 2</a></li>
    <li class="menu-item"><a href="">Button 3</a></li>
</ul>
</div>

身体{
背景：#FFFBD0；
}
/*航行*/
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
}
.菜单项
{
填充：22px 20px 22px 20px；
背景：url（'images/button_brown.png'）不重复；
显示：内联；
}
a{
颜色：#FFFBD0；
文字装饰：无；
}

以及我的导航：

<style>
body {
 background: #FFFBD0;
}

/* Navigation */
ul {
 list-style-type:none;
 margin:0;
 padding:0;
}

.menu-item
{
 padding: 22px 20px 22px 20px;
 background:url('images/button_brown.png') no-repeat;
 display:inline;
}

a {
 color: #FFFBD0;
 text-decoration:none;
}

</style>

<div class="div-menu">
<ul id="menu" class="menu">
    <li class="menu-item"><a href="">Home</a></li> 
    <li class="menu-item"><a href="">Button 2</a></li>
    <li class="menu-item"><a href="">Button 3</a></li>
</ul>
</div>

现在我正在尝试这样设计按钮：

---

您不需要使用图像背景。您可以使用

背景色

和

边框

。您可以将

a

设置为具有带点的白色边框。然后你给这个

a

主填充。然后将包含

a

的

li

设置为具有非常小的填充位。给

li

一个

背景色

，你就可以开始了

代码 HTML: 目标：

结果:

检查这个 HTML

---

你的问题到底是什么？提示：问题以问号结尾；）

<div class="div-menu">
    <ul id="menu" class="menu">
        <li class="menu-item"><a href="">Home</a></li> 
        <li class="menu-item"><a href="">Button 2</a></li>
        <li class="menu-item"><a href="">Button 3</a></li>
    </ul>
</div>

ul {
    list-style-type:none;
    margin:0;
    padding:0;
}

.menu-item {
    display:inline-block;
    background:rgb(64,18,20);
    padding:2px;
}

.menu-item a {
    display:block;
    padding: 9px 24px 9px 24px;
    font-size:21px;
    color: #FFFBD0;
    text-decoration:none;
    border:dotted 1px white;
}