Site Navigation

When you click the nav buttons on the home page the text moves to the right, which is not a desired effect (?) Below is a link to the site. Please advise. Thank you.


index.html

In your home.css file, you are specifying the active link to be centered. This is what is causing the text to move when clicked. If you took out the text-align center:
a:active {
color: #034248;
text-align: center;
}

so that this block looks like this:
a:active {
color: #034248;
}

The text would not jump around when clicked on.

I changed home.css to align left and that fixed it. However, it also added boxes on top of the nav buttons in Firefox only. If you can open it in Firefox you'll see what I mean. Please advise.


(first post)
When you click the nav buttons on the home page the text moves to the right, which is not a desired effect (?) Below is a link to the site. Please advise. Thank you.


index.html

Did you make any modifications to the home menu manually? It looks like the structure of the menu on the page is causing this issue. The correct structure of the menu should be something like this:
<ul class="level-0" id="cssmw0">
<li class="parent"><a href="#">Item 1</a>
<ul class="level-1">
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>

From what I could tell, there are a lot of extra ul and li tags in your menu.

I did not manually change the home menu. I have removed some ul & li tags as per your response, but that didn't help. I moved the FAQ page so it was a drop down under Services. It was easy to do with "modify site assist site", and it solved the index page nav problem however, the FAQ button wider then the other nav buttons and Although I tried, I cannot seem to adjust it.


index.html

In the menu.css file for that menu, find the block of code that looks like this:
ul#cssmw_content ul.level-1 > li > a {
background-color: #7CBAAA;
background-image: none;
border-bottom: solid 1px #3B6E72;
border-left: solid 1px #fff;
border-right: solid 1px #3B6E72;
border-top: solid 1px #fff;
color: #173232;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
margin: 0 0 0 0;
padding: 5px 5px 5px 5px;
text-decoration: none;
text-transform: uppercase;
width: 100px;
}

Change the width at the bottom to be 85px instead of 100px.