Solved

Need a few tweaks to drop down menus / buttons

Posted on 2011-03-18
8
269 Views
Last Modified: 2012-05-11
Hi!

I added drop down menus to the top navigation bar for the following page:
http://www.orlando-web-hosting.net/about-us1.htm
I would greatly appreciate any specific code modifications necessary to fix the following items.

1) When a user hovers over any of the buttons on the top navigation bar or the buttons on the drop down menus, I need the button's text to change color to magenta.

2) Remove the bullet to the left of each of the buttons on the top navigation bar.

3) Relocate the drop down menus so they are aligned with the left bar between each button.
The menus are currently to the right of the left bar.

4) I need the horizontal lines between the drop down buttons to remain black even when the user hovers over them.

5) Make the vertical lines between the buttons on the top navigation bar long enough to touch the top of the light blue background.

Here are the selectors from the style sheet that control the drop down menu

ul.bottommenu{background-color:#9FF;list-style-type:none;text-align:center;height:22px;width:750px;margin:0;padding:0;}
ul.bottommenu li a{border-right:1px solid #016394;font:bold 11px verdana, sans-serif;border-left:1px solid #5fabe7;color:blue;text-decoration:none;white-space:nowrap;margin:0 0 0 -4px;padding:5px 6px;}
ul.bottommenu li a:hover{font:bold 11px verdana, sans-serif;color:#F0F;text-decoration:underline;}
ul.dropdown{position:relative;}
ul.dropdown li{width:159px;height:22px;text-align:center;font-weight:700;float:left;background-color:#9FF}
ul.dropdown a:active{color:orange;}
ul.dropdown li a{padding-top:0px;height:22px;text-align:center;display:block;border-right:1px solid #333;font:bold 14px verdana, sans-serif;color:blue;}
ul.dropdown li.last a{border-right:none;}
ul.dropdown li.hover,ul.dropdown li:hover{color:#F0F;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:#9FF;color:#000;border-bottom:1px solid;float:none;}
ul.dropdown ul li a{border-right:none;width:100%;display:inline-block;padding-top:4px;color:blue;}
ul.dropdown ul ul{left:100%;top:0;}
ul.dropdown li:hover > ul{visibility:visible;}
0
Comment
Question by:TrueBlue
  • 5
  • 3
8 Comments
 
LVL 20

Expert Comment

by:Mark Brady
ID: 35169054
Looks like most of these problems you have sorted out but to change the menu text to magenta on hover, you only need to add        :hover{color:magenta;} and put the element name before the :

You might want to find the HTML number for magenta and use that instead like for eg:

.menu
{
color:#ffffff; // white
}
.menu:hover
{
color:#DDC232;
}

For this question can you post just the things you are still wanting help with as I see some of them are solved already. Thanks
0
 

Author Comment

by:TrueBlue
ID: 35169643
elvin66:

Actually, none of the items I have listed above have been resolved yet :)
I was hoping to handle the color corrections in the rules included.
I tried changing this rule, but it seemed to have no effect.
ul.dropdown li.hover,ul.dropdown li:hover{color:#F0F;position:relative;}
Something is pushing down the vertical lines between the buttons on the navigation bar by 10 pixels.
Any specific code modifications as to how to fix ths CSS would be appreciated.
0
 
LVL 20

Expert Comment

by:Mark Brady
ID: 35173195
When you say "buttons" are you refering to the text (not buttons) on the top horizontal menu (OWH Benifits | Domain Registration etc.... ?
0
Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

 

Author Comment

by:TrueBlue
ID: 35173290
elvin66,

Yes, I am referring the text links (OWH Benefits, etc.) on the top horitzontal menu.
0
 
LVL 20

Expert Comment

by:Mark Brady
ID: 35173372
Ok I've just downloaded your style.css file and going through it. I'll fix it up and post it back when it looks right ok.
0
 
LVL 20

Expert Comment

by:Mark Brady
ID: 35173554
ok I have fixed number 1 and number 2.

1: To change hover color to magenta, you need to tell CSS that a:hover has the color change. Here is the code.

ul.dropdown a:hover{
color:magenta;
}

you already have ul.dropdown:hover{
} so just add the "a" to it like I have done above. Now all the hovered menu items will change to magenta.

2: Remove bullets to the left of the dropdown sub menu items.
    Add this line
    list-style-type: none;
    to the "ul li" CSS. It should look like this

ul li{
font-size:12px;
list-style-type: none;
}

you will find it just after the

tr{
font-family:Arial, Arial, Helvetica, sans-serif;
text-align:left;
font-size:10px;
}

3: ??? Can't find the code where you have the " | " bars inserted. I'm sure it is something very simple though.

4: Keep the horizontal lines under each dropdown menu item black. Here is the code.

ul.dropdown li.hover,ul.dropdown li:hover{
color:#000000;
position:relative;
}

5: As number 3 says, I can't find the code where those pipes are being inserted. Here is an idea that might work though. In the table header styling, add border-right:1px solid #000000; to the table styling so it gives the table header cells a right hand border. To set the height of the table header row (top menu items) force a height on it like this:

height:25px;

Put that in the table header formatting (th). you could even add    overflow:hidden; to it so nothing is seen outside the <th> tags. You will need to reduce your font size so the menu items fit on one line or even better, set the width of the headers <th> to auto or just remove any width settings you have set for them. They should fit on one line by default without any styling code but if not you can individually set each ones width. <th style="width:100px">Menu Item</th><th style="width:200px">Another Menu Item</th>

That should just about cover all of your questions.
0
 

Author Comment

by:TrueBlue
ID: 35175821
elvin66,

Everything is working now, except the text on the drop down menus are not being centered.
Here are the updated rules.

ul.dropdown{position:relative;list-style-type:none;margin:0px;}
ul.dropdown li{width:100px;text-align:center;font-weight:700;float:left;}
ul.dropdown a:hover{color:#FF00FF;}
ul.dropdown li a{height:20px;text-align:center;display:block;font:bold 14px verdana, sans-serif;color:blue;border-right:1px solid #016494;text-decoration:none;padding:4px 6px;}
ul.dropdown li.last a{border-right:none;}
ul.dropdown li.hover,ul.dropdown li:hover{color:#000000;position:relative;}
ul.dropdown ul{z-index:600;visibility:hidden;position:absolute;top:100%;left:-16px;}
ul.dropdown ul li{width:100px;height:44px;font-weight:400;list-style-type:none;background:#9FF;color:#000;border-bottom:1px solid;float:none;}
ul.dropdown ul li a{border-right:none;width:100%;display:inline-block;padding-top:4px;color:blue;}
ul.dropdown ul ul{left:100%;top:0;}
ul.dropdown li:hover > ul{visibility:visible;}

Any ideas?
TIA
0
 
LVL 20

Accepted Solution

by:
Mark Brady earned 500 total points
ID: 35177246
That means you have a border on the left somewhere. Your code is so hard to read and you have repeated some lines of code with different settings. See the following:

You have
ul.dropdown li.hover,ul.dropdown li:hover{color:#000000;position:relative;}

Then you declare
ul.dropdown li:hover > ul{visibility:visible;} When that element was already set in the above rule. Not that is is super important but it does make the code a little hard to read. Ok so look for a left-margin or padding-left somewhere because you have set it to text-align:center; but it is displaying slightly to the right of center on my browser (google chrome). Somehow there is a left padding but I don't see it.

Are you sure you want to have the dropdown width so narrow (100px) ? It is making your menu items wrap when they should be displayed on one line. Try removing the width statement altogether and let it auto size to the right width.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question