CSS Forum

**adp** · 12-07-2009, 01:34 PM

I was able to generate a nav menu using purecssmenu.com and it created an .html file which, when opended in IE looks fine. When I open it in DW it does not look as inteneded at all - just looks like a list. I was hoping to create an include file for the nav that can go on all site pages which would expand on mouseover to reveal additional sub menu pages. Has anyone used files from purecssmenu.com before or can anyone recommend a way to create a drop down nav menu in DW which can be a separate include file?

thanks in advance for any help!

**LadynRed** · 12-07-2009, 02:05 PM

Quote:

When I open it in DW it does not look as inteneded at all

No one is going to browse the web with DW, so it doesn't make a bit of difference how it looks in DW's poor preview mode.

You can include ANY code in an include, so you can use what you already have.

**adp** · 12-07-2009, 03:00 PM

what I meant was, when I open the .html file in Dreamweaver it does not look as it does in IE. So when I insert it in the area on the site page as an include file everything kinda blows up.

**chrishirst** · 12-08-2009, 07:07 AM

If it looks "right" in browsers that's all you need to care about.

Ignore DWs poor excuse for a rendering engine and use Firefox for testing the layout.

**adp** · 12-08-2009, 12:48 PM

hmm... here is the code from the .html Nav page generated from the PureCSSmenu.com site. When you simply open this page, it looks as it should. When I open it in DW it just appears as a list. Furthermore, and more important to me, when I click go insert it on the page as an server side include everything seems to blow up. I am sure that creating a separate drop-down menu which can be used as an include file should not be this difficult but I am stumped.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Generated by PureCSSMenu.com</title>
</head>
<body bgcolor="#FFFFFF">



