Solved

Need a few tweaks to drop down menus / buttons

Posted on 2011-03-18
8
243 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
 

Author Comment

by:TrueBlue
ID: 35173290
elvin66,

Yes, I am referring the text links (OWH Benefits, etc.) on the top horitzontal menu.
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
2 CSS questions 11 33
Menu Inconsistent 3 20
How can I put a code without running my other code 4 18
Bootstrap 3 and Angular 2 12 23
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

708 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now