#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2009
    Posts
    2
    Rep Power
    0

    Question Need Help With Css Drop Down Menu


    I'm playing around with CSS for the first time and have created a drop down menu that I would like to use for a site I have so any help would be greatly appreciated!!!

    I've placed the menu on its own page at h t t p : / / aztechnogeek . somee . com / cssmenu . html for accurate coding (just view source). - sorry as a new user I guess I can't post hyperlinks.

    What I would like to know how to do is when the cursor is moved down a menu list why the top hover attribute does not stay active??? Confusing I know but when you see the working menu you'll understand - I hope.

    Any help would be great, thank you!!!
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2009
    Location
    Hobart, Tasmania
    Posts
    475
    Rep Power
    291
    Your server was down, please post your code here.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2009
    Posts
    2
    Rep Power
    0

    Code


    style sheet:

    -------------------------------------------------------------

    #menu
    {
    position: absolute;
    background-color: #d3d3d3;
    height: 18px;
    }

    #menu ul .item
    {
    display: none;
    }

    #menu ul:hover .item
    {
    display: block;
    text-align: center;
    background-color: #f2f2f2;
    padding: 0px;
    margin: 0px;
    }

    #menu ul:hover .item a
    {
    display: block;
    color: #118;
    text-decoration: none;
    font-weight: normal;
    }

    #menu ul:hover .item a:hover
    {
    color: #118;
    text-decoration: underline;
    }

    #menu ul
    {
    border-style: solid none none none;
    border-width: 0px;
    border-color: #118;
    float: left;
    margin: 0px;
    padding: 0px;
    list-style: none;
    font-weight: bold;
    }

    #menu .top
    {
    display: block;
    color: #118;
    cursor: pointer;
    background-color: #d3d3d3;
    text-align: center;
    width: 195px;
    font-size: 16px;
    border-style: none solid none none;
    border-width: 1px;
    border-color: white;
    }

    #menu .top a
    {
    display: block;
    color: #118;
    text-decoration: none;
    }

    #menu .top:hover
    {
    background-color: #f2f2f2;
    }

    #menu .top:active
    {
    background-color: #f2f2f2;
    }

    -------------------------------------------------------------

    Page:

    -------------------------------------------------------------

    <div id="menu">
    <ul id="item1">
    <li class="top">MENU ITEM</li>
    <li class="item"><a href="#">menu item 1</a></li>
    <li class="item"><a href="#">menu item 2</a></li>
    <li class="item"><a href="#">menu item 3</a></li>
    </ul>
    <ul id="item2">
    <li class="top"><a href="#">MENU ITEM</a></li>
    </ul>
    <ul id="item3">
    <li class="top">MENU ITEM</li>
    <li class="item"><a href="#">menu item 1</a></li>
    <li class="item"><a href="#">menu item 2</a></li>
    </ul>
    <ul id="item4">
    <li class="top" style="border: none;">MENU ITEM</li>
    <li class="item"><a href="#">menu item 1</a></li>
    <li class="item"><a href="#">menu item 2</a></li>
    <li class="item"><a href="#">menu item 3</a></li>
    <li class="item"><a href="#">menu item 4</a></li>
    </ul>
    </div>

IMN logo majestic logo threadwatch logo seochat tools logo