html - CSS Ul li 导航问题 : Can't get correct result

Question

悬停时尝试获得以下结果

下面的标记

                <ul>
                    <li><a href="#">Current Month</a></li>
                    <li><a href="#">Current Week</a></li>
                    <li><a href="#">Previous Month</a></li>
                    <li><a href="#">Previous Week</a></li>
                    <li><a href="#">Next Month</a></li>
                    <li><a href="#">Next Week</a></li>
                    <li><a href="#">Team Calendar</a></li>
                    <li><a href="#">Private Calendar</a></li>
                    <li><a href="#">Settings</a></li>
                </ul>

无法找到使用 CSS3 border-radius 的解决方案。有什么建议吗？

更新

请不要发布虚线列表。我需要箭头列表的解决方案。

这不是一回事:当你使用箭头时，你需要将它设置为 li 的 background-image。

还有一种方法，将箭头设置为子弹图片，但此时无法控制箭头与链接之间的间距。

Answer 1

li:hover {
  background-color:#e4e4e4;
  -webkit-border-radius: 5px; 
  -moz-border-radius: 5px; 
  border-radius: 5px; 
}

jsfiddle

编辑

如果你想改用箭头，只需使用 :before 伪元素。

ul {
     list-style-type:none;
}    

li {

    padding:5px;
}

li:hover {

      width:100px;
      background-color:#e4e4e4;
      -webkit-border-radius: 5px; 
      -moz-border-radius: 5px; 
      border-radius: 5px; 

    }


li:before {
    content:"> ";

}

updated jsFiddle

只需用您的图片替换 >。

编辑 2

要仅在文本上设置背景，只需将该样式添加到链接而不是 li 即可。

http://jsfiddle.net/SEzxP/2/

编辑 3

要使用图像代替，只需在内容之后使用 url()

li:before {  content:url('http://www.nationalacademies.org/xpedio/groups/system/documents/webgraphics/na_right_arrow.gif') /* with class ModalCarrot ??*/
}

Updated jsFiddle