Need to change look of drop down buttons

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:relative;}
ul.dropdown li{width:159px;height:42px;text-align:center;font-weight:700;float:left;background:url(../web/images/global_bar_bk_r1_c2.gif) repeat-x 50% top;}
ul.dropdown a:active{color:orange;}
ul.dropdown li a{padding-top:12px;height:30px;text-align:center;display:block;border-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;position:relative;}
ul.dropdown ul{z-index:600;visibility:hidden;position:absolute;top:100%;left:0;}
ul.dropdown ul li{width:159px;font-weight:400;background:url(../web/images/global_bar_bk_r1_c2.gif) repeat-x 50% top;color:#000;border-right:1px solid #333;float:none;}
ul.dropdown ul li a{border-right:none;width:100%;display:inline-block;padding-top:4px;}
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.
TrueBlueAsked:
Who is Participating?
 
SSupremeConnect With a Mentor Commented:
also if you would like to remove little space here:
 space
find: .topnav-wrap {
    height: 42px;
    margin-left: 9px;
    padding-left: 5px;
    width: 828px; <--adjust value to 828px
}
0
 
SSupremeCommented:
What do you want exactly to implement?

Have a look at this: sample
0
 
TrueBlueAuthor Commented:
SSupreme,

I like the top blue navigation bar, but I think it would look better if the drop down buttons were in a white box with rounded corners like this attached image. sample drop down menu
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
SSupremeCommented:
ul.dropdown ul li{width:159px;font-weight:400;background:white;color:#000;border-right:1px solid #333;float:none;)
ul.dropdown ul li a{border-right:none;width:100%;display:inline-block;padding-top:4px;color:#000;}

it makes subnav white with black font colour. If you want make "rounded" corners you have to add images at the and of second <ul>. They did it using this image http://www.ringcentral.com/images/hp/navigation/small/office.png .
Also you have to clean up your CSS file from unused rules, there are about 40% of them.
0
 
TrueBlueAuthor Commented:
SSupreme,
I added this to my test page, but it did not seem to have changed the look of the drop downs.
    <script language="css" type="text/css">
    ul.dropdown ul li{width:159px;font-weight:400;background:white;color:#000;border-right:1px solid #333;float:none;)
    ul.dropdown ul li a{border-right:none;width:100%;display:inline-block;padding-top:4px;color:#000;}
    </script>
Any ideas?
0
 
SSupremeCommented:
try this instead:
<style type="text/css">
    ul.dropdown ul li{width:159px;font-weight:400;background:white;color:#000;border-right:1px solid #333;float:none;)
    ul.dropdown ul li a{border-right:none;width:100%;display:inline-block;padding-top:4px;color:#000;}
    </style>
0
 
SSupremeCommented:
Don't add! Replace already existed ones.
0
 
TrueBlueAuthor Commented:
SSupreme,

So I created another stylesheet name style1.css and updated the text page to use it.
The second line of recommended code is highlighted by my designer and says marked invalid due to not supported by current scheme. As you can see these two lines of code make the drop down menus inoperative.
Any ideas?
TIA
0
 
SSupremeCommented:
Well, changing colour doesn't make menu inoperative.
Before I posted those line I tested them and they worked.
 sampleTry again beginning from style.css
0
 
TrueBlueAuthor Commented:
SSupreme,

Ok. I got it now. :)
I changed the buttons to blue just flat and updated the test page.
But the horitizontal lines between the drop down buttons has seemed to disappear.
Any idea where that is controlled?
TIA
0
 
SSupremeCommented:
here  at ul.dropdown ul li
add border-bottom:1px solid; and remove border-right:~~;
0
 
TrueBlueAuthor Commented:
SSupreme,

That looks great :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.