I don't see this topic out here yet for the 2010 HTML Editor. I used the CSS Menu Designer to create a drop down menu. Created it no problem, works fine. Then I wanted to further edit the CSS style. I tried using the Wizard, and even though it saves, nothing shows up on the actual page. Then I tried copying some old CSS code for formatting and plugging into my new CSS menu. Again nothing happened. What am I doing wrong? If I have to give up all other editing for drop down menus I don't want them!

Hiya padawan,

What the CSS menu maker in the HTML Editor does is create a file that it saves on your computer for the menu, and then when you want to edit it, you will need to open a website page again, then click the CSS Menu maker icon to open it. Hit the Open button on the Menu maker and navigate to the location it stored the file to. Choose that file and it should now have that menu displayed for you to edit.

When you are done creating or editing your menu you need to save and then hit the OK button for it to insert the code into your page. Saving the menu doesn't insert it, it just saves the file for you to edit again later.

Do remember that it doesn't edit the code on the site page at all, it edits only the code it will then insert so you would need to be sure to remove the code that was previously input from the last build of your menu so that the new changes are what are on the page when you have resaved and hit ok etc.

Do also keep in mind that any editing you do outside of that menu file will not be reinserted if you reinsert the menu from the menu maker (in other words your changes outside of that file are not in the file and cannot be added back in, you'd need to readd those changes manually again).

Please let me know if this answered your question or not and good luck on it

Hi Jo Ann,

I don't think I explained my problem very well. Let me try again. After I created the CSS Menu code I did insert it into my actual html page per the user manual instructions. So when I open that actual HTML page the drop down menu comes up fine. I started with a clean slate / blank HTML page so that any old coding would not interfere since it the manual it talks about removing old CSS code first.

After getting that running I wanted to add in other formatting for the page. It was my understanding I could do this using the Style Sheet Wizard. So I guess my first question is will that even work? I tried using the Wizard with my new menu-menu.css file, saving that and then reopening my new HTML page. Didn't work.

Then I tried opening my new menu-menu.css file and manually adding in code for additional formatting. After saving I tried opening my HTML page - again nada.

Am I missing something? Please help!

can we see your menu-menu.css file? and the html code you entered into your blank page.

It won't let me attach - what is the best way to share? BTW I have at least got the different blocking (Header, Left Column, Right Column, Main Body) to work. However none of the images I'm trying to use for backgrounds are working. Also my menu now won't center.

try copy and past your code as the message.

(I guess I need more REAL coffee - that was really a duh moment wasn't it? Sorry)



/*** ESSENTIAL STYLES ***/
.menu-menu, .menu-menu * {
margin:0;
padding:0;
list-style:none;
}
.menu-menu {
margin:10px 0 0 100px; /* top right bottom left */
line-height:1.0;
}
.menu-menu ul {
position:absolute;
top:-999em;
width:100px; /* submenu item width - offest below must match */
}
.menu-menu li {
width:100px; /* Default to 'auto'. If specified, the submenu item width and offset must match */
}
.menu-menu li a {
text-align:center;
}
.menu-menu li li a {
text-align:left;
}
.menu-menu ul li {
width:100%;
}
.menu-menu li ul {
display:none;
}
.menu-menu li:hover ul {
display:block;
}
.menu-menu li li ul {
display:none;
}
.menu-menu li:hover li:hover ul {
display:block;
}
.menu-menu li:hover {
visibility:inherit; /* fixes IE7 'sticky bug' */
}
.menu-menu li {
float:left;
position:relative;
}
.menu-menu a {
display:block;
position:relative;
}
.menu-menu li:hover ul,
.menu-menu li.sfHover ul {
left:0;
top:18px; /* match top ul list item height */
z-index:2;
}
ul.menu-menu li:hover li ul,
ul.menu-menu li.sfHover li ul {
top:-999em;
}
ul.menu-menu li li:hover ul,
ul.menu-menu li li.sfHover ul {
left:100px; /* submenu offest - must match ul width above */
top:0;
}
ul.menu-menu li li:hover li ul,
ul.menu-menu li li.sfHover li ul {
top:-999em;
}
ul.menu-menu li li li:hover ul,
ul.menu-menu li li li.sfHover ul {
left:100px; /* submenu offest - must match ul width above */
top:0;
}

/*** DEMO SKIN ***/
.menu-menu {
float:left;
margin-bottom:1em;
font-family:Tahoma, Verdana, Arial;
font-size:12px;
font-weight:normal; /* bold or normal */
font-style:normal; /* italic or normal */
}
.menu-menu a {
border-right:1px solid #004E98;
border-top:1px solid #004E98;
border-bottom:1px solid #004E98;
padding:3px 2px;
text-decoration:none;
}
.menu-menu li.first a {
border-left:1px solid #004E98;
}
.menu-menu a, .menu-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color:#000000;
}
.menu-menu a:hover, .menu-menu a:active { /* visited pseudo selector so IE6 applies text colour*/
color:#FFFFFF;
}

.menu-menu li li a {
border:1px solid #004E98; border-top-width:0;
}
.menu-menu li li li.first a {
border:1px solid #004E98;
}
.menu-menu li {
background:#FFFFFF;
}
.menu-menu li li {
background:#FFFFFF;
}
.menu-menu li li li {
background:#FFFFFF;
}
.menu-menu li:hover, .menu-menu li.sfHover,
.menu-menu a:focus, .menu-menu a:hover, .menu-menu a:active {
background:#3366FF;
outline:0;
}

.menu-menu li li a, .menu-menu li li a:visited {
color:#000000;
}

.menu-menu li li a:hover, .menu-menu li li a:active, .menu-menu li li a:focus {
color: #FFFFFF;
}

/*** arrows **/
.menu-menu a.sf-with-ul {
padding-right:2.25em;
min-width:1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
position:absolute;
display:block;
right:.75em;
top:1.05em; /* IE6 only */
width:10px;
height:10px;
text-indent:-999em;
overflow:hidden;
background:url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator { /* give all except IE6 the correct values */
top:.8em;
background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
background-position:-10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.menu-menu ul .sf-sub-indicator { background-position:-10px 0; }
.menu-menu ul a > .sf-sub-indicator { background-position:0 0; }
/* apply hovers to modern browsers */
.menu-menu ul a:focus > .sf-sub-indicator,
.menu-menu ul a:hover > .sf-sub-indicator,
.menu-menu ul a:active > .sf-sub-indicator,
.menu-menu ul li:hover > a > .sf-sub-indicator,
.menu-menu ul li.sfHover > a > .sf-sub-indicator {
background-position:-10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
background:url('../images/shadow.png') no-repeat bottom right;
padding:0 8px 9px 0;
-moz-border-radius-bottomleft:17px;
-moz-border-radius-topright:17px;
-webkit-border-top-right-radius:17px;
-webkit-border-bottom-left-radius:17px;
}
.sf-shadow ul.sf-shadow-off {
background:transparent;
}

<!--
body {
background-image: url('Images/realbg.gif');
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
width:90%;
max-width:1024px;
text-align:center;
margin-left:auto;
margin-right:auto;
}

div#container {
width:90%;
height:100%;
margin: 0 auto;
text-align: left
}

div#header {
padding: 0 0 0 0;
margin: 0px;
height: 120px;
text-align:center;
vertical-align:middle;
background-color:#FFFFFF;

}


div#wrapper {
width: 100%;
background-image:url('Images/blue31.jpg');
background-repeat:repeat-x;
border-top-style:ridge;
border-bottom-style:none;
text-align:center;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}

div#left {
background-color:#FFFFCC;
background-image:url('Images/leftcolumncorner.gif');
background-repeat:no-repeat;
width: 200px;
height:100%;
text-align:left;
padding: 15px 10px 25px 15px;
border-right-style:ridge;
border-right-color:#FFCC66;
margin-top: 1px;
float: left;
}

#left a:link {
color: #000099;
font-weight:bold;
text-decoration: none;
}

#left a:visited {
color: #000099;
font-weight: bold;
text-decoration: none;
}
#left a:hover {
color: #006600;
font-weight:bold;
text-decoration: underline;
}

#left p {
line-height: 12px;
}

div#main {
background-color:#FFFFFF;
margin-top: 1px;
height:100%;
text-align:left;
margin-left: 200px;
margin-right: 180px;
line-height: 120%;
padding: 15px 45px 15px 45px;
}

#main p {
line-height:200%;
text-align:left;
}

#main a:link {
color: #000099;
font-weight:bold;
text-decoration: none;
}

#main a:visited {
color: #000099;
font-weight: bold;
text-decoration: none;
}

#main a:hover {
color: #006600;
font-weight:bold;
text-decoration: underline;
}


div#right {
background-color:#FFFFCC;
background-image:url('Images/rightcolumncorner.gif');
background-position:right top;
background-repeat:no-repeat;
text-align:left;
width: 180px;
height:100%;
padding: 15px 10px 25px 15px;
margin-top: 1px;
float: right;
border-left-style:ridge;
border-left-color:#FFCC66;

}


div#footer {
padding: 0px;
margin: 0px;
font-family:Bookman Old Style;
font-size: 12px;
Color: #FFFFFF;
font-weight:bold;
border-top: thin solid #000000;
clear:both;
}
-->

well adding <!-- and --> to your css doesn't work, not sure if it will break things for your browser or not, how about a look at your HTML code?

Here's the HTML code. Plus I've been using FireFox as my basic check. Once I test it in Explorer all ^&*^&* breaks loose. Also my separate columns are truncating even though I've selected Height="100%"(Pulling Hair Our!). Any ideas?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)" />
<meta name="created" content="Tue, 18 May 2010 18:59:14 GMT" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" href="css/menu-menu.css" media="screen">

</head>
<body>

<div id="container">

<div id="header">
<img src="Images/SBFFLogoWebsite.gif" height="120" alt="Small Business Finance Forum" align="left">
<img src="Images/GroupFromAboveA.gif" height="120" align="right">
</div>

<div id="wrapper">

<ul class="menu-menu">
<li class="first"><a href="index.html">Home</a></li>
<li>
<a href="tools.html">Tools</a>
<ul>
<li class="first"><a href="budgeting.html">Budgeting</a></li>
<li><a href="capitalcredit.html">Capital & Credit</a></li>
<li><a href="cashflow.html">Cash Flow</a></li>
<li><a href="financials.html">Financials</a></li>
<li><a href="metrics.html">Metrics</a></li>
<li><a href="planning.html">Planning</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="riskmanagement.html">Risk Management</a></li>
<li><a href="strategy.html">Strategy</a></li>
<li><a href="tracking.html">Tracking</a></li>
<li><a href="valuation.html">Valuation</a></li>
</ul>
</li>
<li><a href="casestudies.html">Case Studies</a></li>

<li>
<a href="services.html">Services</a>
<ul>
<li class="first"><a href="consulting.html">Consulting</a></li>
<li><a href="speaker.html">Speaker</a></li>
</ul>
</li>
<li><a href="http://www.smallbusinessfinanceforum.com/blog">Blog</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>

</div>



<div id="left">
<p><a href="http://www.html"><img src="Images/bluebutton.gif" height="14" border="0"/> Home</a></p>
<p><a href="http://www.talentcapitalresource.com/contact.html"><img src="Images/bluebutton.gif" height="14" border="0"/> Contact</a></p>
</div>



<div id="right">
<font size="3" face="Baskerville Old Face" color="#000080"><strong>We recommend </font></strong><br /><br />

</div>


<div id="main">




Just need something to start

</div>

<div id="footer">
<center>
<br />Small Business Finance Forum Copyright 2010
</div>

</container>


</body>
</html>

thanks, I see some things, give me an hour or so.