Question

我为我的网站制作了一个横向下拉菜单，我有两个关于造型的问题：

1.如何在标题边框的顶部添加一个小的蓝色三角形，它将在悬停时显示，如下所示： http://i.imgur.com/C1E30.png

2.我在主nav的链接右侧添加了一个小箭头。我通过在wordpress中使用下拉菜单为每个列表元素指定一个css类来实现这一点，然后我使用了一个css：after伪要在这些元素的右侧添加字体图标的元素，问题在于它还将图标添加到下拉菜单链接中，我不希望这样。
http://i.imgur.com/9QPry.png -wordpress菜单结构

HTML：

 <header>
    <div id="wrap">     
        <a id="logo" href="<?php bloginfo('siteurl');?>" title="Vratite se  na početnu stranicu" >
            <img src="<?php bloginfo('template_url');?>/images/logo.png" alt="Obrtnička Škola Koprivnica Logo" width="53" height="70" />
        </a>
        <h1>OBRTNIČKA ŠKOLA KOPRIVNICA</h1>
        <nav class="cf">
            <?php wp_nav_menu( array('menu' => 'Main' , 'container' => none)); ?>
        </nav>
    </div>
</header>
<div id="subnav"></div>

的CSS：

/*****NAV STYLES*******/
nav{
    position:absolute;
    top: 42px;
    padding-bottom:2.7em;
}

nav li {
    float: left;
    font-size: 1.2em;
}
nav li a {
    float: left;
    padding: 0 10px 0 0;
    color: white;
}

nav ul li:first-child {
    padding-left: 70px;
}

nav ul ul{
    position: absolute;
    left: -999em;
    bottom: 0em;
    min-width: 230%;
    max-width: 170%;
}

nav ul ul li{
    font-size: 0.75em;
    float: none;
    display: inline-block;
    padding-right: 10px;
}
nav ul ul li:first-child {
    padding-left: 0;
}
nav ul ul li a {
    color: #4F4F4F;
}

nav ul ul li a:hover {
    color: black;
}


.dropdown a:after {
    content: "s";
    font-family: 'Guifxv2TransportsRegular';
    color: white;
    font-size: 0.7em;
    padding: 0 0 2px 3px;
}

/* make sub-menu appear on active links only */
nav li.active > ul {
    left:0;
}

/* clearfix micro hack = http://nicolasgallagher.com/micro-clearfix-hack/ */
/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

的javascript：

        // on mouse over, remove all active classes from main menu items and add active class to current item
        $('nav > ul > li > a').mouseover(function() {
        // remove all active classes
        $('nav > ul > li').removeClass('active');
        // add active class to current item
        $(this).parent().addClass('active');
        });

Answer 1

如果你正确调用了它，Wordpress会将.current-menu-item和.current_page_item类添加到菜单中：

即

<?php wp_nav_menu( array('menu' => 'Main Menu' )); ?>

使用绝对定位简单地为您的.current_page_item设置背景样式。类似的东西：

.current_page_item {
    background: url(arrow.png) no repeat;
    position: absolute:
    top: -25px // Adjust this to see it depending on your padding, margins
    left: 50%; // Again, play with this percentage or use pixels
}

设计水平下拉菜单

1 个答案: