CSS/HTML Navigation Question

[Tom59593]

Hey guys,

I have a (hopefully quick) question regarding to coding a drop-down menu using CSS.

If you click HERE you will see what I am attempting to achieve...

I am having issues creating the actual navigation bar (with the brown background) for some reason. I have never coded a drop-down menu with CSS (always used Flash in the past but am trying to learn this way). What I want to do is the following:

1) Have three links on the navigation bar (Products, Services, Information) each with their own drop down menu.
2) The drop down menu needs to be transparent so that the image below is visible.
3) The drop down menu needs to have a brown border
4) The drop down menu needs to have a rollover for the hover states of the links

In addition to this navigation bar, I have moved all the links to text based versions in the header to account for browsers without support for hover states and transparency, so as not to impede user's navigation options.

Things I don't care about that you might see in the screenshot:
1) I don't care about the drop shadow (it would be nice to have, so please tell me if you know a SIMPLE way to do it)
2) I don't care about the little arrows pointing downwards next to first level navigation
3) I don't care about the vertical seperators in the screenshot between the first-level navigation items...they aren't really necessary.

Here is my thought (but I can't get it to work):

<div id="navigation">
<ul id="navbar">

<li><a href="#">Products</a>
<ul>
<li><a href="#">Product Overview</a></li>
<li><a href="#">Cloth Diapers</a></li>
<li><a href="#">Accessories</a></li>
</ul>

<li><a href="#">Services</a>
<ul>
<li><a href="#">Services Overview</a></li>
<li><a href="#">Clothing Design</a></li>
<li><a href="#">Consulting</a></li>
</ul>

<li><a href="#">Information</a>
<ul>
<li><a href="#">Community</a></li>
<li><a href="#">Why Cloth?</a></li>
<li><a href="#">How-To's</a></li>
</ul>

</ul>
</div>

CSS:

#navbar 
{
margin-top: 0px;
padding-top: 8px;
}

#navbar li
{
list-style: none;
float: left; 
}

#navbar li a 
{
display: block;
padding-bottom: 7px;
color: #ffffff;
text-decoration: none; 
}

#navbar li ul 
{
display: none;
width: 150px; /* Width to help Opera out */
background: url("../images/trans_brown.png");
font-size: 11px;
}

#navbar li:hover ul 
{
display: block;
position: absolute;
margin: 0px;
padding-top: 0px;
padding-left: 0px;
}

#navbar li:hover li 
{
float: none;
padding-top: 2px;
padding-bottom: 0px;
border-bottom: 1px solid brown;
border-right: 1px solid brown;
border-left: 1px solid brown;
}

#navbar li:hover li a 
{
padding-left: 2px;
color: #ffffff; 
}

#navbar li li a:hover 
{
background: url("../images/trans_brown.png"); 
}

That's what I tried...and it's kind of close. What I need exactly is the first item (Products) needs to be 20px from the left side of the div, and each item in the top-level list need to be about 10px apart. Each of those need a drop-down with transparency and border. After that I think I can figure it out on my own...I did get the transparency to work by using a 5x5 transparent .png image for the background...

Perhaps anyone has an idea? I think I am going about it with a bad skeleton or idea or something...

THANK YOU SO MUCH IN ADVANCE!!!

 

[PixelPusher]

No offense but I think the structure is a little querky. The padding on the anchors in the main LIs are the only thing that is allowing the user to select a drop down item. Without the padding the drop down disappears before a link is able to be selected. This seems kinda like a hack. There has to be a better method.

As far as opacity, a transparent.png would work for the most part, but earlier versions of IE hate transparent pngs (and we hate IE, so there haha). Instead you can use the {opacity:0.7;} style in css, but again getting back to IE, it hates this also, the hack to fix that escapes me right now.

Off the top of my head, the better solution to creating this menu would be to use display inline for the main LIs and position them absolute. Position the main UL either relative or absolute. Set the overflow on each main LI to hidden (static state). Have a sub UL for each main LI. On the hover state for the main LI, set the overflow to visible. You will need to set the height for each main LI for the static state (so the sub UL for each link is hidden) and then for the hover state (so the sub UL for each link becomes visible)

I am sorry for the explanation and no code. I will try to put this together in the next few days, so you can see what i am rambling on about.

Good luck.

 

[Tom59593]

Thanks for the ideas! I must admit that I don't like the method I've posted here...it was merely an attempt to get what I wanted. All in all, the client may request a flash navigation bar (to get the nifty transition effects), so that's why I doubled up on the navigation at the top.

I will try to use some of the ideas you posted about, and I will let you know what I find!

THANKS!!!

-Tom-

 

[PixelPusher]

Your welcome,
Flash is nice, and fancy...but from an seo perspective, none of the anchor text will be picked up (indexed). Have you considered javascript? Jquery has some cool effects, and its relatively easy to use.

The menu in css is the best idea imo, because it has a better acceptance level (people can have js turned off and or no shockwave/flash plugin for the browser).

 

[JMeZigns]

@PixelPusher: "As far as opacity, a transparent.png would work for the most part, but earlier versions of IE hate transparent pngs (and we hate IE, so there haha). Instead you can use the {opacity:0.7;} style in css, but again getting back to IE, it hates this also, the hack to fix that escapes me right now."

Have you tried the DD_belatedPNG js file? It is incredibly easy to integrate and has very little compatibility issues with other scripts.

Give it a shot and let me know what you think. I am using this fix until I find a reason not to.

 

[PixelPusher]

@PixelPusher: "As far as opacity, a transparent.png would work for the most part, but earlier versions of IE hate transparent pngs (and we hate IE, so there haha). Instead you can use the {opacity:0.7;} style in css, but again getting back to IE, it hates this also, the hack to fix that escapes me right now."

Have you tried the DD_belatedPNG js file? It is incredibly easy to integrate and has very little compatibility issues with other scripts.

Give it a shot and let me know what you think. I am using this fix until I find a reason not to.



JMeZigns
Freelance Web Design for Small Business, Personal or Event Planning

I have not tried this (or heard of it) but thanks for the info JM. I will take a look next week.

 

[mivpl]

Off the top of my head, the better solution to creating this menu would be to use display inline for the main LIs and position them absolute. Position the main UL either relative or absolute. Set the overflow on each main LI to hidden (static state). Have a sub UL for each main LI. On the hover state for the main LI, set the overflow to visible. You will need to set the height for each main LI for the static state (so the sub UL for each link is hidden) and then for the hover state (so the sub UL for each link becomes visible)

 

[PixelPusher]

Tom, i have the solution about 95% complete Just got some alignment issues in IE8. If you want to take a look here is the beta, haha.

CSS

ul#dropdown {
position:absolute;
top:50px;
left:50%;
width:604px;
height:35px;
background-color:#ccc;
border:1px #ccc solid;
margin:0 0 0 -302px;
padding:0;
}
ul#dropdown li {
list-style-type:none;
display:inline;
position:absolute;
top:0;
width:120px;
height:35px;
line-height:35px;
background-color:#ddd;
text-align:center;
padding:0;
margin:0;
overflow:hidden;
}
ul#dropdown li:hover {
height:120px;
overflow:visible;
background-color:#eee;
}
ul#dropdown li#products {
left:0;
}
ul#dropdown li#purchase {
left:121px;
}
ul#dropdown li#support {
left:242px;
}
ul#dropdown li#partners {
left:363px;
}
ul#dropdown li#company {
left:484px;
}
ul#dropdown a:link,  ul#dropdown a:visited{
font:bold 9pt Arial, Helvetica, sans-serif;
color:#555;
text-decoration:none;
text-transform:capitalize;
text-align:center;
padding:10px 0 0 0;
margin:0;
}
ul#dropdown a:hover {
color:#0088CC;
}
ul#dropdown ul.submenu {
position:absolute;
top:35px;
left:-1px;
width:220px;
margin:0;
padding:1px 0 0 0;
border-left:1px #ccc solid;
border-right:1px #ccc solid;
background-color:#ccc;
}
ul#dropdown ul.submenu li {
position:relative;
top:0;
left:0;
list-style-type:none;
display:list-item;
height:25px;
text-indent:10px;
margin:0 0 1px 0;
padding:0;
overflow:visible;
}
ul#dropdown ul.submenu a:link, ul.submenu a:visited {
width:220px;
height:20px;
display:block;
background-color:#fff;
font:normal 9pt Arial, Helvetica, sans-serif;
color:#555;
text-decoration:none;
text-transform:capitalize;
text-align:left;
padding:5px 0 0 0;
margin:0;
}
ul#dropdown ul.submenu a:hover, ul.submenu a:focus {
color:#0088CC;
background-color:#eee;
}

