Adding a submevel to a drop-down menu. Please Help.

Discussion in 'CSS' started by JSellnau_TSCC, Oct 7, 2010.

  1. #1
    I am using a CSS drop-down menu that I found on a website and I would like to add a sublevel to the menu and I am not sure on how to code it. i jave tried several different ways and it just hasn't come out correctly. If someone would be willing to help me get this cleared up I would greatly appreciate it.

    Thank you in advance for your help and comments.

    <div class="menu">
    
    <ul>
    <li><a class="drop" href="../menu/index.html">Demos
    <!--[if IE 7]><!-->
    </a>
    <!--<![endif]-->
    
    <table><tr><td>
    
        <ul>
        <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars advertising page</a></li>
        <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text around images</a></li>
        <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
        <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
        <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
        <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map for detailed information</a></li>
        <li><a href="../menu/bodies.html" title="fun with background images">fun with background images</a></li>
        <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
        <li><a href="../menu/em_images.html" title="em size images compared">em image sizes compared</a></li>
        </ul>
    
    </td></tr></table>
    
    <!--[if lte IE 6]>
    </a>
    <![endif]-->
    
    </li>
    
    
    <li><a href="../boxes/index.html">Boxes
    <!--[if IE 7]><!-->
    </a>
    <!--<![endif]-->
    
    
    <table><tr><td>
    
        <ul>
        <li><a href="spies.html" title="a coded list of spies">a coded list of spies</a></li>
        <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
        <li><a href="expand.html" title="an enlarging unordered list">enlarging unordered list</a></li>
        <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
        <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
        <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
        <li><a href="circles.html" title="circular links">circular links</a></li>
        </ul>
    
    </td></tr></table>
    
    <!--[if lte IE 6]>
    </a>
    <![endif]-->
    
    </li>
    
    <li><a href="../mozilla/index.html">Mozilla
    <!--[if IE 7]><!-->
    </a>
    <!--<![endif]-->
    
    
    <table><tr><td>
    
        <ul>
        <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
        <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
        <li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
        <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
        <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">I can build a rainbow with transparent borders</a></li>
        <li><a href="../mozilla/snooker.html" title="Snooker cue">a snooker cue using border art</a></li>
        <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
        </ul>
    
    </td></tr></table>
    
    <!--[if lte IE 6]>
    </a>
    <![endif]-->
    
    </li>
    
    <li><a href="../ie/index.html">Explorer
    <!--[if IE 7]><!-->
    </a>
    <!--<![endif]-->
    
    
    <table><tr><td>
    
        <ul>
        <li><a href="../ie/exampleone.html" title="Example one">the first example for Internet Explorer</a></li>
        <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
        <li><a href="../ie/exampletwo.html" title="Vertical align">vertically aligning text</a></li>
        </ul>
    
    </td></tr></table>
    
    <!--[if lte IE 6]>
    </a>
    <![endif]-->
    
    </li>
    
    <li><a href="../opacity/index.html">Opacity
    <!--[if IE 7]><!-->
    </a>
    <!--<![endif]-->
    
    
    <table><tr><td>
    
        <ul>
        <li><a href="../opacity/colours.html" title="colour wheel">a colour wheel using opaque colours</a></li>
        <li><a href="../opacity/picturemenu.html" title="a menu using opacity">a menu using opacity</a></li>
        <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
        <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
        </ul>
    
    </td></tr></table>
    
    <!--[if lte IE 6]>
    </a>
    <![endif]-->
    
    </li>
    </ul>
    
    </div>
    
    HTML:
    The CSS code

    /* ================================================================ 
    This copyright notice must be untouched at all times.
    
    The original version of this stylesheet and the associated (x)html
    is available at http://www.cssplay.co.uk/menus/drop_variations.html
    Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
    This stylesheet and the assocaited (x)html may be modified in any 
    way to fit your requirements.
    =================================================================== */
     /* common styling */
    
     /* Set up the default font and ovrall size to include image */
    .menu {
    font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
    width:500px;
    background:#fff url(../meeting.jpg) 0 20px no-repeat;
    position:relative; 
    margin:2em 125px 0 125px;
    font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
    }
    /* get rid of the default padding - margin and bullets */
    .menu ul {
    padding:0; 
    margin:0;
    list-style-type: none;
    }
    /* make menu horizontal */
    .menu ul li {
    float:left;
    position:relative;
    }
    /* set up the default top level links */
    .menu ul li a, .menu ul li a:visited {
    display:block; 
    text-decoration:none; 
    color:#000; 
    width:88px; 
    height:1.5em;
    font-weight:bold;
    color:#888; 
    border-bottom:8px solid #888;
    background:#fff; 
    padding-left:10px; 
    line-height:1.5em;
    margin-right:2px;
    }
    /* hack for IE5.5 to correct the faulty box model */
    * html .menu ul li a, .menu ul li a:visited {
    width:98px;
    w\idth:88px;
    }
    /* hide the drop down menu */
    .menu ul li ul {
    display: none;
    }
    /* remove all table style so that it does not interfere with the menu */
    .menu table {
    margin:-1px; 
    border-collapse:collapse;
    font-size:1em;
    }
    
    /* first line for IE7 and non-IE browsers, second line for IE5.5 and IE6 */
    
    /* style the top level hover */
    .menu ul li:hover a,
    .menu ul li a:hover {
    color:#000; 
    border-bottom:8px solid #606;
    }
    /* make the drop down menu show and correctly position it */
    .menu ul li:hover ul,
    .menu ul li a:hover ul {
    display:block; 
    position:absolute; 
    top:1.2em;
    margin-top:11px;
    left:0; 
    width:96px;
    border:1px solid #888;
    border-top:0;
    background:transparent;
    }
    /* style the drop down links with no hover */
    .menu ul li:hover ul li a,
    .menu ul li a:hover ul li a {
    display:block; 
    background:transparent url(../../opacity/opaque.png); 
    color:#000; 
    border:0;
    margin:0;
    color:#333;
    font-weight:normal; 
    font-size:0.9em;
    height:auto; 
    line-height:1em; 
    padding:5px; 
    width:86px
    }
    /* style the drop down menu links when hovered */
    .menu ul li:hover ul li a:hover,
    .menu ul li a:hover ul li a:hover {
    background:#888; 
    color:#fff;
    }
    
    /* special styling for IE5.5 and IE6 - transparency is non validating */
    .menu ul li a:hover ul {
    background:transparent filter: alpha(opacity=80);
     filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
    opacity:0.8;
    margin-top:10px; /* for IE5.5 faulty box model */
    marg\in-top:11px; /* for IE6 */
    }
    /* IE5.5 hack for faulty box model in drop down menu */
    .menu ul li a:hover ul li a {
    background:#ddd;
    width:96px; /* for IE5.5 faulty box model */
    w\idth:86px; /* for IE6 */
    }
    
    Code (markup):
     
    JSellnau_TSCC, Oct 7, 2010 IP
  2. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #2
    GWiz, Oct 8, 2010 IP
  3. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #3
    I have a tutorial and a menu, can be found on my freebies section of my website. You can have a look if that useful to you.
     
    radiant_luv, Oct 9, 2010 IP