html - CSS - 样式菜单可点击位置

Question

大家好，我正在设计我的第一个网站，我的二级菜单有问题，atm 只是文本作为链接，我需要将其更改为整个 li 将作为链接。

我需要用 CSS 而不是 JS 来做。

现场版:http://funedit.com/andurit/try9/ (你可以在那里看到多个子菜单，它们都是相同的 CSS/HTML

HTML:

    <nav class="submenu"> 
      <ul>
        <li><span class="text"><a href="#">HERNÍ SERVERY </a></span><span class="arrows"></span></li>
        <li><span class="text"><a href="#">BAN LIST  </a></span><span class="arrows"></span></li>
        <li><span class="text"><a href="#">UNBAN ŽÁDOSTI  </a></span><span class="arrows"></span></li>
        <li><span class="text"><a href="#">ADMINI </a></span><span class="arrows"></span></li>
      </ul>
    </nav>

CSS:

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

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

.submenu ul li{
    list-style-position: inside;    /* Bodka v novom riadku vo vnutry */
    list-style-type: none;          /* bez bodky */  
    background-image: url("images/shop_menu_bg.png");
    background-repeat: repeat-x;
    height: 38px;
    width: 187px;
    display: inline-block;
    color: #1a6eb6;         
}

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

.submenu ul li .text{
    color: #1a6eb6;
    display: inline-block;    /* aby sa dala rovnomerne posunut sipka a nie podla dlzky textu*/
    height: 31px;
    width:115px;
    line-height: 28px;
    margin-left: 5px;         
}

.submenu ul li .arrows{
    background-image: url("images/arrows.png");
    background-repeat: repeat-x;
    display: inline-block;
    height: 17px;
    width: 14px;
    margin: 0px 0px 0px 45px;
    vertical-align: middle;       
} 

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

有人可以帮我吗？

附注感谢阅读这篇文章:)

Answer 1

用我下面的 CSS 替换一些 CSS，设置 span.text 宽度为 100%，然后箭头跨度到 position: absolute 然后设置他们的 parent position: relative 应该可以解决问题

.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 .text {
color: #1A6EB6;
display: inline-block;
height: 31px;
line-height: 28px;
margin-left: 5px;
position: relative; /* added this for correct z-index */
width: 100%; /* added this */
z-index: 3; /* added this */
}
.submenu ul li .arrows {
background-image: url("images/arrows.png");
background-repeat: repeat-x;
display: block;
height: 17px;
margin: 0;
position: absolute; /* added this */
right: 10px; /* added this to position it correctly */
top: 6px; /* added this to position it correctly */
vertical-align: middle;
width: 17px;
z-index: 2; /* added this for correct z-index */
}
.submenu ul li .text a {
color: #636363;
display: block; /* added this */
width: 100%; /* added this */
}