Styling the menu

[electrifire]

Hi

I'm trying to implement the standard drop down menu which I have done but the menu needs styling but not sure why the menu had a white background, so you couldn't see the menu so I changed it to a random colour and the whole header changes here

www.electrifire.co.uk/cms


What is causing the whole header to change colour I just want a colour scheme like this

www.electrifire.co.uk

[uniqu3]

First i would fix CSS and xHTML issues:

http://jigsaw.w3.org/css-validator/vali ... k%2Fcms%2F
http://validator.w3.org/check?verbose=1 ... k%2Fcms%2F

And to fix the menuwrapper height add either height:something px; to #menuwrapper in CSS or add before in template.

[Dr.CSS]

Install Firefox with the Web Dev. tool bar, use the outline current element to see what things are called, use edit css to see what has what colors etc. then change till it looks good, copy paste into style sheet...

[electrifire]

thanks the ff developer tools are much better then google chrome 

[electrifire]

Just one thing I'm stuck on now 

The menu remains hidden until you hover over it, I've gone through the css and found this;

ul#primary-nav ul {
/* make the ul stay in place so when we hover it lets the drops go over the content below else it will push everything below out of the way */
position: absolute;
/* top being the bottom of the li it comes out of */
top: auto;
/* keeps it hidden till hover event */
display: none;

I tried removing this line of code but it still remains hidden, I also found a part which says if the font weight is bold:

ul#primary-nav li a.menuactive {
color: #000;
/* bold to set it off from non active */
font-weight: bold;

I have tried to change some font weights but nothing I do seems to show the rest of the menu other then the home page 

Oh 1 last thing bullet points, the menu is showing bullet points but found this code here:

ul#primary-nav, ul#primary-nav ul {
/* remove any default bullets */
list-style-type: none;
margin: 0;

Doesn't that say there will be no bullet points?

www.electrifire.co.uk/cms and I'm using the Navigation: CSSMenu - Horizontal menu

[Peciura]

The menu remains hidden until you hover over it...

Obviously white object looks invisible on white background . Set background for all links in #primary-nav

Code: Select all

ul#primary-nav li a {
	background:  url(uploads/ngrey/nav.png) repeat-x left -50px;
}

change background position on any subsequent element if needed ('a.menuactive' in this case)

Code: Select all

ul#primary-nav li a.menuactive {
	background-position: left 0px;
}

[electrifire]

ah thanks I knew white was causing it to go wrong but I was looking for the color code for white as thought it was how its styled.

Any advice on the bullet points?

Edit

I changed the background image and think I have the menu styled how I want but the parent tabs only become active when hovered over and I can't seem to change it so its active all the time, Fire fox developer tools show its set to transparent but I cant find this in the menu css

any ideas, I just want the menu to be active all the time

[electrifire]

little update, I've managed to edit the menu so there is no active page but the menu button doesn't display the image until its hovered over, I tried copying and pasting the css from hover to parent but no matter what I do I can get the menu to display the grey image until the mouse is hovered over.

I cant seem to shift the bullet points either


Any help is appreciated

[Dr.CSS]

Do you have an image of what it should look like?...

ul {list-style:none} is code to remove the bullets...

[electrifire]

Thanks for the bullet point the default css had this:

ul#primary-nav, ul#primary-nav ul {
/* remove any default bullets */
list-style: none;


But what ever I did wouldn't remove the bullet points!

The images is already there but only when you hover over rather then always there

[Dr.CSS]

I see nothing that shows me what you are trying to achieve, look of final product...

[electrifire]

let me add linky

www.electrifire.co.uk/cms

if you hover over the electrical tab it turns grey and expands down, I want the grey to be shown behind the word electrical all the time