Forum Moderators: not2easy
I am doing an CSS pop-up menu tutorial. I have following 3 problems need help with.
a) I accidentally displayed the menu as a horizontal menu, but I couldn't see how it happened.
b) the sub-menu for 'projects' displayed right on top of it.
c) I am wondering what's the key to make this vertical menu to display as horizontal menu with sub-menu properly displayed under parent menu item
Please review my code and give me some suggestions. Thanks!
HTML code:
DOCTYPE is xhtml1-transitional.dtd
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Pop-Up Menu</title>
<link rel="stylesheet" href="css_menu_practice.css" type="text/css" />
</head><body>
<ul>
<li><a href="#">Biography</a></li>
<!--
submenu for projects
-->
<li>
<a href="#">Projects</a>
<ul>
<li>coin74<li>
<li>coin61<li>
<li>coin63<li>
<li>psme<li>
</ul>
</li>
<li><a href="#">Hobby</a></li>
<li><a href="#">Friends</a></li>
</ul>
</body>
</html>
CSS code:
*
{
margin: 0;
}
ul
{
list-style: none;
width: 125px; /*if I comment this line out menu became horizontal*/
}
ul a
{
display: block;
padding: 5px 5px 5px 10px;
width: 125px;
color: #6633FF;
background-color: #FFFFCC;
text-decoration: none;
}
ul a:hover
{
text-decoration: none;
color: #FF9900;
background: #FFFFCC;
}
ul li
{
float: left; /*if I comment this line out menu became vertical*/
/* position: relative; */
}
/* hide submenu with display: none */
ul li ul
{
list-style: none;
position: absolute;
left: 140px;
top: 0;
display: none;
width: 125px;
border-left: 1px solid #FFF;
}
ul li:hover ul
{
display: block;
}
webtown06
7-13-07
[edited by: DrDoc at 9:47 pm (utc) on July 13, 2007]
[edit reason] No URLs, thanks. See TOS #13 [WebmasterWorld.com]. [/edit]
ul li
{
float: left;
}this is the bit that makes the menu horizontal. <li> items are usually displayed as blocks (ie. on their own line) but if you float them all to the left, then they will appear next to the previous one, on the same line.
ul
{
width: 125px;
}... but if you limit the width of the <ul> (which surrounds all the <li>'s) then you will limit the number of <li>'s that can appear on one line.
if each <li> is 25px wide, for example, then in this example you would be able to fit five of them on one horizontal line (because the <ul> has a maximum width of 125px). but if they are 100px wide, then you would only be able to fit one on each line - so the menu would appear to be vertical (even though it's really horizontal) confused?
