Highlight the menu item only - html

Question

I would like to know how to highlight each menu item in the following drop down menu. When I hover over the current menu with mouse it highlights the | characters also next to them. How can I solve this? Thank you for all information.
The html code is :
#menu {
width: 960px;
margin-left: auto;
margin-right: auto;
text-align: center;
position: relative;
z-index: 1;
}
#primary_nav_wrap {
margin-left: auto;
margin-right: auto;
margin-top: 5px;
text-align: center;
/*margin-left:50px; */
}
#primary_nav_wrap ul {
list-style: none;
position: relative;
/*float:left;*/
text-align: center;
margin: 0;
padding: 0;
}
#primary_nav_wrap ul a {
/*display:block;*/
color: #333;
text-decoration: none;
font-weight: 500;
font-size: 14px;
text-transform: uppercase;
line-height: 32px;
padding-top: 10px;
font-family: 'Raleway', sans-serif;
display: inline-block;
}
#primary_nav_wrap ul li {
display: inline-block;
position: relative;
/*float:left;*/
margin: 0px;
padding: 0px;
}
#primary_nav_wrap ul li a {}
#primary_nav_wrap ul li a:after {
margin-left: 10px;
margin-right: 10px;
content: " | ";
}
#primary_nav_wrap ul li.last a:after {
content: none !important;
}
#primary_nav_wrap ul li li.submenu a:after {
content: none !important;
}
#primary_nav_wrap ul li a:hover {
background: #f6f6f6;
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
opacity: .8;
padding: 0;
}
#primary_nav_wrap ul ul li {
float: none;
text-align: left;
width: 200px;
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px;
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%;
}
#primary_nav_wrap ul li:hover ul {
display: inline-block;
}
<div id="menu">
<nav id="primary_nav_wrap">
<ul>
<li class="currentmenuitem">Home
</li>
<li>about us
</li>
<li>day course
<ul>
<li class="submenu">3 Day Course
</li>
<li class="submenu">6 Day Course
</li>
</ul>
</li>
<li>short course
<ul>
<li class="submenu">Pasta course
</li>
<li class="submenu">Pizza course
</li>
<li class="submenu">Fettucine course
</li>
</ul>
</li>
<li>Tours
</li>
<li>recipes
</li>
<li>reviews
</li>
<li>Contact Us
</li>
<li class="last">Location
</li>
</ul>
</nav>
</div>

Answer 1

Change the placement of your pseudo element from the a to li. Do this for all CSS selectors that are targeting the a.
Update #primary_nav_wrap ul li a:after {} to #primary_nav_wrap ul li:after {}
Below is an example of your menu with improved markup and reduced CSS (lot's of overlap of CSS properties that were not needed).
#menu {
width: 960px;
margin-left: auto;
margin-right: auto;
}
#primary_nav_wrap ul,
#primary_nav_wrap li {
margin: 0;
padding: 0;
list-style: none;
}
#primary_nav_wrap li {
display: inline-block;
position: relative;
}
#primary_nav_wrap a {
color: #333;
text-decoration: none;
font-weight: 500;
font-size: 14px;
text-transform: uppercase;
line-height: 32px;
font-family: 'Raleway', sans-serif;
display: inline-block;
}
#primary_nav_wrap a:hover {
background: #f6f6f6;
}
#primary_nav_wrap ul > li:after {
margin-left: 10px;
margin-right: 10px;
content: " | ";
}
#primary_nav_wrap ul > li:hover .submenu {
display: block;
}
#primary_nav_wrap .submenu > li {
float: none;
text-align: left;
width: 200px;
}
#primary_nav_wrap .submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
opacity: .8;
padding: 0;
}
#primary_nav_wrap ul > li.last:after,
#primary_nav_wrap .submenu > li:after {
content: none !important;
}
#primary_nav_wrap .submenu a {
line-height: 120%;
padding: 10px 15px;
}
<div id="menu">
<nav id="primary_nav_wrap">
<ul>
<li class="currentmenuitem">Home
</li>
<li>about us
</li>
<li>day course
<ul class="submenu">
<li>3 Day Course
</li>
<li>6 Day Course
</li>
</ul>
</li>
<li>short course
<ul class="submenu">
<li>Pasta course
</li>
<li>Pizza course
</li>
<li>Fettucine course
</li>
</ul>
</li>
<li>Tours
</li>
<li>recipes
</li>
<li>reviews
</li>
<li>Contact Us
</li>
<li class="last">Location
</li>
</ul>
</nav>
</div>