Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: what's problem?

  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    what's problem?

    I write a javascript menu , but the third menu is not full work. the CSS don't show the background on the mouse over.

    please help me . thanks !

    the code:

    <html>
    <head>

    <style type="text/css">

    /* first menu. */

    .menu {//float:right;
    position:relative;
    margin-top:20px;
    height:55px;
    z-index:99;
    //border:thin solid red;
    }

    .menu ul {margin-top:0px; }

    .menu li{padding:5px;}

    .menu ul li { display:inline;
    padding:0px;
    margin-left:5px;
    position:relative; }

    .menu ul li span {text-align:center;
    padding:5px;
    font-size:13;
    color:blue;
    cursor:default;
    z-index:99;
    }

    .menu ul li ul {display:none;}

    /*second menu. */

    .menu ul li:hover span { background:beige;
    cursor:default;
    }

    .menu ul li:hover ul { display:block;
    position:absolute;
    top:20px;
    left:-1px;
    padding:0px;
    }

    .menu ul li:hover ul li { display:block;
    background:beige;
    font-size:12pt;
    text-align:center;
    width:150px;
    padding:5px;
    position: relative;
    cursor:default;
    }

    .menu ul li:hover ul li span {
    text-align:center;
    background:beige;
    padding:5px;
    font-size:13;
    color:blue;
    cursor:default;
    }

    .menu ul li:hover ul li > ul{display:none;}

    /* three menu.*/

    .menu ul li:hover ul li:hover {background:bisque; cursor:default;}

    .menu ul li:hover ul li:hover span {background:bisque; cursor:default;}

    .menu ul li:hover ul li:hover > ul { display:block;
    position:absolute;
    top:0px;
    left:150px;
    padding:0px;
    }

    .menu ul li:hover ul li:hover > ul li{display:block;
    font-size:10pt;
    text-align:center;
    width:150px;
    position: relative;
    cursor:default;}

    .menu ul li:hover ul li:hover > ul li:hover{ background:bisque; cursor:hand;}

    /* last menu */

    /* base style .*/

    body{}

    div {margin-left:auto;margin-right:auto;}

    a:link,a:visited,a:active {text-decoration:none;color:blue; }

    li {list-style:none;}

    .clear{clear:both;}

    </style>

    <script type="text/javascript">

    function showMenu(here){

    var newUl=document.createElement("ul");
    newUl.className="last";
    var sub1=here.appendChild(newUl);
    var newLi=document.createElement("li");
    var sub2=sub1.appendChild(newLi);
    var newText=document.createTextNode("2007-7-2");
    var sub3=sub2.appendChild(newText);
    var newLi=document.createElement("li");
    var sub2=sub1.appendChild(newLi);
    var newText=document.createTextNode("2007-6-30");
    var sub3=sub2.appendChild(newText);

    }

    </script>

    </head>

    <body >

    <div class="menu">

    <ul>
    <li>
    <span >first level menu</span>
    <ul>
    <li onmouseover="showMenu(this)">
    <span >second level menu</span>
    </li>
    </ul>
    </li>
    <li>
    <span >first level menu</span>
    <ul>
    <li onmouseover="showMenu(this)">
    <span >second level menu</span>
    </li>
    </ul>
    </li>
    <li>
    <span >first level menu</span>
    <ul>
    <li onmouseover="showMenu(this)">
    <span >second level menu</span>
    </li>
    </ul>
    </li>
    </ul>
    </div>

    </body>

    </html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    hi,
    remove the // in your comment.
    The CSS commenting have to be done with /* */, as you did for some other
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I remove the "//",however the script doesn't work .

    please help me.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Would be more helpful, if you post a link to your page or properly wrap your current code in [code] with proper indent.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Would be more helpful, if you post a link to your page or properly wrap your current code in [code] with proper indent.
    Code:
    <html>
      <head>
    <style type="text/css">
    
    .test{color:red;cursor:default;}
    .test:hover{color:blue;}
    
    </style>
    
    <script type="text/javascript">
    
    function  show(){
    var start=document.getElementById("test");
    var newSpan=document.createElement("span");
    var subSpan=start.appendChild(newSpan);
    var newText=document.createTextNode("I am in");
    subSpan.appendChild(newText);
    subSpan.className="test";
    }
    
    </script>
    
      </head>
    
      <body>
    
    <div   id="test">
    
    <span  style="background:#CCFFFF;padding:5px;cursor:default;"   onMouseOver="show()">
    here i am
    </span>
    
    </div>    
    
      </body>
    
    </html>

    above this code the test:hover is not work. and then I will join onClick Property......

    why?

    thanks!
    Last edited by leeshasr; 07-10-2007 at 08:47 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •