/    Sign up×
Community /Pin to ProfileBookmark

Tree like CSS Menu… First post sorry if its asked constantly

I’m new to these forums and have done my fair share of googling and searching forums but have been unable to figure out what I am doing wrong.

check [url]http://www.austinscott.name/DayandGryder.com[/url]

click on “our firm” notice how this only works in firefox.

I’ve tried searching this website for another menu that has the same functionailty but have been unable to find it. [url]http://www.cssplay.co.uk/menus/index.html[/url]

Does anyone know how to make this menu work in IE? It seems very simple with just a css hide and show function but it still doesn’t work at all in IE. Does anyone see anything wrong with my DIV around the submenu? It seems to be where the problem lies.

code for menu:

[code]
<ul class=”avmenu”>
<li><a href=”index.html”>Home</a></li>
<li><a class=”menu1″ onclick=”showHide(‘mymenu1’)” href=”#”>Our Team</a>
<div id=”mymenu1″ class=”hide”>
<li><a href=”JeffDay.html” class=”submenu”>Jeff</a></li>
<li><a href=”#” class=”submenu”>Phil</a></li>
<li><a href=”#” class=”submenu”>Austin</a></li></div>

<li><a href=”thefirm.html”>The Firm</a></li>
<li><a href=”resources.html”>Resources</a></li>
</ul>

</div>
[/code]

relevant css:

[code]
/***** Main menu *****/
ul.avmenu {
width:140px;
margin:0 0 18px;
padding:0;
list-style:none;
}

ul.avmenu li {
width:140px;
padding:0;
line-height:1.4em;
display:inline;
}

ul.avmenu li a {
background-color:#f4f4f4;
color:#505050;
font-weight:bold;
width:130px;
float:left;
margin-bottom:5px;
padding:5px 1px 5px 5px;
border-left:4px solid #cccccc;
text-decoration:none;
}

ul.avmenu li a:hover,ul.avmenu li a.current {
background-color:#eaeaea;
border-left:4px solid #286ea0;
color:#505050;
}

ul.avmenu ul {
margin:0 0 0 15px;
padding:0 0 5px 0;
font-size:0.9em;
width:125px;
}

ul.avmenu ul a {
padding:3px 1px 3px 5px;
width:115px;
}

ul.avmenu ul ul {
width:113px;
}

ul.avmenu ul ul a {
width:100px;
}
/* Sub-menu stuff */
.submenu{
display: block;
height: 19px;
margin-left: 5px;
padding-top: 2px;
padding-left: 7px;
background-color: #3F4C6B;
}
.menu1{
background-color:#f4f4f4;
color:#505050;
font-weight:bold;
width:130px;
float:left;
margin-bottom:5px;
padding:5px 1px 5px 5px;
border-left:4px solid #cccccc;
text-decoration:none;
}
[/code]

to post a comment
CSS

9 Comments(s)

Copy linkTweet thisAlerts:
@KDLAOct 09.2006 — "the firm" (or the other bullet point) doesn't show up in Fx....

KDLA
Copy linkTweet thisAlerts:
@amsgwpauthorOct 09.2006 — what is Fx?
Copy linkTweet thisAlerts:
@amsgwpauthorOct 09.2006 — ok I seemed to have fixed it but my only problem now is that in Internet Explorer this crazy "n" character shows up when you click on "Our Team" under "Austin."

Doesn't show in firefox and I can't find anything in the code to cause this character to show up.

Also in IE there is text decoration on the links even though its set to "none." How do I keep them from underlining on hover in IE?
Copy linkTweet thisAlerts:
@KDLAOct 09.2006 — You need to close out your <li> after "austin" -- you close out the div, but not the initial <li> container.
Copy linkTweet thisAlerts:
@amsgwpauthorOct 09.2006 — hmm, I closed that out but I ended up fixing it before that. The "n" was appearing because of in the css I had display: block; under .submenu. Dunno why that caused the n to appear but it worked. I also closed the <li> container.
Copy linkTweet thisAlerts:
@amsgwpauthorOct 15.2006 — KDLA, I'm not sure what I did to this code but it was working perfectly and now it just stopped. I added some menu items and thats about it and bam it just totally quit working. I've tried reverting back to old code but I've have totally screwed something up that was working perfectly fine. Here is the code that is not working

<i>
</i>&lt;script language="JavaScript" type="text/JavaScript"&gt;
&lt;!--
menu_status = new Array();

function showHide(theid){
if (document.getElementById) {
var switch_id = document.getElementById(theid);

<i> </i> if(menu_status[theid] != 'show') {
<i> </i> switch_id.className = 'show';
<i> </i> menu_status[theid] = 'show';
<i> </i> }else{
<i> </i> switch_id.className = 'hide';
<i> </i> menu_status[theid] = 'hide';
<i> </i> }
<i> </i>}
}

//--&gt;
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div id="wrap"&gt;

&lt;img id="frontphoto" src="img/front.jpg" width="760" height="175" alt="" /&gt;
&lt;div id="leftside"&gt;
&lt;h2 class="hide"&gt;Menu:&lt;/h2&gt;

&lt;ul class="avmenu"&gt;
&lt;li&gt;&lt;a href="index.htm"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class="menu1" onclick="showHide('mymenu1')" href="#"&gt;Our Team&lt;/a&gt;
&lt;div id="mymenu1" class="hide"&gt;
&lt;a href="employee/jeff_day.html" class="submenu"&gt;Jeff&lt;/a&gt;
&lt;a href="employee/phil.html" class="submenu"&gt;Phil&lt;/a&gt;

<i> </i>&lt;a href="employee/austin.html" class="submenu"&gt;Austin&lt;/a&gt;
&lt;/div&gt;
&lt;li&gt;&lt;a href="employment.htm"&gt;Employment&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="the_firm.htm"&gt;The Firm&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="resources.htm"&gt;Resources&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;/div&gt;


here it is live http://www.austinscott.name/DayandGryder.com/#

and http://www.dayandgryder.com
Copy linkTweet thisAlerts:
@KDLAOct 15.2006 — Well, the containing li isn't closed out. It either needs to be closed before the div or after it, depending on how your CSS is set up. That could be messing up your javascript.

KDLA
Copy linkTweet thisAlerts:
@KravvitzOct 15.2006 — It needs to be after it. Only <li> elements may be direct children of <ul>s and <ol>s.

amsgwp, why is #mymenu1 a <div>? It looks like it should be another <ul>.
Copy linkTweet thisAlerts:
@amsgwpauthorOct 15.2006 — crazy but it started working. I was using FileZilla(portable version) to transfer the header file and for some reason it was flattening the file down to a one line file. After switching to NetDrive(maps ftp location as a actual hard-drive) it worked perfectly. The flat one line file was causing the problem.
×

Success!

Help @amsgwp spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.13,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,
)...