HTML

<ul id="dropdown">
	<li id="products"><a href="#">products</a>
    	<ul id="prodsub" class="submenu">
            <li><a href="#">Product 1</a></li>
            <li><a href="#">Product 2</a></li>
            <li><a href="#">Product 3</a></li>
            <li><a href="#">Product 4</a></li>
        </ul>
	</li>
    <li id="purchase"><a href="#">purchase</a></li>
    <li id="support"><a href="#">support</a></li>
    <li id="partners"><a href="#">partners</a></li>
    <li id="company"><a href="#">company</a></li>
</ul>

 

[PixelPusher]

Ok here is a working version. Still think I can refine it a little...but nevertheless this works. Tested in IE8, FF3.5, Safari 4, Opera 9.6, Chrome.

CSS

/* CLEAR STYLES */
body, ul, li, div, a {
padding:0;
margin:0;
}
/* MAIN MENU */
ul#dropdown {
position:absolute;
top:50px;
left:50%;
width:604px;
height:35px;
background-color:#ccc;
border:1px #ccc solid;
margin:0 0 0 -302px;
}
ul#dropdown li, ul#dropdown li.nodrop:hover {
list-style-type:none;
display:inline;
position:absolute;
top:0;
width:120px;
height:35px;
overflow:hidden;
}
ul#dropdown li#products {
left:0;
}
ul#dropdown li#purchase {
left:121px;
}
ul#dropdown li#support {
left:242px;
}
ul#dropdown li#partners {
left:363px;
}
ul#dropdown li#company {
left:484px;
}
ul#dropdown li:hover {
overflow:visible;
}
ul#dropdown a:link, ul#dropdown a:visited {
display:block;
width:120px;
height:35px;
line-height:35px;
background-color:#ddd;
text-align:center;
}
ul#dropdown a:link,  ul#dropdown a:visited {
font:bold 9pt Arial, Helvetica, sans-serif;
color:#555;
text-decoration:none;
text-transform:capitalize;
text-align:center;
padding:10px 0 0 0;
}
ul#dropdown a:hover {
color:#0088CC;
background-color:#eee;
}
/* SUB-MENU */
ul#dropdown ul.submenu {
position:absolute;
top:35px;
left:-1px;
width:auto;
padding:1px 0 0 0;
overflow:visible;
}
ul#dropdown ul.submenu li {
position:absolute;
left:0;
list-style-type:none;
display:list-item;
width:auto;	
height:25px;
margin:0 0 1px 0;
text-align:left;
overflow:visible;
border:1px #ccc solid;
}
/* POSITIONING FOR EACH LEVEL OF THE SUB-MENU */
ul#dropdown ul.submenu li.one {
top:0;
}
ul#dropdown ul.submenu li.two {
top:26px;
}
ul#dropdown ul.submenu li.three {
top:52px;
}
ul#dropdown ul.submenu li.four {
top:78px;
}
/* STYLE FOR THE STATIC STATE OF SUB-MENU LINKS */
ul#dropdown ul.submenu a:link, ul#dropdown ul.submenu a:visited {
width:auto;
height:20px;
display:block;
padding:5px 10px 0;
background-color:#fff;
font:normal 9pt Arial, Helvetica, sans-serif;
color:#555;
text-decoration:none;
text-transform:capitalize;
text-align:left;
white-space:nowrap;
overflow:visible;
}
ul#dropdown ul.submenu a:hover, ul#dropdown ul.submenu a:focus {
color:#0088CC;
background-color:#eee;
}

