Image or unicode arrow after menu items (arrow down and arrow right)


Author Message
Bill

Posted: 2/26/2014
Quote message 

Artisteer 4.2 and Joomla 3.2

I would like to to be able to change the menu css code so when the menu has a submenu it will show an arrow down in the main menu and an arrow right in the submenu area.
I am not that good at css coding so any help or suggestions would be great.

My css code for my menu:


.art-nav
{
background: #F0E4B2 url('../images/nav.png') scroll;
background: transparent url('../images/nav.png') scroll;
border-bottom: 1px dotted transparent;
padding: 2px;
margin: -20px auto 0;
position: relative;
z-index: 499;
text-align: right;
}

ul.art-hmenu a, ul.art-hmenu a:link, ul.art-hmenu a:visited, ul.art-hmenu a:hover
{
outline: none;
position: relative;
z-index: 11;
}

ul.art-hmenu, ul.art-hmenu ul
{
display: block;
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}

ul.art-hmenu li
{
position: relative;
z-index: 5;
display: block;
float: left;
background: none;
margin: 0;
padding: 0;
border: 0;
}

ul.art-hmenu li:hover
{
z-index: 10000;
white-space: normal;
}

ul.art-hmenu:after, ul.art-hmenu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}

ul.art-hmenu, ul.art-hmenu ul
{
min-height: 0;
}

ul.art-hmenu
{
display: inline-block;
vertical-align: middle;
}

.art-nav:before
{
content: ' ';
}

.art-hmenu-extra1
{
position: relative;
display: block;
float: left;
width: auto;
height: auto;
background-position: center;
}

.art-hmenu-extra2
{
position: relative;
display: block;
float: right;
width: auto;
height: auto;
background-position: center;
}

.art-hmenu
{
float: right;
}

.art-menuitemcontainer
{
margin: 0 auto;
}

ul.art-hmenu>li
{
margin-left: 11px;
}

ul.art-hmenu>li:first-child
{
margin-left: 5px;
}

ul.art-hmenu>li:last-child, ul.art-hmenu>li.last-child
{
margin-right: 5px;
}

ul.art-hmenu>li>a
{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid transparent;
border-left: none;
border-right: none;
padding: 0 13px;
margin: 0 auto;
position: relative;
display: block;
height: 32px;
cursor: pointer;
text-decoration: none;
color: #878787;
line-height: 32px;
text-align: center;
}

.art-hmenu>li>a, .art-hmenu>li>a:link, .art-hmenu>li>a:visited, .art-hmenu>li>a.active, .art-hmenu>li>a:hover
{
font-size: 12px;
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-transform: uppercase;
text-align: left;
}

ul.art-hmenu>li>a.active
{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #C8A828;
border-left: none;
border-right: none;
padding: 0 13px;
margin: 0 auto;
color: #D7B633;
text-decoration: none;
}

ul.art-hmenu>li>a:visited, ul.art-hmenu>li>a:hover, ul.art-hmenu>li:hover>a
{
text-decoration: none;
}

ul.art-hmenu>li>a:hover, .desktop ul.art-hmenu>li:hover>a
{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #C8A828;
border-left: none;
border-right: none;
padding: 0 13px;
margin: 0 auto;
}

ul.art-hmenu>li>a:hover, .desktop ul.art-hmenu>li:hover>a
{
color: #D7B633;
text-decoration: none;
}

ul.art-hmenu>li:before
{
position: absolute;
display: block;
content: ' ';
top: 0;
left: -11px;
width: 11px;
height: 32px;
background: url('../images/menuseparator.png') center center no-repeat;
}

ul.art-hmenu>li:first-child:before
{
display: none;
}

ul.art-hmenu li li a
{
background: #7A7A7A;
background: transparent;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 0 8px;
margin: 0 auto;
}

ul.art-hmenu li li
{
float: none;
width: auto;
margin-top: 1px;
margin-bottom: 1px;
}

.desktop ul.art-hmenu li li ul>li:first-child
{
margin-top: 0;
}

ul.art-hmenu li li ul>li:last-child
{
margin-bottom: 0;
}

.art-hmenu ul a
{
display: block;
white-space: nowrap;
height: 29px;
min-width: 7em;
border: 0 solid transparent;
text-align: left;
line-height: 29px;
color: #878787;
font-size: 11px;
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
text-decoration: none;
text-transform: uppercase;
margin: 0;
}

