CSS Menu using UL LI

Question

1.00/5 (1 vote)

See more:

Hi,

I'm using UL LI menu and show hide the menu using display css property,my problem is its work well in firefox and Chrome but not shown in IE6

Posted 8-Jul-11 19:58pm

Marikani P

Add a Solution

Comments

Monjurul Habib 9-Jul-11 5:25am

Share your code to help you.

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Christian Graus · Answer 1 · 2011-07-08T20:36:00

Did you write it yourself ? We can't tell you the answer, because the answer is, cross site scripting is complex and you need to find out which bit of the code you've not shown us has the issue, and then put IE specific code in so it works for IE, too. There's tons of menu controls on the web, there's no need to write your own.

Sachin__Sharma · Answer 2 · 2011-07-08T20:37:00

<!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>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {

            $('.toggle').siblings('ul').toggle();
            $('.toggle').click(function () {
                $(this).siblings('ul').toggle('slow');
            });
        });

    </script>
    <style type="text/css">
        .toggle
        {
            margin: auto;
            background-color: #344868;
            color: white;
            font-weight: bold;
            height: 25px;
            padding-top: 7px;
            text-indent: 10px;
        }
        .MenuHeader
        {
            list-style: none;
            margin-left: 0px;
            height: 25px;
        }
        #divroot
        {
            background-color: #EBEBEB;
            border: 0px none;
            width: 131px;
            margin-left: 0px;
        }
        #divroot ul li
        {
            background-color: white;
            border: 0px none;
            color: #344868;
            height: 25px;
            margin-left: 0px;
        }
        #divroot ul li a
        {
            color: #344868;
            text-decoration: none;
            margin-left: 3px;
            margin: auto;
        }
        
        
        #leftBar ul
        {
            margin-left: 3px;
            list-style: none;
            font-size: 12px;
        }
        
        #leftBar ul li
        {
            padding: 3px;
            border: 1px solid #cdcde6;
            margin-bottom: 2px;
            height: 20px;
            width: 131px;
        }
        #leftBar ul li a
        {
            margin-left: 1px;
        }
        a:hover
        {
            background-color: Yellow;
        }
    </style>
</head>
<body>
    <div id="divroot">
        <ul class="MenuHeader">
            <li>
                <div class="toggle">
                    Utilities</div>
                <ul>
                    <li><a href="#">IFRAME</a></li>
                    <li><a href="#">My Mails</a></li>
                    <li><a id="linkgoogle" href="#">Google</a></li>
                </ul>
            </li>
            <li>
                <div class="toggle">
                    HTML</div>
                <ul>
                    <li><a href="#">HTML Controls</a></li>
                    <li><a href="#">Open window</a></li>
                </ul>
            </li>
            <li>
                <div class="toggle">
                    Dynamic</div>
                <ul>
                    <li><a href="#">Gridview</a></li>
                    <li><a href="#">Multiview</a></li>
                    <li><a href="#">VB.NET</a></li>
                    <li><a href="#">C#</a></li>
                </ul>
            </li>
            <li>
                <div class="toggle">
                    File/Folder</div>
                <ul>
                    <li><a href="#')">#######</a></li>
                    <li><a href="#')">#######</a></li>
                    <li><a href="#')">#######</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

I used JavaScript Library v1.4.1 you can download it from google.
You can use 1.3 jquery plugin. It will work.

enjoy

Monjurul Habib · Answer 3 · 2011-07-08T23:28:00

I am providing you the following links. Just pick your desired one,if you need anything more customized please let me know.

http://plugins.jquery.com/plugin-tags/jquery-menu[^]
http://javascript-array.com/scripts/jquery_simple_drop_down_menu/[^]
http://www.i-marco.nl/weblog/jquery-accordion-menu/[^]
http://p.sohei.org/stuff/jquery/menu/demo/demo.html[^]

CSS Menu using UL LI

3 solutions

Solution 3

Solution 4

Solution 5

Add your solution here

Preview 0