I recently created a horizontal dropdown menu for my website and I have a couple of questions regarding the styling:
1. How can I incorporate a small blue triangle above the header border that would only appear on hover? Here is an example of what I'm aiming for:
https://i.sstatic.net/rAjyS.png
2. I managed to add a small arrow to the right of the links in the main navigation by using a CSS class for each list element with a dropdown menu in Wordpress. However, I utilized a CSS :after pseudo-element to add a font icon to the right of those elements, but it also added the icon to the dropdown menu links which was not my intention.
https://i.sstatic.net/KPxAK.png -wordpress menu structure
HTML:
<header>
<div id="wrap">
<a id="logo" href="<?php bloginfo('siteurl');?>" title="Return to Homepage" >
<img src="<?php bloginfo('template_url');?>/images/logo.png" alt="School Logo" width="53" height="70" />
</a>
<h1>SCHOOL NAME</h1>
<nav class="cf">
<?php wp_nav_menu( array('menu' => 'Main', 'container' => none)); ?>
</nav>
</div>
</header>
<div id="subnav"></div>
CSS:
/*****NAVIGATION 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 visible only on active links */
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');
});