Hii!
We need to change the look of the drop down buttons on our top navigation bar to look something like this website's drop down menu.
http://www.ringcentral.com/
Here is an example of our current top navigation bar and drop down menus.
http://www.topsecurityinc.com/testpage11.html
Here is the CSS that controls it.
ul.dropdown{position:relat
ive;}
ul.dropdown li{width:159px;height:42px
;text-alig
n:center;f
ont-weight
:700;float
:left;back
ground:url
(../web/im
ages/globa
l_bar_bk_r
1_c2.gif) repeat-x 50% top;}
ul.dropdown a:active{color:orange;}
ul.dropdown li a{padding-top:12px;height:
30px;text-
align:cent
er;display
:block;bor
der-right:
1px solid #333;font:bold 14px verdana, sans-serif;color:#FFF;}
ul.dropdown li:last-child a{border-right:none;}
ul.dropdown li.hover,ul.dropdown li:hover{color:#000;positi
on:relativ
e;}
ul.dropdown ul{z-index:600;visibility:
hidden;pos
ition:abso
lute;top:1
00%;left:0
;}
ul.dropdown ul li{width:159px;font-weight
:400;backg
round:url(
../web/ima
ges/global
_bar_bk_r1
_c2.gif) repeat-x 50% top;color:#000;border-righ
t:1px solid #333;float:none;}
ul.dropdown ul li a{border-right:none;width:
100%;displ
ay:inline-
block;padd
ing-top:4p
x;}
ul.dropdown ul ul{left:100%;top:0;}
ul.dropdown li:hover > ul{visibility:visible;}
Would also appreciate any help on adding the down arrows on the top buttons with drop down items.
Any specific code modifications would be greatly appreciated.
Have a look at this: