Unresolvable Menu Issue

[sam0077]

Hello, I am having menu problems with ALL of my browsers. There is a line that separates the top-level menu item from the pull-down menu items. It also has a space between the top-level and pull-down menu items.

I have put DAYS worth of effort on this issue (even though I copied and then modified a free horizontal menu from the internet). ANY HELP would be greatly apprecicated!

XHTML:
------------------------------------------------------
div id="menu">
<ul>
<li><h2>home </h2><a class="toplevel" href="index.html" alt="homepage"></a></li>
</ul>

<ul>
<li><h2>profile</h2> <a class="toplevel" href="profile.html" title="profile"></a>
<ul>
<li><a href="portfolio.html" title="portfolio">portfolio</a></li>
</ul>
</li>
</ul>

<ul>
<li><h2>services</h2> <a class="toplevel" href="services.html" title="services"></a>
<ul>
<li><a href="marketing.html" title="marketing">marketing</a></li>
<li><a href="advertising.html" title="advertising">advertising</a></li>
</ul>
</li>
</ul>

<ul>
<li><h2>resource center</h2> <a class="toplevel" href="rescent.html" title="resource center"></a>
<ul>
<li><a href="mktgnews.html" title="latest marketing news">latest marketing news</a></li>
<li><a href="mktgres.html" title="marketing research">marketing research</a> </li>
<li><a href="pricing.html" title="pricing">pricing</a> </li>
<li><a href="tools.html" title="marketing tools">marketing tools</a> </li>
</ul>
</li>
</ul>

<ul>
<li><h2>contact</h2> <a href="contact.html" title="contact"></a></li>
</ul>

</div>
--------------------------------------------------------
CSS:
--------------------------------------------------------
#menu{
width:70em;
float:left;
text-align: center;
margin-left: +4em;
margin-top: +.20px;
padding: 0 0 0 0;
margin-top: 15px;
margin-left: 55px;

}

#menu a, #menu h2, .toplevel {
font:bold;
display:block;
border-width:1px;
border-style:solid;
border-color:#ccc #888 #555 #bbb;
white-space: nowrap;
font-family: "Calisto MT", Monaco, serif;
font-size: 1.0em;
color: #777777;
}

#menu h2, .toplevel {
color: #838383;
background: #ffffcc;
}


#menu a{
background: #ffffcc;
text-decoration:none;
color: #838383;
background: #ffffcc
}


#menu a, #menu a:visited{
color: #838383;
}

#menu a:hover{
color:#000;
background:#ddd;
}

#menu a:active{
color:#060;
background:#ccc;
}

#menu ul{
list-style:none;
float:left;
width:120px;
padding: 0 0 0 0;
}


#menu li{
position:relative;
}

#menu ul ul {
position:absolute;
z-index:400;
top:auto;
display:none;
}

#menu ul ul ul{
top:0;
left:100%;
}

/* Begin non-anchor hover selectors */

/* Enter the more specific element (div) selector
on non-anchor hovers for IE5.x to comply with the
older version of csshover.htc - V1.21.041022. It
improves IE's performance speed to use the older
file and this method */

div#menu h2:hover{
background: #eee -999px -9999px;
}


div#menu li:hover{
cursorointer;
z-index:100;
}

div#menu li:hover ul ul,
div#menu li li:hover ul ul,
div#menu li li li:hover ul ul,
div#menu li li li li:hover ul ul
{display:none;}

div#menu li:hover ul,
div#menu li li:hover ul,
div#menu li li li:hover ul,
div#menu li li li li:hover ul
{display:block;}

/* End of non-anchor hover selectors */

/* Styling for Expand */

#menu a.x, #menu a.x:visited{
font-weight:bold;
background:#eee;
}

#menu a.x:hover{
color:#a00;
background:#ddd;
}

#menu a.x:active{
color:#060;
background:#ccc;
}

/* End CSS Popout Menu */

 

[Vragabond]

This menu of yours seems to have been rewritten for you by monksnake in thread215-1353771. Did you try his suggestion and realized it is inferior or did you simply not see it?

 

[sam0077]

In fact I did try ALL of Monksnake's suggestions exactly as they were written and they did not work.

I would appreciate any suggestions anyone may have on resolving this problem.

 

[monksnake]

I remember this, and of course it won't work 100% in IE cause it has a hover psuedoclass on a list item.

div#menu ul li:hover {
   cursor:pointer;
}

The initial code the poster "borrowed" did as well, so I wasn't going to remove that.

I can copy/paste that code directly into a text editor and it works perfectly.

Next time you steal some code, make sure you know what browsers the code is built for.

<.

 

[monksnake]

Copy/paste gets hard sometimes.

<.

 

[sam0077]

For your information I did not steal any code. There was a website that offered the code to anyone who wanted it.

Can someone help me resolve my menu drop-down issue?

 

[ca8msm]

Why not take a step backwards? You clearly don't understand the code or how it does what it does, so you might be best off trying to learn first.

Start by reading the following articles and doing some of their tutorials:

http://www.w3schools.com/html/

http://www.w3schools.com/css/

____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244.

 

[sam0077]

Thank you for taking the time to reply to my message. I mean this as respectfully as possible - those suggestions are not helpful.

Vacunita was really helpful in an earlier posting. Is there any way Vacunita that you could give me some advice? Vragabond you have also helped sometimes too.

If it is possible, can you advise me on what I am doing wrong on the menu? It does not work in any browser. Thank you.

 

[ca8msm]

Thank you for taking the time to reply to my message. I mean this as respectfully as possible - those suggestions are not helpful.

I don't agree. I think that probably the main reason why you can't make your menu work as you want is because you don't understand exactly how the CSS from this menu works. You've copied and pasted a menu from somewhere without taking the time to understand it (which is clearly backed up by your questions in your previous thread asking what an anchor is).

I also think the reason why you say that those links are not helpful is because you want a quick answer that you can do the same thing to - copy and paste it into your application and forget about it. The problem with this approach is that you'll be back on these forums asking question after question whereas if you try to learn the basics, you'll hopefully turn into a poster that can help other people.

Nobody is going to write your menu for you, but what we will do is help you understand how and why {X)HTML and CSS work.


____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244.

 

[kaht]

ca8msm is 110% correct


It seems I've pointed this out 100s of times but the text under the logo says:

INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

If you can't be professional enough to learn your trade then you probably shouldn't be posting here. The intention of this site is not to get your work done for you. kthxbye

-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]

 

[sam0077]

I will take your advice and go elsewhere. There are too many posters here that **PRESUME** to know what I have and have not done on my project. I am disappointed in this website, it was promising. But Vacunita was the only one helpful. Goodbye.

 

[Vragabond]

Rather than presume, I would say observe. In your previous thread, you presented a code that had empty anchor tags put behind the heading 2 element. We explained how that is wrong and showed you how to do it correctly. Furthermore monksnake has demonstrated a superior code to yours. Then two weeks later, we realize you did not take monksnake's code and built on that but are still using the old one. And your anchors are still wrong and lying empty outside the heading tag. I am not going to help someone I see is not taking the time to implement suggestions and solutions I offer.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]