.art-hmenu ul a:link, .art-hmenu ul a:visited, .art-hmenu ul a.active, .art-hmenu ul a:hover
{
text-align: left;
line-height: 29px;
color: #878787;
font-size: 11px;
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
text-decoration: none;
text-transform: uppercase;
margin: 0;
}

ul.art-hmenu li li:after
{
display: block;
position: absolute;
content: ' ';
height: 0;
top: -1px;
left: 0;
right: 0;
z-index: 1;
border-bottom: 1px dotted #E8C9E4;
}

.desktop ul.art-hmenu li li:first-child:before, .desktop ul.art-hmenu li li:first-child:after
{
display: none;
}

ul.art-hmenu ul li a:hover, .desktop ul.art-hmenu ul li:hover>a
{
background: #363636;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin: 0 auto;
}

.art-hmenu ul a:hover
{
text-decoration: none;
color: #FFFFFF;
}

.desktop .art-hmenu ul li:hover>a
{
color: #FFFFFF;
}

ul.art-hmenu ul:before
{
background: #FFFFFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid rgba(200, 168, 40, 0.9);
margin: 0 auto;
display: block;
position: absolute;
content: ' ';
z-index: 1;
}

.desktop ul.art-hmenu li:hover>ul
{
visibility: visible;
top: 100%;
}

.desktop ul.art-hmenu li li:hover>ul
{
top: 0;
left: 100%;
}

ul.art-hmenu ul
{
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background-image: url('../images/spacer.gif');
}

.desktop ul.art-hmenu>li>ul
{
padding: 26px 36px 36px 36px;
margin: -10px 0 0 -30px;
}

.desktop ul.art-hmenu ul ul
{
padding: 36px 36px 36px 18px;
margin: -36px 0 0 -5px;
}

.desktop ul.art-hmenu ul.art-hmenu-left-to-right
{
right: auto;
left: 0;
margin: -10px 0 0 -30px;
}

.desktop ul.art-hmenu ul.art-hmenu-right-to-left
{
left: auto;
right: 0;
margin: -10px -30px 0 0;
}

.desktop ul.art-hmenu li li:hover>ul.art-hmenu-left-to-right
{
right: auto;
left: 100%;
}

.desktop ul.art-hmenu li li:hover>ul.art-hmenu-right-to-left
{
left: auto;
right: 100%;
}

.desktop ul.art-hmenu ul ul.art-hmenu-left-to-right
{
right: auto;
left: 0;
padding: 36px 36px 36px 18px;
margin: -36px 0 0 -5px;
}

.desktop ul.art-hmenu ul ul.art-hmenu-right-to-left
{
left: auto;
right: 0;
padding: 36px 18px 36px 36px;
margin: -36px -5px 0 0;
}

.desktop ul.art-hmenu li ul>li:first-child
{
margin-top: 0;
}

.desktop ul.art-hmenu li ul>li:last-child
{
margin-bottom: 0;
}

.desktop ul.art-hmenu ul ul:before
{
border-radius: 3px;
top: 30px;
bottom: 30px;
right: 30px;
left: 12px;
}

.desktop ul.art-hmenu>li>ul:before
{
top: 20px;
right: 30px;
bottom: 30px;
left: 30px;
}

.desktop ul.art-hmenu>li>ul.art-hmenu-left-to-right:before
{
right: 30px;
left: 30px;
}

.desktop ul.art-hmenu>li>ul.art-hmenu-right-to-left:before
{
right: 30px;
left: 30px;
}

.desktop ul.art-hmenu ul ul.art-hmenu-left-to-right:before
{
right: 30px;
left: 12px;
}

.desktop ul.art-hmenu ul ul.art-hmenu-right-to-left:before
{
right: 12px;
left: 30px;
}

 
Bill

Posted: 2/27/2014
Quote message 

Any help with this would be great.
 
jrgweb

Posted: 2/28/2014
Quote message 

@Bill - Try something like this in your css.

.art-hmenu li > a:after {
content: '\25bc' !important;
margin-left: 5px;
}

.art-hmenu li li > a:after {
content: '\25b6' !important;
font-size:20px !important;
margin-left: 5px;
}

.art-hmenu li > a:only-child:after {
content: '' !important;
}