<style>
ul.cssMenu ul{display:none}
ul.cssMenu li:hover>ul{display:block}
ul.cssMenu ul{position: absolute;left:-1px;top:98%;}
ul.cssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.cssMenu,ul.cssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#111155;
background-repeat:repeat;
border-color:#808080;
border-width:1px;
border-style:solid;
}
ul.cssMenu table {border-collapse:collapse}ul.cssMenu {
display:block;
zoom:1;
height:21px;
float: left;
}
ul.cssMenu ul{
width:218.4px;
}
ul.cssMenu li{
display:block;
margin:2px 0px 0px 2px;
font-size:0px;
}
ul.cssMenu a:active, ul.cssMenu a:focus {
outline-style:none;
}
ul.cssMenu a, ul.cssMenu li.dis a:hover, ul.cssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#111155;
border-width:1px;
border-color:#111155;
border-style:solid;
text-align:center;
text-decoration:none;
padding:2px 5px 5px 10px;
_padding-left:0;
font:normal 11px Tahoma;
color: #ffffff;
text-decoration:none;
cursor:default;
}
ul.cssMenu span{
overflow:hidden;
}
ul.cssMenu li {
float:left;
}
ul.cssMenu ul li {
float:none;
}
ul.cssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.cssMenu li.sep{
text-align:left;
padding:0px;
line-height:0;
height:100%;
}
ul.cssMenu li.sep span{
float:none; padding-right:0;
width:3px;
height:100%;
display:inline-block;
background-color:#808080; background-image:none;}
ul.cssMenu ul li.sep span{
width:100%;
height:3px;
}
ul.cssMenu li:hover{
position:relative;
}
ul.cssMenu li:hover>a{
background-color:#c1c195;
border-color:#c1c195;
border-style:solid;
font:normal 11px Tahoma;
color: #111155;
text-decoration:none;
}
ul.cssMenu li a:hover{
position:relative;
background-color:#c1c195;
border-color:#c1c195;
border-style:solid;
font:normal 11px Tahoma;
color: #111155;
text-decoration:none;
}
ul.cssMenu li.dis a {
color: #557D4F !important;
}
ul.cssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;
height:16px;
}
ul.cssMenu ul img {width:16px;
height:16px;
}
ul.cssMenu img.over{display:none}
ul.cssMenu li.dis a:hover img.over{display:none !important}
ul.cssMenu li.dis a:hover img.def {display:inline !important}
ul.cssMenu li:hover > a img.def {display:none}
ul.cssMenu li:hover > a img.over {display:inline}
ul.cssMenu a:hover img.over,ul.cssMenu a:hover ul img.def,ul.cssMenu a:hover a:hover img.over{display:inline}
ul.cssMenu a:hover img.def,ul.cssMenu a:hover ul img.over,ul.cssMenu a:hover a:hover img.def{display:none}
ul.cssMenu a:hover ul{display:block}
ul.cssMenu span{
display:block;
background-image:url(./images/arrv_white.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:9px;}
ul.cssMenu ul span{background-image:url(./images/arr_black.gif)}
ul.cssMenu ul li:hover > a span{ background-image:url(./images/arr_white.gif);}
ul.cssMenu table a:hover span{background-image:url(./images/arr_white.gif)}
ul.cssMenu li.cssMenui0 {
width:110px;
height:23px;
}
ul.cssMenu li a.cssMenui0{
height:100%;
background-image:url(http://purecssmenu.com/css-menu-maker/templates/vistablack/http://purecssmenu.com/css-menu-maker/templates/vistablack/images/btn3.jpg);
border-width:0px;
font:normal 11px Tahoma;
color:#fff;
}
ul.cssMenu li a.cssMenui0:hover{
background-image:url(http://purecssmenu.com/css-menu-maker/templates/vistablack/http://purecssmenu.com/css-menu-maker/templates/vistablack/images/btn4.jpg);
font:normal 11px Tahoma;
color:#eee;
}
ul.cssMenum0 {
background-color:transparent;
border-width:0px;
padding:0px 0px 0px 0px;
}
ul.cssMenum0>li>a {
padding:8px 10px 0px 10px;
}
ul.cssMenum0 a {
padding:8px 10px 0px 10px;
}
ul.cssMenum0 ul a {
padding:2px 5px 5px 10px;
}
ul.cssMenum0>li {
margin:0px 0px 0px 0px;
}
ul.cssMenum0 li {
margin:0px 0px 0px 0px;
}
ul.cssMenum0 li li {
margin:2px 0px 0px 2px;
}

</style>

<ul class="cssMenu cssMenum0">
<li class=" cssMenui0"><a class=" cssMenui0" href="##">Home</a></li>
<li class=" cssMenui0"><a class=" cssMenui0" href="/aboutus">About Us<![if gt IE 6]></a><![endif]>
<ul class=" cssMenum">
<li class=" cssMenui"><a class=" cssMenui" href="/firmnews">Firm News</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="/ourstory">Our Story</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="/outpartners">Our Partners</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="/outteam">Our Team</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="/ourcommitment">Our Commitment to You</a></li>
</ul>
</li>
<li class=" cssMenui0"><a class=" cssMenui0" href="/services">Services<![if gt IE 6]></a><![endif]>
<ul class=" cssMenum">
<li class=" cssMenui"><a class=" cssMenui" href="/accounting">Accounting Financial Services</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="/employeebenefit">Employee Benefit Plan Audits</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="/taxservices">Tax Services</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="/sox">SOX 404 Compliance Testing</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="/litigation">Litigation Support (Forensic Accounting)</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="/businessvaluations">Business Valuations</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="/businessadvisory">Business Advisory Services</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="/estate">Estate and Retirement Planning</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="/businessdevelopment">Business Development Workshops</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="/technologysupport">Technology Support</a></li>
</ul>
</li>
<li class=" cssMenui0"><a class=" cssMenui0" href="/carrers">Careers<![if gt IE 6]></a><![endif]>
<ul class=" cssMenum">
<li class=" cssMenui"><a class=" cssMenui" href="/ourculture">Our Culture</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="/ourexperiences">Our Experiences</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="/whywelovessb">Why We Love SSB</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="/faq">Frequently Asked Questions</a></li>
<li class=" cssMenui"><a class=" cssMenui" href="/careerprofiles">Career Profiles</a></li>
</ul>
</li>
<li class=" cssMenui0"><a class=" cssMenui0" href="/contactus">Contact Us</a></li>
</ul>



 
 
 
</body>
</html>

**LadynRed** · 12-08-2009, 02:56 PM

The first thing I would recommend is to use a decent and updated DOCTYPE, not that loosey-goosey 4.01 Transistional Loose - go for at least HTML 4.01 Strict. You'd be surprised what the right DTD can do.

The include isn't going to work in DW locally, unless you've got it configured to access a testing server, and even then it might not work, you'd need to BROWSE to it via an HTTP request.

When you say it 'blows up' -- what's happening to it?

**adp** · 12-08-2009, 03:28 PM

When I say blow up this is what I mean. When I insert the NAV menu as an include file, then upload it to the server this is what it looks like. there appears to be a sequence of repeating rows below the NAV with the background image of the cell the include file is placed in.

**LadynRed** · 12-09-2009, 09:48 AM

I think it may be the fault of that 'hack' of specifying tables for IE instead of using the CSS method. There's really no good reason to feed IE tables for a dropdown, at least not that I've found.

**adp** · 12-09-2009, 11:42 AM

LadynRed: first off, I have made progress.... I removed the tags from the bottom of the page (which appeared to be causing the repeating background image under the NAV menu), removed the IE conditional comments and the menu looks like it should - except now the 'drop downs' don't appear to be working in IE. UGH! Everything looks and works FINE in Firefox, however. when you mouse over the middle 3 menu items it looks like something appears below them but the links do not show up. I think I am real close though. Any additional comments would be welcome. here is a link to the test page with the nav on it:

http://www.ssb-cpa.com/ssb-final/content2.asp

**LadynRed** · 12-09-2009, 02:34 PM

Try adding a higher z-index on the menu to bring it above the rest of the page, I think in IE it's just dropping BEHIND the rest of your layout.