#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2010
    Posts
    65
    Rep Power
    0

    Css drop down menu help


    i m having problem in displaying menu and sub menu. pls check the code.

    HTML

    <html>
    <head>
    <title> List of Hospital values
    </title>
    <link href="new.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
    <ul id="navbar">
    <li><a href="##">IPD Maintenance</a>
    <ul>
    <li><a href="#">Registration</a></li>
    <li><a href="#">Diagnose</a></li>
    <li><a href="#">Laboratary Test</a></li>
    </ul>
    </li>


    <li><a href="#">OPD Maintenance</a>
    <ul>
    <li><a href="#">Registration</a></li>
    <li><a href="#">Diagnose</a></li>
    <li><a href="#">Laboratary Test</a></li>
    <li><a href="#">Admission</a></li>
    <li><a href="#">Services </a></li>
    </ul>
    </li>

    <li><a href="#">Donation Management</a>
    <ul>
    <li><a href="">Donor detail</a></li>
    <li><a href="">Lab Test detail</a></li>
    <li><a href="#">Donor Medication</a></li>
    </ul>
    </li>

    <li><a href="#">Billing</a>
    <ul>
    <li><a href="#">IPD billing</a></li>
    <li><a href="#">OPD billing</a></li>
    </ul>
    </li>

    <li> <a href="#">Administrative Task</a>
    <ul>
    <li><a href="#">Manage user</a></li>
    <ul>
    <li><a href="#">Add User</a></li>
    <li><a href="#">Delete User</a></li>
    </ul>


    <li><a href="#">Manage Doctors</a></li>
    <ul>
    <li><a href="#">Edit Doctor</a></li>
    <li><a href="#">Add Doctor</a></li>
    <li><a href="#">Delete Doctor</a></li>
    </ul>

    <li><a href="#">Manage Staff</a></li>
    <ul>
    <li><a href="#">Edit Staff</a></li>
    <li><a href="#">Add Staff</a></li>
    <li><a href="#">Delete Staff</a></li>
    </ul>

    <li><a href="#">Manage Departments</a></li>
    <ul>
    <li><a href="##">Add Department</a></li>
    <li><a href="#">Delete Department</a></li>
    <li><a href="#">Edit Department</a></li>
    </ul>

    <li><a href="#">Manage Rooms</a></li>
    <ul>
    <li><a href="#">Add Room</a></li>
    <li><a href="#">Delete Room</a></li>
    <li><a href="#">Edit Room</a></li>
    </ul>
    </ul>
    </li>

    <li><a href="#">Laboratory</a>
    <ul>
    <li><a href="">Laboratory detail</a></li>
    <li><a href="">Lab Test detail</a></li>
    </ul>
    </li>

    <li><a href="#">Organ Management</a>
    <ul>
    <li><a href="">Laboratory detail</a></li>
    <li><a href="">Lab Test detail</a></li>
    </ul>
    </li>

    <li><a href="#">Blood Management</a>
    <ul>
    <li><a href="">Blood Taken</a></li>
    <ul>
    <li><a href="">Hospitals</a></li>
    <li><a href="">Donors</a></li>
    </ul>
    <li><a href="">Blood Endorsed</a></li>
    <ul>
    <li><a href="">Persons</a></li>
    <li><a href="">Hospitals</a></li>
    <li><a href="">IPD</a></li>
    </ul>
    </ul>
    </li>

    <li><a href="#">Emergency Services</a>
    <ul>
    <li><a href="">Estaff Detail</a></li>
    <li><a href="">Add Estaff</a></li>
    <li><a href="">Delete Estaff Detail</a></li>
    <li><a href="">Edit Estaff Detail</a></li>
    <li><a href="">Ambulance Detail</a></li>
    <li><a href="">Ambulance Route</a></li>
    </ul>
    </li>

    <li><a href="#">Inventory</a>
    <ul>
    <li><a href="">Suppliers</a></li>
    <li><a href="">Purchase Receipt</a></li>
    <li><a href="">Purchase return receipt</a></li>
    <li><a href="">Sales Receipt</a></li>
    <li><a href="">Sales Return Receipt</a></li>
    </ul>
    </li>
    </ul>
    </body>
    </html>

    AND THE CSS FILE IS AS FOLLOWING

    #navbar {
    margin: 0;
    padding: 0;
    height: 1em; }
    #navbar li {
    list-style: none;
    float: left; }
    #navbar li a {
    display: block;
    padding: 3px 8px;
    background-color: #5e8ce9;
    color: #fff;
    text-decoration: none; }

    #navbar li ul {
    display: none;
    width: 10em; /* Width to help Opera out */
    background-color: #69f;}

    #navbar li:hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0; }
    #navbar li:hover li {
    float: none; }
    #navbar li:hover li a {
    background-color: #69f;
    border-bottom: 1px solid #fff;
    color: #000; }
    #navbar li li a:hover {
    background-color: #8db3ff; }


    WAITING FOR YOUR HELP
  2. #2
  3. K-Mart-ian Legend
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2004
    Location
    United States
    Posts
    303
    Rep Power
    55
    Yep, your code is just a nested ordered list, not a menu like you are thinking it would be. I made something like this a long time ago... I think I can find it in the archive....

    Ah ha! I found it. Check the source out on this page:
    Tripredacus.net Nov 30, 2001 1indexleft

    Note: the menu does not actually work on the archive, but the code should work if you put it on a real server. You can see that Javascript controls the menu.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2010
    Posts
    65
    Rep Power
    0
    Originally Posted by Tripredacus
    Yep, your code is just a nested ordered list, not a menu like you are thinking it would be. I made something like this a long time ago... I think I can find it in the archive....

    Ah ha! I found it. Check the source out on this page:
    Tripredacus.net Nov 30, 2001 1indexleft

    Note: the menu does not actually work on the archive, but the code should work if you put it on a real server. You can see that Javascript controls the menu.


    The link you have given doesn't work. would you please explain the error in it.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2010
    Posts
    52
    Rep Power
    17
    i m having problem in displaying menu and sub menu. pls check the code.
    And where is the problem? Please describe the problem in more detail.
    It works with me.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2010
    Posts
    65
    Rep Power
    0
    Originally Posted by unmotiviert
    And where is the problem? Please describe the problem in more detail.
    It works with me.
    It work in all other browser except internet explorer. and i am having submenu. Like did you notice. manager users in administrative task it will have sub-menus like add users delete users.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2010
    Posts
    52
    Rep Power
    17
    Thats right.
    In FF -> it works
    In IE -> it doesnt works

    But i dont know why.
    Maybe you could modify a finnish drop-down menu like: http://www.lwis.net/free-css-drop-down-menu/dropdown.simple.horizontal.html

    They works in FF and IE
    There you will find more examples: http://www.lwis.net/free-css-drop-down-menu/

    Good luck.
  12. #7
  13. Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Location
    London, UK
    Posts
    4,005
    Rep Power
    2795
    khaleel, you have been a user on here long enough to know not to cross-post your questions. It causes confusion and will frustrate other users when they discover that while they have been trying to help you, the solution has already been posted in another forum.

    There is a thread the top of each forum that you should take the time to read.
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]
  14. #8
  15. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Location
    Jakarta, Indonesia.
    Posts
    279
    Rep Power
    38
    Hi, you've probably missed the doctype, before <html> tag.
    Without it, IE will automatically put you into "Quirks Mode",
    disabling your subs.

    I guess one of of these would be sufficient for your need:
    1)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    ...
    2)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    ...
    They shall put you into IE8 Standard Mode.

    Goodluck!
    Hendra
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2010
    Posts
    65
    Rep Power
    0
    Originally Posted by hdewantara
    Hi, you've probably missed the doctype, before <html> tag.
    Without it, IE will automatically put you into "Quirks Mode",
    disabling your subs.

    I guess one of of these would be sufficient for your need:
    1)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    ...
    2)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    ...
    They shall put you into IE8 Standard Mode.

    Goodluck!
    Hendra

    Thank you hdewantara. My problem is almost solved but the width of the internet browser is too much extended. may be something is wrong is css


    And Winter excuse me this time. Sorry.

IMN logo majestic logo threadwatch logo seochat tools logo