close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 or 2018 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Sub menu horizontal alignment

Thread began 7/14/2010 1:56 am by chijo410927 | Last modified 7/16/2010 3:01 pm by Eric Mittman | 746 views | 5 replies |

chijo410927

Sub menu horizontal alignment

I'm having issues properly aligning my third level menu boxes.

URL: testsite/

Mouseover the "Services" top-level nav item. Then mouseover the 2nd level sub menu item "Spay and Neuter Packages." Notice how the 3rd level sub menu item overlaps the 2nd level boxes.

How do I control this alignment?

Thanks much.

Sign in to reply to this post

Jimmy Wu

In your menu.css file, find this block of css:
ul#cssmw1 ul.level-2 > li > a, ul#cssmw1 ul.level-2 > li > a:link {

You would want to change the margin: 0; to this:
margin:0 0 0 45px;

So the end result is:
ul#cssmw1 ul.level-2 > li > a, ul#cssmw1 ul.level-2 > li > a:link {
background-color:#517595;
background-image:none;
border-bottom:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
color:#FFFFFF;
display:block;
font-family:"Trebuchet MS",Helvetica,sans-serif;
font-size:12px;
font-style:normal;
font-weight:bold;
margin:0 0 0 45px;
outline-style:none;
padding:5px 10px;
text-decoration:none;
text-transform:none;
width:auto;
}

Sign in to reply to this post

chijo410927

Perfect, that works. Thanks so much for the reply and advice.

Question for the future...

Why the 45px margin specifically? I have the width of the first sub level set to auto.

Sign in to reply to this post

Eric Mittman

The 45px represents the amount of overlap that was occurring with the other element, you are essentially just saying to start out 45px from the left of where it would normally start.

Sign in to reply to this post

chijo410927

Thank you for your reply.

Yes, I understand the CSS margin and that it will be 45px. My question was how you knew that 45px would do the trick? I don't have my sub menu set to a set width of 90px. If that were the case, I would have seen that my 3rd level menu was starting in the middle and I would have guessed that 45px might have worked.

How did you arrive at the 45px number? Is this "magic" number to use for the left margin with setting the first sub level to auto width?

thanks

Sign in to reply to this post

Eric Mittman

I did not personally discover the 45px value, but when a specific value like this is mentioned it is usually the result of some css debugging done with a tool like Firebug for FireFox. This is a terrific tool that will allow you to inspect objects and page parts on the fly and make adjustments to them. Normally when I see a css issue like this it is the first thing that I will try. I inspect the element then I look at the css that is involved and start making adjustments.

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...