CSS Drop-Down Menu Help

Hello,

I have to issues (link below inside the xxx)

xxxhttp://www.redtilldead.com/temp/index.phpxxx

1 - The drop-down menu does not seem to be working :)

2 - It does not seem to fit across the 780 pixels. If you look at the
left side, it does not line up with a 780px jpg. I tried some things but, when I remove certain code, I lose the nice white spacers between the main navigation which obviously I need.

If anyone can help me, I would apprecaite it.

Struggling CSS guy.

DN

ul li a {
padding: 5px 28px 5px 28px;
display: block;
text-decoration: none;
color: white;
border-top: 1px solid white;
background: #E10533;
margin-left: 1px;
white-space: nowrap;
}

You have a margin to the left. This is a common problem for all web developers! You can set the first li a to id="head" then set


ul li a#head {
margin-left: 0;
}


You may have to increase the size of one of the li a's so that the width of the ul is equal to the width of the "archive"

Hello,

Thanks for the help.

When I entered your code, I lost the colors (the main nav is red). I would like to keep the separations between the main navigation (the white lines).

Also, the drop-down is not working.

I think I am so close to getting this to work :)

Suggestions?

Thanks,

DN

not just margin-left: 0; you have to keep the original code - just replace that one area

let me type this all out for you:

css

ul.nav { list-style: none; }
ul.nav li { float: left; display: inline; }
ul.nav li a { float: left; display: block; }
ul.nav li a:hover { text-decoration: none; }

ul#menu.nav {
width: 780px;
border-left: #FFF 1px solid;
height: 25px; /* clears float */
}
ul#menu.nav li {
height: 25px; /* clears float */
}
ul#menu.nav li a {
width: 156px;
height: 25px;
line-height: 25px; /* when equal to the height, centers text vertically */
text-align: center;
background-color: red; /* you wanted the background red? */
color: #222;
border: #FFF 1px solid;
border-left: 0;
}



<ul id="menu" class="nav">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>


you are going to use a nav a lot throughout any website, so its best to create a class! therefore when you want to make another nav bar in the future, you have the basics (float: left;, etc) down already!

Hello,

I cannot tell you how much I appreciate the help.

I tried to do what you said and it is not looking right :)

This is my waterloo :)

Hopefully last help.

DN

Sammi: read over your suggestions but still do not know what I am doing wrong. Frustrating as I think we are close.

Thanks.

DN

can you upload the changes to the server, so I can see where the problem is. the code I posted above is the right code -thanks

Hello,

xxxhttp://www.redtilldead.com/temp/index.phpxxx

I cannot express how much I appreciate this.

Been trying so many different examples but they just do not work.

Thanks,

DN

Hello,

I tried a new source code I found. The drop-down works but it does not when I place it into a PHP code. Links within the xxx.

Menu
xxxhttp://www.redtilldead.com/temp-youtube/dropdownmenu.htmlxxx

Page
xxxhttp://www.redtilldead.com/temp-youtube/index.phpxxx

Can anyone tell me why it is not working within the PHP page when it is working fine by itself?

Thanks,

DN