2 replies [Last post]
DesignVHL
Offline
newbie
Chicago
Last seen: 17 years 43 weeks ago
Chicago
Joined: 2004-12-09
Posts: 2
Points: 0

Hi there,

First I should mention, I have been doing a lot of research to learn CSS, and this is basically the first time implementing it for my company's website. I have A LOT to learn still! I'm using Dreamweaver MX and MX 2004 (2004 seems to keep crashing on me today, and i can't run it)...anyways...

I am working on a dropdown menu using pure CSS....WHICH is a library item that I am dropping into a table cell below the top banner on the index page, and others.

However, I'm having problems with some styling and the best way to work some things.

First, if you click here:

http://www.sheersoundcable.com/images/ss_interface_sample.jpg

I hope someone can help me!! I'm so frustrated!

You can see HOW I want the nav to look.

I seem to have a problem with the aligning of the text, as well as roll over effects: basically, I would like my nav button to turn blue w/ white text. And I'd like to have my buttons closer together, having it look as close as possible to my interface img above.

Also having issues w/ IE...which I assume would happen.

Here is my CSS and HTML code (remember, no body or title tags because it's an lbi item:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;

}

#nav a {
display: block;
width: 10em;
color: rgb(0,50,94);
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
}

#nav li {
float: left;
width: auto;

}

#nav li ul {
position: absolute;
background: #C5D1DC;
width: 10em;
left: -999em;
margin: 3px;
border: 1px solid rgb(0,50,94);
padding:5px;

}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

.button {
background-color: #C5D1DC;
padding: 3px;
border-top: 1px solid #003A66;
border-right: 0px solid #003A66;
border-bottom: 1px solid #003A66;
border-left: 0px solid #003A66;
}
</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

<ul id="nav">

<li class="button"><a href="#">Products</a>
<ul>
<li cla><a href="#">Audio</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Home Automation</a></li>
<li><a href="#">Lighting</a></li>
<li><a href="#">PDF Downloads</a></li>
<li><a href="#">Part Index</a></li>

</ul>
</li>

<li class="button"><a href="#">News and Events </a>

<ul>
<li><a href="#">New Products</a></li>
<li><a href="#">User Profile</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Tradeshows</a></li>
<li><a href="#">Newsletter</a></li>

</ul>
</li>

<li class="button"><a href="#">Order</a>
<ul>
<li><a href="#">Distributor List</a></li>
</ul>
</li>

<li class="button"><a href="#">Corporate</a>
<ul>
<li><a href="#">Company Bio</a></li>
</ul>
</li>

<li class="button"><a href="#">Technical Resources</a>
<ul>
<li><a href="#">Connector Cross Reference</a></li>
<li><a href="#">Wire Gage</a></li>
<li><a href="#">Glossary</a></li>
</ul>
</li>

</ul>

(IF you need me to, I can send you my site files over email) I really really appreciate all the help you guy's can give me! I'm on a tight deadline, and I really want to use CSS. If I can't get this to work, I have to take out the drop down menu all together and go w/ a boring static menu system that will add in numerous extra pages....

THANKS![/url]

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Please help with CSS Drop Down nav...

Hi DesignVHL,
Can you put the files online somewhere and provide a link.

A couple of things that may help.
IE renders space around list items strangely, remove any white space between the items.
Set the padding and margin to 0 on the LI and add what you want back in later.

Hope that helps

DesignVHL
Offline
newbie
Chicago
Last seen: 17 years 43 weeks ago
Chicago
Joined: 2004-12-09
Posts: 2
Points: 0

Please help with CSS Drop Down nav...

Hi Tony,

Thanks for the response!

Here is a link to the site (in progress) I want to get the nav working before I work on the template pages...but it's killing me on time! Smile

http://www.sheersoundcable.com/test/index2.html

Also here is a link to just the nav:

http://www.sheersoundcable.com/test/nav_bar_workfile.html

Is there a better way to code this, without using that image for the bar? Couldn't I use div tags? That's the light blue space w/ the dk blue lines at the top (part of the nav bar).