Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2006
    Location
    okc, ok
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy my drop down menu is not dropping down correctly...

    the items in my dropdown menu have way too much padding to the left of them and as a result, the text wraps. i dont want it to wrap but i have not specified any padding. i tried adding "padding-left: 0px;" everywhere but nothing happens. also, when the items drop down, there is a > in the box, how do i remove this?

    here is my menu's html:



    <div id="menu">
    <dl>
    <dt onmouseover="javascript:show();"><a href="" title="Return to home">Home</a></dt>
    </dl>

    <dl>
    <dt onmouseover="javascript:show();"><a href="aboutus/aboutus.html" title=" About Us">About Us</a></dt>

    </dl>


    <dl>
    <dt onmouseover="javascript:show('smenu2');">Ministries</dt>
    <dd id="smenu2" onmouseover="javascript:show('smenu2');" onmouseout="javascript:show('');">>
    <ul>
    <li><a href="ministries/youth.html">The Youth Group</a></li>

    </ul>
    </dd>
    </dl>

    <dl>
    <dt onmouseover="javascript:show('smenu3');">Menu 3</dt>
    <dd id="smenu3" onmouseover="javascript:show('smenu3');" onmouseout="javascript:show('');">>
    <ul>
    <li><a href="---------------------">sub-menu 3.1</a></li>

    </ul>
    </dd>
    </dl>

    <dl>
    <dt onmouseover="javascript:show('smenu4');">Menu 4</dt>
    <dd id="smenu4" onmouseover="javascript:show('smenu4');" onmouseout="javascript:show('');">>
    <ul>
    <li><a href="#">sub-menu 4.1</a></li>
    <li><a href="#">sub-menu 4.2</a></li>
    <li><a href="#">sub-menu 4.3</a></li>
    </ul>
    </dd>
    </dl>
    </div>


    and the css:

    #menu {
    position: absolute;
    top: 243px;
    left: 0;
    z-index:100;
    width: 100%;
    }
    #menu dl {
    float: left;
    width: 12em;
    margin: 0 1px;
    padding-left: 0px
    }
    #menu dt {
    padding-left: 0px
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    background: #ccc;
    border: 1px solid gray;
    }
    #menu dd {
    border: 1px solid gray;
    padding-left: 0px
    }
    #menu li {
    list-style: none;
    padding-left: 0px
    text-align: center;
    background: #fff;
    }
    #menu li a, #menu dt a {
    color: #000;
    text-decoration: none;
    display: block;
    height: 100%;
    border: 0 none;
    padding-left: 0px
    }
    #menu li a:hover, #menu dt a:hover {
    background: #eee;
    padding-left: 0px
    }

    #site {
    position: absolute;
    z-index: 1;
    top : 70px;
    left : 10px;
    color: #000;
    background-color: #ddd;
    padding: 5px;
    border: 1px solid gray;
    }

    a {text-decoration: none;
    color: black;
    color: #222;
    }

    thanks, snunicycler
    Last edited by snunicycler; 10-25-2006 at 11:27 PM. Reason: forgot to give html and css

  • #2
    New to the CF scene
    Join Date
    Oct 2006
    Location
    okc, ok
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry about reposting but i figured out the padding issue by putting the following at the top of the menu section of my css:

    dl, dt, dd, ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

    but the drop down items still have the greater than symbol (>) in the upper left corner of the box. how do i get rid of this? thanks

  • #3
    Regular Coder
    Join Date
    Oct 2006
    Location
    Somewhere
    Posts
    103
    Thanks
    4
    Thanked 3 Times in 3 Posts
    Might these be causing it?

    <dd id="smenu4" onmouseover="javascript:show('smenu4');" onmouseout="javascript:show('');">>
    I notice you have the two ">" next to each other in a few places. Try removing one of them per duo.

    -'Dee

  • #4
    New to the CF scene
    Join Date
    Oct 2006
    Location
    okc, ok
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yep, good eye! that one had me stumped for ever! i kept looking in my css. i appreciate it!

  • #5
    Regular Coder
    Join Date
    Oct 2006
    Location
    Somewhere
    Posts
    103
    Thanks
    4
    Thanked 3 Times in 3 Posts
    You're welcome.

    I know the feeling; I've spent an hour stumped at a page's code, before, to realize my entire presentation problem was due to a missing quotation mark...

    -'Dee


  •  

    Posting Permissions

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