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 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2007
    Posts
    72
    Thanks
    4
    Thanked 0 Times in 0 Posts

    submenu expansion

    Hello:

    I am sooo new to CSS. I have a dropdown menu link with a submenu that works great in FF but when I go to IE, the submenu will not expand. If I do expand it, it throws off the main links. How do I get the main links to line up in one position and the sublinks to line up in another (ex: wider).

    My sample is located at
    http://netsitemaker.com/faithchapel/index.php

    I've been on this stupid code for three days now. I could have built the rest of the site by the time I figure this out. Something that really bugs me. Here's my CSS code>>>

    /* The whole menu */
    #menu {
    list-style: none;
    padding-left:22px;
    margin:0;
    font-family:"Century Gothic", Arial, Helvetica, Verdana;
    }


    /* Each menu name */
    #menu li {
    position:relative;
    float: left;
    font-size:90%;
    font-weight:bold;
    text-align: center;
    cursor: default;
    margin: 123px 0 0 0;
    padding: 0;
    }


    /* each main menu link */
    #menu li a:link, a:visited {
    display: block;
    width: 115px;
    color: black;
    text-decoration:none;
    }

    #menu li a:hover {
    color: #ff9604;
    }








    /* The entire submenu */
    #menu li ul.submenu {
    width: 170px;
    display: none;
    position: absolute;
    margin:0;
    padding: 0;
    font-weight: bold;
    color:white;
    background-color:red;
    }



    /* Each submenu item */
    #menu li ul li {
    width: 170px;
    list-style-type: none;
    color:white;
    background-colorurple;
    font-size:9pt;
    font-weight:normal;
    text-align:left;
    padding-left: 3px;
    margin:0;
    }

    #menu li ul li a {
    width: 200px;
    color: white;
    background-color:black;
    padding: 0px;
    margin:0px;
    text-decoration: none;
    }

    #menu li ul li a:hover {
    width: 170px;
    color: black;
    background-color:white;
    padding: 0px;
    margin:0px;
    text-decoration: none;
    }

    What am I doing wrong??? Please help!

  • #2
    New Coder
    Join Date
    Apr 2007
    Posts
    72
    Thanks
    4
    Thanked 0 Times in 0 Posts
    HI,

    I just added a <nobr></nobr> tags to the actual list category as follows:

    <ul>
    <li class="submenu"><a href=""><nobr>Frequently Asked
    Questions</nobr></a></li>
    </ul>

    This seems to solve the problem in IE and works in FF too. However, is this correct code semantics? I would like to use CSS and HTML properly if possible. Can anyone help out with this one?

    thanks in advance.

  • #3
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    What is "nobr"? (I'm assuming it stands for no break, but what is that tag?)
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls


  •  

    Posting Permissions

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