Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

css dropdown menu

  • 18-05-2011 03:17PM
    #1
    Keewee6
    Registered Users, Registered Users 2 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

  • #2
    yoyo
    Moderators, Technology & Internet Moderators Posts: 11,017 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



  • #3
    Giblet
    Registered Users, Registered Users 2 Posts: 12,025 ✭✭✭✭Giblet


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


  • #4
    Keewee6
    Registered Users, Registered Users 2 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>


  • #5
    chakotha
    Registered Users, Registered Users 2 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