[英]styling a horizontal dropdown menu
我为网站制作了一个水平下拉菜单,关于样式,我有两个问题:
1.如何在标头边框的顶部添加一个小的蓝色三角形,将其显示在悬停上,如下所示: http : //i.imgur.com/C1E30.png
2.我在主导航中的链接的右边添加了一个小箭头。我通过在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');
});
如果您正确调用了Wordpress,则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
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.