asked on 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:relat
ul.dropdown li{width:159px;height:42px
ul.dropdown a:active{color:orange;}
ul.dropdown li a{padding-top:12px;height:
ul.dropdown li:last-child a{border-right:none;}
ul.dropdown li.hover,ul.dropdown li:hover{color:#000;positi
ul.dropdown ul{z-index:600;visibility:
ul.dropdown ul li{width:159px;font-weight
ul.dropdown ul li a{border-right:none;width:
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.
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
ul.dropdown li{width:159px;height:42px
ul.dropdown a:active{color:orange;}
ul.dropdown li a{padding-top:12px;height:
ul.dropdown li:last-child a{border-right:none;}
ul.dropdown li.hover,ul.dropdown li:hover{color:#000;positi
ul.dropdown ul{z-index:600;visibility:
ul.dropdown ul li{width:159px;font-weight
ul.dropdown ul li a{border-right:none;width:
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.
CSSHTML
Last Comment
TrueBlue
ASKER
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]()
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.
ul.dropdown ul li{width:159px;font-weight
ul.dropdown ul li a{border-right:none;width:
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.
ul.dropdown ul li a{border-right:none;width:
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.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
ASKER
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
ul.dropdown ul li a{border-right:none;width:
</script>
Any ideas?
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
ul.dropdown ul li a{border-right:none;width:
</script>
Any ideas?
try this instead:
<style type="text/css">
ul.dropdown ul li{width:159px;font-weight
ul.dropdown ul li a{border-right:none;width:
</style>
<style type="text/css">
ul.dropdown ul li{width:159px;font-weight
ul.dropdown ul li a{border-right:none;width:
</style>
Don't add! Replace already existed ones.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
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
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
Well, changing colour doesn't make menu inoperative.
Before I posted those line I tested them and they worked.
![sample]()
Try again beginning from style.css
Before I posted those line I tested them and they worked.
Try again beginning from style.css
ASKER
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
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
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
here at ul.dropdown ul li
add border-bottom:1px solid; and remove border-right:~~;
add border-bottom:1px solid; and remove border-right:~~;
ASKER CERTIFIED SOLUTION
Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a questionASKER
SSupreme,
That looks great :)
That looks great :)
Have a look at this: