Question

我正在使用一些：悬停效果，以提供更大的bakground连接2个不同的块。

应该看起来像： enter image description here

它看起来如何： 1.首先我尝试使用内联块，当我查看菜单时，它只是将部分的其余部分向下移动，2。我的第二次尝试是使用position：absolute来禁用这个事实但是在绝对位置看起来正在改变当分辨率改变时或当borowser窗口是smalelr时。

我的HTML：

 <div id="shopmenu">
    <ul>
    <li><span class="text"><a href="#">DISKUSNÍ FÓRUM </a></span><span class="horizontal-arrow"></span><span class="vertical-arrow"></span></li>
    <li><span class="text"><a href="#">KOMENTÁŘE </a></span><span class="horizontal-arrow"></span><span class="vertical-arrow"></span></li>
    <li><span class="text"><a href="#">ZÁZNAM CHATU </a></span><span class="horizontal-arrow"></span><span class="vertical-arrow"></span></li>
    <li><span class="text"><a href="#">UŽÍVATELÉ</a></span><span class="horizontal-arrow"></span><span class="vertical-arrow"></span></li>
 </div> 
 <div id="shop"></div>

我的CSS：

#shop{
    margin-left: 20px;
    margin-top: 50px;
    background-image: url("images/under_news_bg.png");
    background-repeat: repeat-x;
    height: 121px;
    width: 987px;
    display:inline-block;
}

#shopmenu{
    color: #1a6eb6;
    position: absolute;
    display: inlne;
    right: 526px;
}

#shopmenu 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: 31px;
    width: 187px;
    display: inline-block;
    color: #1a6eb6;         
}
#shopmenu ul li:hover {
    background-image: url("images/shop_menu_bg_hover.png");
    width: 187px;
    height: 38px;             
}

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

#shopmenu ul li .horizontal-arrow{
    background-image: url("images/horizontal_arrow.png");
    background-repeat: repeat-x;
    display: inline-block;
    height: 19px;
    width: 14px;
    margin: 0px 0px 0px 45px;
    vertical-align: middle;       
} 

#shopmenu ul li:hover .horizontal-arrow{
    display:none;         
}

#shopmenu ul li .vertical-arrow{
    background-image: url("images/vertical_arrow.png");
    background-repeat: repeat-x;
    display:none;
    height: 12px;
    width: 19px;
    margin: 0px 0px 0px 45px;         
} 

#shopmenu ul li:hover .vertical-arrow{
    display: inline-block;             
}

使用绝对位置的实时预览可以找到：http://funedit.com/andurit/newnew/ 那么，当用户将鼠标悬停在菜单上时，我应该怎么做呢？有人可以帮我吗？

感谢您阅读我的帖子。

Answer 1

使用您的解决方案＃1。但是设置ul元素的高度

所以删除位置：绝对来自#shopmenu
添加

#shopmenu ul { 身高：38px; margin-bottom：0 }
集

#shop { margin-top：0; }

CSS - FULL网站正在移动时：a而不是1块

1 个答案: