1

for the first time i made a jquery slider using coda slider.

but i want to customize the menu, i want a little a arrow that will show on the top of the li a when you hover it and if it's active.

How will i do that? should i use a image? or can i achieve the effect using css3?

<ul class="navigation">
<li><a href="#sites">Sites</a></li>
<li><a href="#files">Files</a></li>
<li><a href="#editor">Editor</a></li>

<style>
.navigation {
padding:0px;
margin-bottom:90px;
}

ul.navigation li {
list-style-type:none;
}

ul.navigation li a {
text-decoration:none;
float:left;
width:254px;
height:50px;
display:block;
background-color:#ccc;
text-align:center;
line-height:40px;
}

ul.navigation li a:hover {
background-color:#666;
  /*there should be some sort of background image here or css3? */
}

.active {
   /*there should be some sort of background image here or css3? */
}
<style>
abc
  • 3,223
  • 1
  • 15
  • 15
Jeremi Liwanag
  • 944
  • 4
  • 21
  • 44

3 Answers3

1
   ul.navigation li a:active {  }
Naveen D Almeida
  • 877
  • 6
  • 16
0
.selected:hover {
  /* you can use CSS3 to make arrows or image both */
}

After analyzing, I observed, that plugin adds .selected class to that li element which is selected. So, you can also use CSS3 to make arrows by using :after and :before psuedo classes with display:none and show only on hover of .selected.

Muhammad Talha Akbar
  • 9,952
  • 6
  • 38
  • 62
  • and this question helped me to achieve the triangle effect using css3 http://stackoverflow.com/questions/8841301/how-do-you-get-a-triangle-hover-effect-on-a-pure-css-navbar – Jeremi Liwanag Feb 16 '13 at 16:39
0
ul.navigation > li:hover > a,
ul.navigation > li > a:active,
ul.navigation > li > a.selected {
    /* do whatever */
}

Just in case you have a sub menu, I used the direct descendant selector (>).

seemly
  • 1,090
  • 10
  • 20