www.webdeveloper.com
Results 1 to 3 of 3

Thread: CSS drop down menu disappears when mouse moves off of li

Hybrid View

  1. #1
    Join Date
    Feb 2014
    Posts
    23

    CSS drop down menu disappears when mouse moves off of li

    Ok I have a drop down menu that functions with some jquery but now I am trying to get it working with css in case users have js disabled. I have a selector with the hover pseudo-class and I am telling it to display:block the hidden submenu when moused over. But when I try to select any links in the sub-menu it promptly disappears once my cursor moves off the element I am assigning to the pseudo-class. sorry if my terminology is off I am new to this. Here is the pertinent code:

    Code:
    <nav>
          <ul id="ddmenu">
            <li><a href="index.html">Homepage</a></li>
            <li><a href="#">About</a>
              <ul>
                <li><a href="#">Our Mission</a></li>
                <li><a href="#">The Staff</a></li>
                <li><a href="#">History</a></li>
              </ul>
            </li>
            <li><a href="#">Services</a>
              <ul>
                <li><a href="#">Donations</a></li>
                <li><a href="#">Volunteering</a></li>
                <li><a href="#">Housing</a></li>
                </ul>
              </li>
            
            <li><a href="#">International</a>
              <ul>
                <li><a href="#">China</a></li>
                <li><a href="#">Japan</a></li>
                <li><a href="#">Canada</a></li>
                <li><a href="#">Australia</a></li>
                <li><a href="#">South America</a></li>
              </ul>
            </li>
            <li><a href="contact.php">Contact Us</a></li>
          </ul>
        </nav>
    and here is my css:
    Code:
     #ddmenu li { display: block; position: relative; float: left; font-size: 1.45em; text-shadow: 1px 1px 0 #fff; border-right: 1px solid #dae0e5; }
    
    #ddmenu li a {
      display: block;
      float: left;
      padding: 0 12px;
      line-height: 78px;
      font-weight: bold;
      text-decoration: none;
      color: #FF0000;
      -webkit-transition: all 0.2s linear;
      -moz-transition: all 0.2s linear;
      -o-transition: all 0.2s linear;
      transition: all 0.2s linear;
    }
    #ddmenu li:hover > a { color: #565051; background: #C0C0C0; }
    
    
    #ddmenu li:hover ul { display:  block;}
    
    #ddmenu ul {
      position: absolute;
      top: 88px;
      width: 130px;
      background: #fff;
      display: none;
      margin: 0;
      padding: 7px 0;
      list-style: none;
      border-radius: 3px;
      border: 1px solid rgba(0, 0, 0, 0.2);
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    }
    
    /* tooltip arrow */
    #ddmenu ul:after {
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      bottom: 100%;
      left: 8px;
      border-width: 0 8px 8px 8px;
      border-style: solid;
      border-color: #fff transparent; 
    }
    
    #ddmenu ul:before {
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      bottom: 100%;
      left: 4px;
      border-width: 0 10px 10px 10px;
      border-style: solid;
      border-color: rgba(0, 0, 0, 0.1) transparent;  
    }
    
    #ddmenu ul li { 
      display: block; 
      width: 100%; 
      font-size: 0.9em; 
      text-shadow: 1px 1px 0 #fff;
    }
    
    #ddmenu ul li a {
      display: block;
      width: 100%;
      padding: 6px 7px;
      line-height: 1.4em;
      -webkit-transition: all 0.2s linear;
      -moz-transition: all 0.2s linear;
      -o-transition: all 0.2s linear;
      transition: all 0.2s linear;
    }
    #ddmenu ul li a:hover { background: #C0C0C0; }
    thanks for your time guys

  2. #2
    Join Date
    Feb 2014
    Location
    England
    Posts
    52
    Here is a great resource for creating a css dropdown menu.

    I would recommend getting it working with purely css and then working on the javascript on top if it's really needed.

    http://csswizardry.com/2011/02/creat...dropdown-menu/

    Good luck!

  3. #3
    Join Date
    Feb 2014
    Posts
    23
    here is a post i made on stackoverflow concerning this issue..i have a link to a jfiddle that gives you a good idea of what my problem is:

    Okay I will try to make this as succinct as possible. I am trying to create a drop down menu that is pure css3, using the pseudoelements :before and :after to create a styled tooltip arrow that displays on top of the nested li's that "drop down" when you hover over the top level li.

    My problem is that the menu disappears as soon as my mouse leaves the li that I am hovered over, it will not allow me to move my mouse down and hover over the nested li's and I think this is because I have a gap between the nested li's and the top level li's, this gap being used for the styled pseudoelement tool-tip arrow.

    I have an example of what I am doing in this jfiddle, it will give you better idea.

    http://jsfiddle.net/46andtool/dS6G7/1/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles