CODEWITHSUNDEEP
javascripthtmlcss
Fuv
Fuv

Reputation: 922

Pure CSS & JS drop down menu - onmouseover issue

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

HTML:

<li><a href="#" onmouseover="showRanksSubmenu()" onmouseout="hideRanksSubmenu()">XYZ</a>
    <ul id="rankSubMenu" onmouseover="showRanksSubmenu()" onmouseout="hideRanksSubmenu()">
        <li><a href="#" style="position: absolute; top: 12px;">AAA</a></li>
        <li><a href="#" style="position: absolute; top: 50px;">BBB</a></li>
        <li><a 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?

Upvotes: 2

Views: 10510

Answers (6)

welder
welder

Reputation: 21

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 href="#" >Your Link</a>
    <ol>
    <li><a href="#"> Your Link 1 </a> </li>
    <li><a 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?

Upvotes: 2

dan_vitch
dan_vitch

Reputation: 4559

if you set the height to that of the original item with overflow hidden and then on hover set height to auto

HTML

<nav class="navigation">
   <ul>
      <li><a href="#menu">Menu</a></li>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
   </ul>
</nav>

CSS

.navigation {
    height: 20px;
    overflow: hidden;
}

.navigation {
    height: auto;
}

no javascript needed

Upvotes: 0

EdiSainer
EdiSainer

Reputation: 112

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

Upvotes: 1

PlantTheIdea
PlantTheIdea

Reputation: 16359

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!

Upvotes: 3

Shan Robertson
Shan Robertson

Reputation: 2742

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).

Upvotes: 0

Valerij
Valerij

Reputation: 27748

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

Upvotes: 0

Related Questions