li menu help

hello
i am trying to see a way to include a further menu when a user selects an option from the main menu. for example: if a user selects the Files option i would then like sub menus such as, Return - retrieve. i have included my code and would be grateful if someone could show me the way. many thanks
<ul class="select"><li><a href="#"><b>Requests</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
	<ul class="sub">
		<li><a href="/sample/admin/requests/files/index.php">Files</a></li>
		<li><a href="/sample/admin/requests/boxes/index.php">Boxes</a></li>
		<li><a href="#nogo">Recycle</a></li>
		<li><a href="#nogo">Box Supply</a></li>
		<li><a href="#nogo">Destruction</a></li>
		<li><a href="#nogo">Destruction Schedules</a></li>
	</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

Open in new window

peter_coopAsked:
Who is Participating?
 
darren-w-Commented:
Are you after something like this?

http://www.cssplay.co.uk/menus/css-time-flyout.html
0
 
Rikin ShahMicrosoft Dynamics CRM ConsultantCommented:
you can use nested UL LI to show sub menus.

Or I would suggest you create CSS menus-
http://www.purecssmenu.com/
http://www.cssmenumaker.com/
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
peter_coopAuthor Commented:
@darren-w-

hello. no, that is not correct. i am looking to create a sub-menu from my posted code. thanks

@rikin_shah

hello. in my original question, i said i would like to use sub-menus but not sure how to code based on what i have posted. i need to keep the menu i have just expand it. thanks
0
 
Rikin ShahMicrosoft Dynamics CRM ConsultantCommented:
Gotcha...

 
<span id="spanShowHideSubmenu" onclick="ShowHideSubmenu();">Expand</span>
        <ul class="sub" id="ulSubmenu" style="display:none">
                <li><a href="/sample/admin/requests/files/index.php">Files</a></li>
                <li><a href="/sample/admin/requests/boxes/index.php">Boxes</a></li>
                <li><a href="#nogo">Recycle</a></li>
                <li><a href="#nogo">Box Supply</a></li>
                <li><a href="#nogo">Destruction</a></li>
                <li><a href="#nogo">Destruction Schedules</a></li>
        </ul>

Open in new window



Add this javascript to expand and collapse

 
function ShowHideSubmenu()
{
	if (document.getElementById("spanShowHideSubmenu").innerHtml == "Expand")
	{
		document.getElementById("ulSubmenu").style.display = "block";
		document.getElementById("spanShowHideSubmenu").innerHtml = "Collapse";
	}
	else
	{
		document.getElementById("ulSubmenu").style.display = "none";
		document.getElementById("spanShowHideSubmenu").innerHtml = "Expand";
	}
}

Open in new window


0
 
darren-w-Commented:
JQuery alternative:
<!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>
        <script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#spanShowHideSubmenu").click(function(){
                    $("#ulSubmenu").slideToggle();
                })
            })
        </script>
    </head>
    <body>
        <span id="spanShowHideSubmenu" ">Expand</span>
        <ul class="sub" id="ulSubmenu" style="display:none">
            <li><a href="/sample/admin/requests/files/index.php">Files</a></li>
            <li><a href="/sample/admin/requests/boxes/index.php">Boxes</a></li>
            <li><a href="#nogo">Recycle</a></li>
            <li><a href="#nogo">Box Supply</a></li>
            <li><a href="#nogo">Destruction</a></li>
            <li><a href="#nogo">Destruction Schedules</a></li>
        </ul>
    </body>
</html>

Open in new window

0
 
peter_coopAuthor Commented:
thanks for replies guys. however, is there a way that i can just use ul li within my original menu? many thanks
0
 
darren-w-Commented:
Using your original menu:
<!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>
        <script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $(".select").click(function(){
                    $(".sub").slideToggle();
                })
            })
        </script>
    </head>
    <body>
        <ul class="select"><li><a href="#"><b>Requests</b><!--[if IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <div class="select_sub">
                    <ul class="sub">
                        <li><a href="/sample/admin/requests/files/index.php">Files</a></li>
                        <li><a href="/sample/admin/requests/boxes/index.php">Boxes</a></li>
                        <li><a href="#nogo">Recycle</a></li>
                        <li><a href="#nogo">Box Supply</a></li>
                        <li><a href="#nogo">Destruction</a></li>
                        <li><a href="#nogo">Destruction Schedules</a></li>
                    </ul>
                </div>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
        </ul>
    </body>
</html>

Open in new window

0
 
peter_coopAuthor Commented:
@darren. how does that create a sub-menu? what i am looking for is if hovers over the files option it displays a menu below along the lines of return retrieve destroy etc. at the moment the menu is controlled by pure css. if possible i would like to stick with css.  i have included my css code for your attention. many thanks
/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/pro_drop6.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

.preload1 {background: url(six_0a.gif);}
.preload2 {background: url(six_1a.gif);}

#nav {padding:0; margin:100px 0 0 0; list-style:none; height:38px; background:#fff url(six_0.gif) repeat-x; position:relative; z-index:200; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(six_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0a.gif) no-repeat right top;}

#nav li:hover a.top_link,
#nav a.top_link:hover
{color:#fff; background: url(six_1.gif) no-repeat;}
#nav li:hover a.top_link span, 
#nav a.top_link:hover span
{background:url(six_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down,
#nav a.top_link:hover span.down
{background:url(six_1a.gif) no-repeat right top; padding-bottom:3px;}

#nav table {border-collapse:collapse; padding:0; margin:0; position:absolute; left:0; top:0;}

#nav li:hover {position:relative; z-index:100;}
#nav a:hover {position:relative; white-space:normal; z-index:100;}

#nav :hover ul.sub
{left:1px; top:38px; background: #999999; padding:3px; border:1px solid #000000; white-space:nowrap; width:100px; height:auto; z-index:1000;}
#nav :hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:100px; font-weight:normal;}
#nav :hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;}
#nav li ul.sub li a.fly
{background:#999999 url(arrow.gif) 80px 6px no-repeat;}
#nav :hover ul.sub li a:hover 
{background:#666666; color:#fff; border-color:#fff;}
#nav :hover ul.sub li a.fly:hover
{background:#666666 url(arrow_over.gif) 80px 6px no-repeat; color:#fff;}

#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}

#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul
{left:89px; top:-4px; background: #999999; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:300; height:auto;}

#nav ul, 
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover > ul
{left:100px; top:-4px; background: #999999; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:100px; z-index:300; height:auto;}
#nav li:hover > ul ul 
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover > a.fly
{background:#000000 url(arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;} 
#nav li:hover li:hover > li a.fly
{background:#999999 url(arrow.gif) 80px 6px no-repeat; color:#000; border-color:#50b5d0;}

Open in new window

0
 
darren-w-Commented:
Hi,

can you draw a simple graphic to show its functionality and that will make it easyer.

Darren
0
 
peter_coopAuthor Commented:
darren. the pic i have attached shows the menu when i hover over the request option. i now need a sub-menu to appear where i have marked when a user hovers over file options. hope that is clear. many thanks.
menu.png
0
 
peter_coopAuthor Commented:
thank you darren. will go down that route. many thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.