Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

css dropdown menu

Options
  • 18-05-2011 3:17pm
    #1
    Keewee6
    Registered Users Posts: 287 ✭✭


    workin on this wont rollover any clues thanks

    html
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="dropdown.css" rel="stylesheet" type="text/css" />
    </head>

    <body>

    <div id="wrapper">
    <div id="navmenu">
    <ul>
    <li>
    <a href="#">Menu Ite
    m</a>
    <ul>
    <li><a href="#">Menu here</a></li>
    <li><a href="#">Menu here</a></li>
    <li><a href="#">Menu here</a></li>
    <li><a href="#">Menu here</a></li>
    <li><a href="#">Menu here</a></li>
    </ul>
    </li>
    </ul>
    </div>



    </div>
    </body>
    </html>

    css

    /* CSS Document */

    #navmenu
    {
    margin:0;
    padding:0;
    }

    #navmenu ul
    {
    margin:0;
    padding:0;
    }


    #navmenu li
    {
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position:relative;
    }
    #navmenu ul li a
    {
    height: 30px;
    width: 130px;
    text align:center;
    font-family:arial;
    text-decoration:none;
    display:block
    }

    #navmenu ul ul
    {
    postion:absolute;
    visibility:hidden;
    top: 30px
    }

    #navmenu ul li:hover ul
    {
    visibility:visible;

    }


Comments

  • Options
    #2
    yoyo
    Moderators, Technology & Internet Moderators Posts: 11,005 Mod ✭✭✭✭yoyo


    Try changing:
    #navmenu ul ul
    {
    postion:absolute;
    visibility:hidden;
    top: 30px
    }
    to
    #navmenu ul li
    {
    postion:absolute;
    visibility:hidden;
    top: 30px
    }

    See if that sorts it

    Nick

    My Beer Glass collection site 🍺

    My Irish Callcards site



  • Options
    #3
    Giblet
    Registered Users Posts: 11,977 ✭✭✭✭Giblet


    Which browser? IE6 won't allow the hover pseudo class on anything but an anchor


  • Options
    #4
    Keewee6
    Registered Users Posts: 287 ✭✭Keewee6


    i did that the menu disappears

    /* CSS Document */

    #navmenu
    {
    margin:0;
    padding:0;
    }

    #navmenu ul
    {
    margin:0;
    padding:0;
    }


    #navmenu li
    {
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position:relative;
    }
    #navmenu ul li a
    {
    height: 30px;
    width: 130px;
    text align:center;
    font-family:arial;
    text-decoration:none;
    display:block
    }

    #navmenu ul li
    {
    postion:absolute;
    visibility:hidden;
    top: 30px
    }

    #navmenu ul li:hover ul
    {
    visibility:visible;

    }

    html

    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="dropdown.css" rel="stylesheet" type="text/css" />
    </head>

    <body>

    <div id="wrapper">
    <div id="navmenu">
    <ul>
    <li> <a href="#">Menu Item</a>
    <ul>
    <li><a href="#">Menu here</a></li>
    <li><a href="#">Menu here</a></li>
    <li><a href="#">Menu here</a></li>
    <li><a href="#">Menu here</a></li>
    <li><a href="#">Menu here</a></li>
    </ul>
    </li>
    </ul>
    </div>



    </div>
    </body>
    </html>


  • Options
    #5
    chakotha
    Registered Users Posts: 912 ✭✭✭chakotha


    I'm on Internet Explorer 8 and it requires the DTD. Also position was mis-spelt in 
    #navmenu ul ul
{
postion:absolute;
visibility:hidden;
top: 30px
}

    This should work
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>

#navmenu
{
margin:0;
padding:0;
}

#navmenu ul
{
margin:0;
padding:0;
}
#navmenu ul li
{
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
}
#navmenu ul li a
{
height: 30px;
width: 130px;
text align:center;
font-family:arial;
text-decoration:none;
display:block
}

#navmenu ul ul
{
position:absolute;
visibility:hidden;
top: 30px
}

#navmenu ul li:hover ul
{
visibility:visible;

} 
</style>
</head>

<body>

<div id="wrapper">
<div id="navmenu">
<ul>
<li>
<a href="#">Menu Item</a>
<ul>
<li><a href="#">Menu here</a></li>
<li><a href="#">Menu here</a></li>
<li><a href="#">Menu here</a></li>
<li><a href="#">Menu here</a></li>
<li><a href="#">Menu here</a></li>
</ul>
</li>

</ul>
</div>



</div>
</body>
</html>


Advertisement