Jump to content

CSS Menu


Graeme

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...