Results 1 to 2 of 2

Thread: Second Level Drop Down Menu Issue

  1. #1
    Join Date
    Mar 2008
    Location
    North Texas
    Posts
    152

    Second Level Drop Down Menu Issue

    I couldn't get my second level drop down menu to be hidden until hover. I finally acheived that by adding to my css

    #navbar ul li ul ul {
    position:left;
    left:-999em;
    }
    My CSS is quoted below.

    Now I'm not sure how to make it appear on hover.

    Also, how do I get the drop down to be directly under the nav link?

    Here is the link. Any suggestions?

    @charset "UTF-8";

    {
    margin: 0px;
    padding: 0px;
    }
    .bgimage {
    background-image: url("images/blackstripebg.jpg");
    }
    .bgrepeaty {
    background-image: url("images/blackstripebg.jpg");
    background-repeat: repeat-y;
    }
    .bgrepeatx {
    background-image: url("images/blackstripebg.jpg");
    background-repeat: repeat-x;
    }
    #content {
    background-color: #FFFFFF;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: small;
    color: #000000;
    }
    #header {
    background-color: #FFFFFF;
    padding-top: 0px;
    }
    #navbar {
    background-color: #000000;
    color: #34C601;
    font-family: Arial, Helvetica, sans-serif;
    float:left;
    width:100%;
    height:auto;
    margin-top: 2px;
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-top-color: #000000;
    border-right-color: #000000;
    border-bottom-color: #000000;
    border-left-color: #000000;
    padding: 0px;
    font-size: medium;
    }
    #navbar ul {
    list-style-type: none;
    }
    #navbar ul li {
    float: left;
    position: relative;
    }
    #navbar ul li a {
    text-align: center;
    border-right:1px solid #e9e9e9;
    padding:25px;
    display:block;
    text-decoration:none;
    color:#30B401;
    }

    #navbar ul li:hover ul {
    display: block;
    position: absolute;
    }
    #navbar ul li:hover ul li a {
    display:block;
    background:#000000;
    color:#30B401;
    width: 160px;
    text-align: center;
    border-bottom: 1px solid #f2f2f2;
    border-right: none;
    }
    #navbar ul li:hover ul li a:hover {
    background:#30B401;
    color:#000000;
    }
    #navbar ul li ul {
    position:left;
    display:none;
    }
    #navbar ul li ul {
    position:left;
    display:none;
    }
    #navbar ul li ul ul {
    position:left;
    left:-999em;
    }
    #container {
    width: 900px;
    background-color: #FFFFFF;
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
    border: 4px double #000000;
    }

    a img { border:none; }
    Last edited by NTxNerd; 22 Jul 2009 at 12:17 AM. Reason: adding info
    North Texas Nerd- Website Design, Email Marketing, Professional Print Services & Much More.

    "Who ever said being a nerd was bad?"

  2. #2
    Join Date
    Feb 2006
    Location
    Salisbury UK
    Posts
    4,332
    Quite honestly, fiddling with the code of drop down menus is a hopeless task; it's much easier to get the nearest style of cssplay menu to what you want and edit it.
    http://www.cssplay.co.uk/menus/
    Code downloaded to my PC will be deleted in due course.
    WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
    Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.

Similar Threads

  1. Dropdown menu with css and javascript...?
    By AllanH in forum Client & Server Side Scripting (PHP, ASP, JavaScript)
    Replies: 1
    Last Post: 14 May 2009, 03:59 AM
  2. CSS Drop down menu in IE problem..
    By mylah in forum Web Design, HTML Reference and CSS
    Replies: 0
    Last Post: 24 Mar 2009, 09:41 AM
  3. JS Drop Down Menu help!
    By hedur218 in forum Web Design, HTML Reference and CSS
    Replies: 0
    Last Post: 01 Feb 2008, 02:56 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •