0

我有一个我在 Wordpress 中构建的网站，它的链接周围有一个灰色框，当你将鼠标悬停在它们上面时，它们会变成蓝色，并且一个箭头会从框中掉下来。我的问题是它们是绝对放置的，所以如果导航链接更长或更短，箭头不会以导航框为中心。我能够用纯CSS实现效果。这是我的代码。

HTML

<div id="nav">

            <div class="navwrapper">
                    <div class="main-nav">
                        <?php bones_main_nav(); // Adjust using Menus in Wordpress Admin ?>
                    </div>
                    <div class="clearfix"></div>
            </div>
        </div>

CSS

.main-nav ul a{
    color: #0f0f0f;
    text-decoration: none;
}


.main-nav ul li a{
    color: #0f0f0f;
    text-decoration: none;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: #efefef;
    padding:  10px;
}


.main-nav ul a:hover{
    color: #fff;
    text-decoration: none;
    background-color: #5dbbe0;
     -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: relative;
}


.main-nav ul li {
    float: left;
    margin:  25px 0 0 15px;
}


.main-nav ul a:hover:after{  
    content: ' ';  
    position: absolute;  
    width: 0;  
    height: 0;  
    left: 18px;  
    top: 36px;
    text-align: center;
    border-width:10px 10px 0;
    border-style: solid;  
    border-color: #5dbbe0 transparent;  
    display: block;
}
4

1 回答 1

0

您当前使用三角形的问题之一是您将块元素嵌套在无效的 CSS内联元素中。（你可以在块元素中嵌套内联元素）

由于我们必须使用display: block ; 为了形成 CSS3 三角形，我们还可以将display:block添加到父元素。

我还将三角形的位置更改为position:relative因为我想将它相对于锚元素定位

最后使用margin:0 auto; 水平对齐三角形。我假设您对每个锚点使用相同的高度，因为这是您的导航，所以最后使用底部：-20px相应地调整三角形的垂直位置

在此处查看演示：http: //jsfiddle.net/radialglo/Am48P/7/

出于演示目的，我将您的 a:hover:after更改为a:after 。

    .main-nav ul a{
        颜色：#0f0f0f；
        文字装饰：无；
    }


    .main-nav ul li a{
        颜色：#0f0f0f；
        文字装饰：无；
        -webkit-border-radius：10px；
        -moz-边界半径：10px；
        边框半径：10px；
        背景颜色：#efefef；
        填充：10px；
        显示：块；
    }


    .main-nav ul a:hover{
        颜色：#fff;
        文字装饰：无；
        背景颜色：#5dbbe0；
         -webkit-border-radius：10px；
        -moz-边界半径：10px；
        边框半径：10px；
        位置：相对；
    }


    .main-nav ul li {
        向左飘浮;
        边距：25px 0 0 15px；
        列表样式：无；
    }


    .main-nav ul a:after {  
        内容： ' ';  
        /* 位置：绝对；*/
        位置：相对；
        底部：-20px；
        /*根据需要调整垂直高度*/
        宽度：0；  
        高度：0；  
        /* 左：18px;*/  
        /*顶部：36px；*/
        文本对齐：居中；
        边框宽度：10px 10px 0；
        边框样式：实心；  
        边框颜色：#5dbbe0 透明；  
        边距：0 自动；
        显示：块；
    }​
于 2012-07-19T05:18:45.333 回答