CSS Menu

[Graeme]

Hello All,

 

I am adapting a template and I have used my own menu style. However there are a couple of things that don't look right. I could alter them easily on the other site but for some reason this is proving a litle tricky.

 

On the menu there is a gap on the bottom and when you use the menu I would like a gap between the drop down boxes.

 

I guess it might be a browser thing as I have had no probs before.

 

Thank you as always,

 

Best wishes

Graeme

[Andrea]

My crystal ball was in my trunk, so I just went outside and brought it in.

 

Nope -- still can't help you.

 

 

 

 

How about a link - or at least the code

[Graeme]

Arghhhhh, I forgot to put in the URL Andrea,

 

Thank you

 

http://www.btinternet.com/~gj.d/garytest/

 

Best wishes

Graeme

[falkencreative]

Three things:

 

-- remove any padding/margins from the <li>s

-- add "display:block" to the <a> tags, so padding works properly

-- with those two changes in place, you may need to tweak the padding on the <a> tags

[Graeme]

Hello,

 

I tried your advice but everything went out of line, without being cheeky may I ask which tags ect, you suggested to change and which style sheets? I played around with both but could not see any improvement!

 

Best wishes

Graeme

[falkencreative]

Here is what I would do...

 

Business.css:

-- remove from business.css, move to menu.css (keep all styling relating to menu in one place):

 

#menu a:link, #menu a:visited, #menu a:active {
background-color: #F7CB33;
padding: 13px;
text-decoration: none;
color: #000000;
}
#menu a:hover {
padding: 8px;
background-color: #F01E1E;
text-decoration: none;
color: #FFFFFF;
}

 

Menu.css

Replace with this:

 

#menu ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}

#menu li { /* all list items */
float: left;
position: relative;
width:   8em;
/* padding: 1em; */
background-color: #F7CB33;
   border:solid 1px #FFF;
list-style: none;
}

#menu li a { display: block; padding:13px; }

#menu li ul { /* second-level lists */
display: none;
left:-1px;
position:absolute;
top:42px;
}

li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}

#menu li:hover ul, #menu li.over ul { /* lists nested under hovered list items */
display: block;
}

#menu a:link, #menu a:visited, #menu a:active {
background-color: #F7CB33;
text-decoration: none;
color: #000000;
}
#menu a:hover {
background-color: #F01E1E;
text-decoration: none;
color: #FFFFFF;
}

 

My changes included:

-- standardizing the padding on <a> elements

-- removed the padding on <li>s

-- adding display:block to <a> elements

[Graeme]

Thank you so much my friend, that's amazing advice. I thought I was getting the two style sheets confused but didn't thunk to keep the menu in one.

 

Thanks again,

 

Best wishes

Graeme

[Graeme]

Hello again,

 

I wondered if the menu is showing right. When I view the page locally it looks great but when I upload it and view it there is a gap on the box at the bottom on the menu.

 

Thank you,

 

Best wishes

Graeme

[falkencreative]

Have you uploaded your revised CSS files? When I look at the page, it appears that you haven't. (or maybe you uploaded them to the wrong location?)

[Graeme]

Hello,

 

Thank you, I didn't upload all the style sheets.

 

Best wishes

Graeme

[Graeme]

Hello Again,

 

I would like to have some space between the menu list items, along the top horizontally and also the drop down lists. Do I do this in the menu.css file?

 

Thank you as always,

 

Best wishes

Graeme

[falkencreative]

I would like to have some space between the menu list items, along the top horizontally and also the drop down lists. Do I do this in the menu.css file?

Yes, you would need to add margins to your <li>s.

 

For spacing between the horizontal items, you'd need to add a right margin to #menu li

 

For spacing between the items in the dropdown list, you'd need to add a bottom margin to #menu li li, as well as removing any right margin due to the line above.