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

    Join Date
    Oct 2013
    Posts
    2
    Rep Power
    0

    Unhappy Dropdown menu


    Hi, I am new to css and would like to learn with the following example. It is supposed to display submenu on each menu, but it only shows the menu and no submenu is shown. Would someone please help.

    <style type="text/css">
    <code>
    #nav{
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
    float:left;
    width:100%;
    }
    #nav li{
    float:left;
    margin-right:10px;
    position:relative;
    }
    #nav a{
    display:block;
    padding:5px;
    color:#fff;
    background:#333;
    text-decoration:none;
    }
    #nav a:hover{
    color:#fff;
    background:#6b0c36;
    text-decoration:underline;
    }

    #nav ul{
    background:#fff;
    background:rgba(255,255,255,0);
    list-style:none;
    position:absolute;
    left:-9999px;
    }
    #nav ul li{
    padding-top:1px;
    float:none;
    }
    #nav ul a{
    white-space:nowrap;
    }
    #nav li:hover ul{
    left:0;
    }
    #nav li:hover a{
    background:#6b0c36;
    text-decoration:underline;
    }
    #nav li:hover ul a{
    text-decoration:none;
    }
    #nav li:hover ul li a:hover{
    background:#333;
    }</code>

    </style>

    <code><ul id="nav">
    <li>
    <a href="#">Home</a>
    </li>

    <li>
    <a href="#">About</a>
    <ul>
    <li><a href="#">The product</a></li>

    <li><a href="#">Meet the team</a></li>
    </ul>
    </li>
    <li>
    <a href="#">Services</a>

    <ul>
    <li><a href="#">Sevice one</a></li>
    <li><a href="#">Sevice two</a></li>

    <li><a href="#">Sevice three</a></li>
    <li><a href="#">Sevice four</a></li>
    </ul>

    </li>
    <li>
    <a href="#">Product</a>
    <ul>
    <li><a href="#">Small product (one)</a></li>

    <li><a href="#">Small product (two)</a></li>
    <li><a href="#">Small product (three)</a></li>
    <li><a href="#">Small product (four)</a></li>

    <li><a href="#">Big product (five)</a></li>
    <li><a href="#">Big product (six)</a></li>
    <li><a href="#">Big product (seven)</a></li>

    <li><a href="#">Big product (eight)</a></li>
    <li><a href="#">Enourmous product (nine)</a></li>
    <li><a href="#">Enourmous product (ten)</a></li>

    <li><a href="#">Enourmous product (eleven)</a></li>
    </ul>
    </li>
    <li>
    <a href="#">Contact</a>

    <ul>
    <li><a href="#">Out-of-hours</a></li>
    <li><a href="#">Directions</a></li>

    </ul>
    </li>
    </ul></code>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    2
    Rep Power
    0

    Question Menu closed when cursor move beyond the first submenu in a dropdown menu


    Hi,
    I have this problem with a dropdown menu. The menu closed when the cursor moves beyond the first submenu (there are 3 submenus). New to CSS and do not know what is wrong with the definition. Please help.
    The followings are the code:

    <style type="text/css">
    #nav, #nav ul {
    font-family: Arial, Verdana;
    font-size: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    }

    #nav a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 1px 15px 1px 15px;
    background: #2C5463;
    margin-left: 1px;
    white-space: nowrap;
    }

    #nav li {
    display: block;
    position: relative;
    float: left;
    }
    #nav li ul a:hover { background: #617F8A; }

    #nav li ul {
    position: absolute;
    width: 10em;
    left: -999em;
    }

    #nav li:hover ul, #nav li.sfhover ul {
    left: auto;
    }

    </style>
    <SCRIPT LANGUAGE="JavaScript">

    var refer=true;
    function combo(divid) {
    var div=divid;
    if (refer) {
    document.getElementById(div).style.visibility="visible";
    refer=false;
    }
    else {
    document.getElementById(div).style.visibility="hidden";
    refer=true;
    }
    }

    sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");

    for (var i=0; i<sfEls.length; i++) {

    sfEls[i].onmouseover=function() {

    this.className+=" sfhover";
    }

    sfEls[i].onmouseout=function() {

    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
    }
    }

    if (window.attachEvent) window.attachEvent("onload", sfHover);
    <body>
    <table width="800" align="center">
    <ul id="nav">
    <li><a href="#">Menu 1</a>
    <ul>
    <li><a href="#">Google</a></li>
    <li><a href="#">groupon</a></li>
    <li><a href="#">mail 126</a></li>
    </ul>
    </li>

    <li><a href="#">Menu 2</a>
    <ul>
    <li><a href="#">Submenu 1</a></li>
    <li><a href="#">Submenu 2</a></li>
    <li><a href="#">Submenu 3</a></li>
    </ul>
    </li>
    <li><a href="#">Menu 3</a></li>

    </ul>
    </table>
    </body>

    Thanks in advance.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Dec 2004
    Posts
    3,003
    Rep Power
    376
    i think what you need to do is search for "css menu" or something and you will get some great examples. I unfortunately have not yet been able to understand the whole complexity of sub-menus. so i search for one each time and change the formatting/colours to suit my site.


    PS> i noticed you had open another thread which i suspect is a duplicate of this one.

IMN logo majestic logo threadwatch logo seochat tools logo