JavaScript Pure CSS & JS drop down menu - onmouseover issue pure drop down menu css,pure css drop down menu

I've written this code to create simple CSS and Javascript dropdown menu.

HTML:

<li><a target='_blank' href="#" onmouseover="showRanksSubmenu()" onmouseout="hideRanksSubmenu()">XYZ</a>
    <ul id="rankSubMenu" onmouseover="showRanksSubmenu()" onmouseout="hideRanksSubmenu()">
        <li><a target='_blank' href="#" style="position: absolute; top: 12px;">AAA</a></li>
        <li><a target='_blank' href="#" style="position: absolute; top: 50px;">BBB</a></li>
        <li><a target='_blank' href="#" style="position: absolute; top: 88px;">CCC</a></li>
    </ul>
</li>

CSS:

#rankSubMenu {
     display: none; 
     position: absolute; 
     bottom: 10px;
     left: 278px;
}

JS:

function showRanksSubmenu() {
    document.getElementById('rankSubMenu').style.display = 'block';
}

function hideRanksSubmenu() {
    document.getElementById('rankSubMenu').style.display = 'none';
}

Menu items have of course some height, background and other stuff to make them look like buttons. The problem is that, there is some empty space between this buttons (like a few pixels) and when user stops mouse cursor there, menu disappear (in fact menu always does that, unless you move your cursor real fast). I tried to define this whole area as div or try any other ideas that I thought about, but with no success. Any suggestions how can I solve this?

Answer:1

First off, welcome to the wonderful world of web development. Based on your use of inline styles, li as a top-level container, and attempted use of Javascript for a simple menu show/hide I can tell you're pretty new. No matter! Its a learning process, and web development is fun. :)

First, for what you want, you can do this via CSS only, and without the need for position:absolute in your menu items or anything crazy like that. Here is a working example of a cleaner menu display:

jsFiddle example

My recommendations for the learning process:

  1. Get comfortable with external CSS sheets, use of inline styles is pretty ancient, and very difficult to maintain
  2. Learn about the benefits of classes over IDs when styling; rarely (never?) do you need to use IDs for styling, and class is usually preferred because you can apply it to multiple elements
  3. Get familiar with proper semantic markup; for example li should not be a top-level container, only the container of another ul if there is a sub list or something
  4. Learn external JS event handlers; using inline onwhatever handlers in HTML is another pretty ancient method, and again makes maintenance very difficult

Best of luck!

Answer:2

CSS

    

    .dropdown li{
    float:left;
    width: 240px;
    position:relative;
    }

    .dropdown ol{
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than 
    display:none;) */
    }

    .dropdown li:hover ol{ /* Display the dropdown on hover */
    left:0; /* Bring back on-screen when needed */
    }

HTML


    <ul class="dropdown"> 
    <li>
    <a target='_blank' href="#" >Your Link</a>
    <ol>
    <li><a target='_blank' href="#"> Your Link 1 </a> </li>
    <li><a target='_blank' href="#"> Your Link 2 </a> </li>
    </ol>
    </li></ul>

What else would u need for this? Is there any reason to use javascript to create this?

Answer:3

Take a look at this Fiddle. Perhaps it's what you're looking for. it's only using HTML and CSS.

Answer:4

#rankSubMenu is probably 0px high, try to add some height, also you can do this js free by using :hover

Answer:5

My guess would be set your anchor tags to display block. If an anchor tag is not a block it will ignore a few css properties, width and height being the two main ones, so your click is just the text.

another possible reason is that the submenu coming in is partially covering the link (check your inspector to see what area it's covering).

Answer:6

I have been developing github unofficial card. So that, I designed a simple card for this and create little script for toggling language stats and general stats. After that I realised one problem ...

I have been developing github unofficial card. So that, I designed a simple card for this and create little script for toggling language stats and general stats. After that I realised one problem ...

Get previous location path on back button click event using by angular.js What I want? I want to go previous page when i click the back button in my current page. HTML <input type="button" ...

Get previous location path on back button click event using by angular.js What I want? I want to go previous page when i click the back button in my current page. HTML <input type="button" ...

I am trying to send a json to a php script on a server and even though I have included header in php script to have CORS the console throws error error message XMLHttpRequest cannot load http://...

I am trying to send a json to a php script on a server and even though I have included header in php script to have CORS the console throws error error message XMLHttpRequest cannot load http://...

  1. cors not working with https
  2. cors not working with localhost
  3. cors not working with postman
  4. cors not working with windows authentication
  5. cors not working with spring security

I am new to ExtJs. I have created a twitter widget on twitter. It just works fine on simple html page. As twitter says you just need to include <a class="twitter-timeline" href="https://twitter....

I am new to ExtJs. I have created a twitter widget on twitter. It just works fine on simple html page. As twitter says you just need to include <a class="twitter-timeline" href="https://twitter....

  1. embed twitter widget into website