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

    Join Date
    Jun 2013
    Posts
    3
    Rep Power
    0

    Smile Need help with CSS dropdown menu using class


    Hi below is my HTML. I'm trying to create a dropdown menu for the below HTML. I very new to css. Need help to understand where i'm going wrong.
    <body>
    <div id="div1">
    <ul>
    <li><a href="test.html"> test (1 to 12)</a>

    <ul id="menu">
    <li class="target" usernum="1">test 1</li>
    <li class="target" usernum="2">test 2</li>
    <li class="target" usernum="3">test 3</li>
    <li class="target" usernum="4">test 4</li>
    <li class="target" usernum="5">test 5</li>
    </ul>
    </li>
    </ul>
    </div>
    </body>
    CSS:
    #div1 {
    background-color: azure;
    margin: 70px;
    width: 160px;
    }
    #div1 {
    position: absolute;
    z-index:1000;
    left: 510px;
    top: 30px;
    right: auto;
    bottom: auto;
    }
    #div1 ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    }
    #div1 ul li #menu ul {
    position: absolute;
    top: 31px;
    visibility: hidden;
    }
    #div1 ul li:hover #menu ul {
    visibility: visible;
    }
    #div1 ul li a:hover {
    background-color: #900;
    }
    #div1 ul li #menu ul li {
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: #999;
    border-bottom-color: #555;
    }
    #div1 ul li {
    float: left;
    position: relative;
    }
    #div1 ul li a {
    display: block;
    height: 30px;
    width: 160px;
    background-color: #069;
    color: #FFF;
    line-height: 30px;
    text-decoration: none;
    text-align: center;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: #555;
    border-bottom-color: #555;
    border-left-color: #999;
    }

    Please help!
  2. #2
  3. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    247
    Rep Power
    86
    Hi there praveen das,

    and a warm welcome to these forums.

    Does this simplification help...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    #menu {
        width:160px;
        margin:100px auto 0;
        padding:0;
        list-style-type:none;
        background-color:#069;
     }
    menu li {
        position:relative;
     }
    #menu ul {
        position:absolute;
        display:none;
        margin:0;
        padding:0;
        list-style-type:none;
        background-color:#f0ffff;
     }
    #menu a {
        display:block;
        line-height:30px;
        color:#fff;
        text-align:center;
        text-decoration:none;
        border-style:solid;
        border-width:1px;
        border-color:#999 #555 #555 #999;
     }
    #menu li:hover {
        background-color:#900;
     }
    #menu li:hover ul {
        display:block;
     }
    #menu ul li {
        width:158px;
        line-height:30px;
        border-style:solid;
        border-width:1px;
        border-color:#999 #555 #555 #999;
        text-align:center;
     }
    #menu ul li:hover {
        color:#fff;
     }
    </style>
    
    </head>
    <body>
    
    <ul id="menu">
     <li><a href="test.html">test (1 to 12)</a>
      <ul>
       <li>test 1</li>
       <li>test 2</li>
       <li>test 3</li>
       <li>test 4</li>
       <li>test 5</li>
      </ul></li>
    </ul>
    
    </body>
    </html>
    coothead
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    Welcome to DevShed Forums, praveen das.

    The problem is that three of your selectors don't match your markup. "#menu ul" means any <ul> descendants of the element with the ID "menu". Where as you meant "ul#menu" which means an <ul> element with the ID "menu". However, almost always with IDs and often with classes it's more efficient to not specify the element type, so to fix your code you'd replace "#menu ul" with just "#menu".

    P.S. When posting code, please place it between [code][/code] tags.
    If you want to use the button to add the tags, paste the code in the textarea and then select it before clicking the button (so you don't get the problematic JavaScript prompt dialog).
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    3
    Rep Power
    0
    Hi Coothead,
    Thanks a ton for the help! It helped a lot.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    3
    Rep Power
    0
    Hi Kravvitz,
    I tried the solution suggested by you. You are right i was making mistake in "#menu ul". Thanks for making me understand the concept
  10. #6
  11. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    247
    Rep Power
    86

    No problem, you're very welcome.

    coothead

IMN logo majestic logo threadwatch logo seochat tools logo