HTML

<ul id="dropdown">
    <li id="products"><a href="#">products</a>
        <ul class="submenu">
            <li class="one"><a href="#">Product 1</a></li>
            <li class="two"><a href="#">Product 2</a></li>
            <li class="three"><a href="#">Product 3</a></li>
            <li class="four"><a href="#">Product 4</a></li>
        </ul>
	</li>
    <li id="purchase" class="nodrop"><a href="#">purchase</a></li>
    <li id="support"><a href="#">support</a></li>
    <li id="partners"><a href="#">partners</a></li>
    <li id="company"><a href="#">company</a></li>
</ul>

Enjoy!

 

[PixelPusher]

ahh forgot i changed this....for style "ul#dropdown ul.submenu li" change the width from "auto" to "220px"

 

[Tom59593]

Thanks for that work, pixelpusher!

I will try it out as soon as I get home!

-Tom-

 

[PixelPusher]

No problem Tom, your welcome. I love these css challenges
I was trying to make the width of the drop down list expandable. Meaning it would expand to width of the largest link within it. I got it to work in almost every browser, but can you guess which one would not comply?

Ahh yes...our good buddy IE!

That is why I mentioned the change from "auto" to "220px" below. That number is the width of the drop down so feel free to adjust that for your desired width. If you have multiple drop downs that will vary in width, then you would need to make an id for each one set the width in there. If you have any questions feel free to ask.