homepage Welcome to WebmasterWorld Guest from 54.204.94.228
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Nested lists
Trying to do a horizontal drop down CSS menu
Greven




msg:1190132
 10:13 pm on Dec 16, 2005 (gmt 0)

I am attempting to make a horizontal drop down menu with some annoying results. I am starting with an unordered list of headers. Each of these will have another unordered list of items below it.

This is my HTML:

<div id="menu">
<ul>
<li>
<a href="">
<ul>News
<li>Testing</li>
<li>Testing2</li>
</ul>
</a>
</li>
<li>
<a href="">
<ul>Video
<li>Much Bigger Test</li>
<li>Holy crap, what a big test</li>
</ul>
</a>
</li>
</ul>
</div>

Fairly straight forward, and everything seems nested correctly. My CSS validates, but the XHTML validator throws me an error about not being allowed to have UL inside of A, since A is not a block level element. Could this be causing it?

My CSS is like such:

div#menu ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
div#menu ul li
{
padding: 0;
float: left;
margin: 0 5px 0 0;
}
div#menu ul li a
{
background-color: red;
color: white;
display: block;
}
div#menu ul li a ul
{
display: none;
}
div#menu ul li a:hover ul
{
display: block;
position: relative;
top: 10px;
}

The div#menu ul li a ul does not seem to take effect. Again, I assume this is the validation? If anyone could offer some recommendations, I would really appreciate it.

I also apologize for the formatting, I must be doing something wrong with my [code] tags

 

jessejump




msg:1190133
 11:27 pm on Dec 16, 2005 (gmt 0)

>>>>> not being allowed to have UL inside of A

That's true; it's not valid. Put the <a> around the text you want to be a link.

Farix




msg:1190134
 12:22 am on Dec 17, 2005 (gmt 0)

For starters, your lists aren't properly nested. Your HTML should look like this:

<div id="menu">
<ul>
<li><a href="#">News</a>
<ul>

<li>Testing</li>
<li>Testing2</li>
</ul>
</li>
<li><a href="#">Video</a>
<ul>

<li>Much Bigger Test</li>
<li>Holy crap, what a big test</li>
</ul>
</li>
</ul>
</div>

The bold parts are how you properly nest a list. Also, if you have an empty link, then you should put in a '#' instead of leaving it blank. I can't comment on the CSS because I haven't looked at it extensively.

teylyn




msg:1190135
 7:54 pm on Dec 18, 2005 (gmt 0)

Google for the "sons of suckerfish". All-you-can-eat drop-down menus are beautifully explained there!

cheers

teylyn

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved