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;         
}

有人可以帮我吗？

P.S。感谢您阅读本文：）

Answer 1

使用下面的CSS替换部分CSS，将span.text宽度设置为100％，然后箭头跨越position: absolute，然后将其父级设置为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 */
}

Answer 2

稍微更改结构，使文本和箭头位于超链接内，如下所示：

<li><a href="#" style="display:block"><span class="text">DISKUSNÍ FÓRUM </span><span class="arrows"></span></a></li>

然后将你的'li a'设为：

.submenu ul li a{display:block}

这应该可以解决问题。

CSS - 样式菜单可点击的地方

2 个答案: