...

View Full Version : Vertical Menu with submenus flying out when mouse is hovered



ippo
08-01-2011, 05:41 AM
I am trying to create a vertical menu with fly outs .That is a vertical menu with sub-menus.What is wrong with the following code?

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">

#navmenu ul ul li a
{border:1px solid #888888;
border-bottom: none;
font-size:12pt;
line-height: 1.6em;
color:#303030;
background-color:#a5a5a5;
background-image:none;}
#navmenu {
width: 150px; /* set width of menu */
}

#navmenu ul
{list-style-type:none;
margin:0px;
padding:0px;}

#navmenu a
{text-decoration:none;
border: 1px solid #303030;
width:170px;
display:block;
text-align:center;
font-size:14pt;
line-height:2em;
background:url(Button_top.gif) repeat-x left;
font-family:Arial, Helvetica, sans-serif; color:white;}

#navmenu a:hover {
color: #a00; /* red text color on hover */
background: #fff; /* white bgcolor on hover */
}

#navmenu li {
/* make the list elements a containing block for the nested lists */
position: relative;
}

#navmenu ul ul{
position: absolute;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */
}

#navmenu li {
/* make the list elements a containing block for the nested lists */
position: relative;
}

#navmenu ul ul
{display: none;}

#navmenu ul li:hover ul
{display:block;}

</style>

</head>
<body>
<div id="navmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<ul>
<li><a href="#">Blog 1</a></li>
<li><a href="#">Blog 2</a></li>
</ul>
<li><a href="#">Websites</a></li>
<ul>
<li><a href="#">Websites 1</a></li>
<li><a href="#">Websites 2</a></li>
</ul>
<li><a href="#">Photos</a></li>
</ul>
</div>

</body>
</html>

JustinJD
08-01-2011, 06:46 AM
What do you currently see when you use this code? it looks correct, but I may have found the error.

You have to have it set out like


<ul>
<li>Menu1
<ul>
<li>SubMenu1</li>
<li>SubMenu2 </li>
</ul>
</li>
<li>Menu2
<ul>
<li>SubMenu1</li>
<li>Submenu2</li>
</ul>
</li>
<li>Menu3
<ul>
<li>SubMenu1</li>
<li>SubMenu2</li>
</ul>
</li>
</ul>

Excuse if there's any erorrs, I just wrote that off the cuff. (I'm on my ipad)

vikram1vicky
08-01-2011, 11:15 AM
Try this code.. You have to change color of main navigation :)



<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<title>Untitled Document</title>
<style type="text/css">

#navmenu ul li ul li a
{border:1px solid #888888;
display:block;
border-bottom: none;
font-size:12pt;
line-height: 1.6em;
color:#303030;
background-color:#a5a5a5;
background-image:none;}
#navmenu {
width: 150px; /* set width of menu */
}

#navmenu ul
{list-style-type:none;
margin:0px;
padding:0px;}

#navmenu a
{text-decoration:none;
border: 1px solid #303030;
width:170px;
display:block;
text-align:center;
font-size:14pt;
line-height:2em;
background:url(Button_top.gif) repeat-x left;
font-family:Arial, Helvetica, sans-serif; color:white;}

#navmenu a:hover {
color: #a00; /* red text color on hover */
background: #fff; /* white bgcolor on hover */
}

#navmenu li {
/* make the list elements a containing block for the nested lists */
position: relative;
}

#navmenu ul ul{
position: absolute;
top: 0;
left: 170px; /*to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */
}

#navmenu li {
/* make the list elements a containing block for the nested lists */
position: relative;
}

#navmenu ul ul
{display: none;}

#navmenu ul li:hover ul
{display:block;}

</style>

</head>
<body>
<div id="navmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a><ul>
<li><a href="#">Blog 1</a></li>
<li><a href="#">Blog 2</a></li>
</ul></li>

<li><a href="#">Websites</a><ul>
<li><a href="#">Websites 1</a></li>
<li><a href="#">Websites 2</a></li>
</ul></li>

<li><a href="#">Photos</a></li>
</ul>
</div>

</body>
</html>


Always define DOCTYPE



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum