删除div并将其设置为{}

Question

我正在使用此HTML：

 <nav class="submenu">
    <ul>
    <li><a href="#"><span class="text">DISKUSNÍ FÓRUM </span><div class="arrows"></div></a></li>
    <li><a href="#"><span class="text">KOMENTÁŘE  </span><div class="arrows"></div></a></li>
    <li><a href="#"><span class="text">ZÁZNAM CHATU </span><div class="arrows"></div></a></li>
    <li><a href="#"><span class="text">UŽÍVATELÉ </span><div class="arrows"></div></a></li>
    </ul>
 </nav> 

制作类似的东西：

它很酷，我感觉<div class="arrows">在那里毫无意义，我可以用.submenu ul li a{或其他东西来设计它，但是无论我尝试它做什么都不是我想要的，所以有人可以帮我删除<div class="arrows">而不改变它在网站上的外观吗？

CSS：

.submenu{
    color: #1a6eb6;
    display: inline-block;
    height: 50px;
    width:780px;
}

.submenu a{
    width: 187px;
    display: block;
}

.submenu ul {
    margin-left: 20px;
    padding-left: 0px;         
}

.submenu ul li {
background-image: url("images/shop_menu_bg.png");
background-repeat: repeat-x;
color: #1A6EB6;
display: inline-block;
height: 38px;
list-style-position: inside;
list-style-type: none;
position: relative; /* added this */
width: 187px;
}

.submenu ul li:hover {
    background-image: url("images/shop_menu_bg_hover.png");             
}

.submenu ul li .text {
    color: #1A6EB6;
    display: inline-block;
    height: 31px;
    line-height: 28px;
    margin-left: 5px;
    width: 182px; 
}


.submenu ul li .arrows {
    background-image: url("images/arrows.png");
    background-repeat: repeat-x;
    display: block;
    height: 17px;
    margin: 0;
    position: absolute; 
    right: 10px; 
    top: 6px; 
    vertical-align: middle;
    width: 17px;
}

.submenu ul li:hover .arrows{
    background-position: -3px -14px;         
}

Answer 1

您可以使用伪元素来显示箭头：

<强> FIDDLE

.submenu ul li:after {
    content:"";
    background-image: url("images/arrows.png");
    background-repeat: repeat-x;
    display: block;
    height: 17px;
    margin: 0;
    position: absolute; 
    right: 10px; 
    top: 6px; 
    vertical-align: middle;
    width: 17px;
}

.submenu ul li:hover:after{
    background-position: -3px -14px;         
}

您可以删除div.arrows