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
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

css dropdown menu

  • 18-05-2011 2: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: 11,989 ✭✭✭✭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