CSS - Sub Menu Navigation. (HELP ME!)

Discussion in 'Web Design and Development' started by cwesty, Aug 18, 2007.

  1. cwesty macrumors member

    Joined:
    Oct 22, 2005
    #1
    Hi All,

    I've been working on a site, and i need to add a sub-category to one of the current lists.

    The HTML looks like this...
    <div id="rightnav">
    <a href="#">Shop</a>
    <a href="#">New Products</a>

    </div>

    The CSS associated with this looks like this:

    #rightnav {
    display:block;
    float: right;

    width: 160px;
    height: auto;
    margin: 2px 6px;
    border: 1px solid #cccccc;

    }

    #rightnav a {
    display: block;
    border-top: 1px solid #cccccc;
    padding: 2px 0px 2px 10px;
    font-size:12px;
    border-left:1px solid #cccccc;
    border-bottom:1px solid #cccccc;
    }

    #rightnav a:hover{
    background-color: #C6F575;
    display:block;
    }




    SO - Can anyone suggest the best way to float a sub category out to the left handside (without having to re write all my menus>???)

    Your help is much appreciated.

    Craig
     
  2. pengu macrumors 6502a

    Joined:
    Mar 20, 2005
    Location:
    Diddily Daddily...
    #2
    change your DIV to an UL, wrap each A in an LI, and then ad a UL inside each LI you want a submenu on, after the A

    ie:

    HTML:
    <ul id="sideNav">
    <li><a href="page1.html">Page 1</a>
    <ul>
    <li><a href="page1_1.html">Page 1.1</a></li>
    <li><a href="page1_2.html">Page 1.2</a></li>
    <li><a href="page1_3.html">Page 1.3</a></li>
    </ul>
    </li>
    <li><a href="page2.html">Page 2</a>
    <ul>
    <li><a href="page2_1.html">Page 2.1</a></li>
    <li><a href="page2_2.html">Page 2.2</a></li>
    <li><a href="page2_3.html">Page 2.3</a></li>
    </ul>
    </li>
    <li><a href="page3.html">Page 3</a>
    <ul>
    <li><a href="page3_1.html">Page 3.1</a></li>
    <li><a href="page3_2.html">Page 3.2</a></li>
    <li><a href="page3_3.html">Page 3.3</a></li>
    </ul>
    </li>
    </ul>
    
    and then use this for the CSS:

    ul#sideNav li
    {
    position: relative;
    }

    ul#sideNav li ul
    {
    display: none;
    }

    ul#sideNav li:hover ul, ul#sideNav li.hover ul,
    {
    position: absolute;
    display: block;
    top: 0;
    left: 100px;
    }

    this however relies on the browser supporting :hover on LI elements, which MSIE6 doesn't.

    i've written a small javascript function that goes through a node (ie, the #navBar UL) and applies the correct behaviours to it to simulate the :hover pseudo selector (the script uses the hover class)

    i don't have the script here (home) but i can post it tomorrow (monday) if you want.
     
  3. cwesty thread starter macrumors member

    Joined:
    Oct 22, 2005

Share This Page