All CSS menu when hover show submenu


Tags: css,menu

Problem :

This isn't really my place of expertise, so I'm not even completely sure how this works. I have a single menu created perfectly, which works, see HERE.

Code:

<div style="display:inline-block" id="menu1outer">
  <div class="menus" style="cursor:pointer;">Menu</div>
    <a href="">
      <div id="submenus1" class="submenus" style="background-color:#1734c7;">
        Sub 1
      </div>
    <a/>
    <a href="">
      <div id="submenus1" class="submenus" style="background-color:#3151f6">
        Sub 2
      </div>
    <a/>
    <a href="">
      <div id="submenus1" class="submenus" style="background-color:#6780ff">
        Sub 3
      </div>
    <a/>
  </div>

And the CSS is below:

.menus {
    width:100px;
    height:50px;
    border: 5px solid #000000;
    border-radius: 25px;
    text-align: center;
    line-height: 50px;
    color: black;
    background-color: #dcdcdd;
}
.submenus {
    margin-top:10px;
    display:none;
    width:100px;
    height:50px;
    border: 5px solid #000000;
    border-radius: 25px;
    text-align: center;
    line-height: 50px;
    color: black;
}
#menu1outer:hover #submenus1 {
    display: block;
}

However, whenever I add a second dropdown menu, everything gets messed up. Now whenever the first menu is hovered over, the submenus display, but the other menu gets moved. I have already tried positioning the menus absolutely, which also messes up the inline-block div. Sorry if this is confusing, the example helps. Here is how it looks with the second menu with it. Fiddle

Also, this seems a little localized, but it really isn't, it's just that I don't know how to put it into general terms because I don't know what exactly is messing up, and I'm not too good with this kind of stuff.



Solution :

The easiest way in my oppinion is to float the "outer" <div> elements to left instead of positioning them with "inline-block". The HTML would look like this:

<div style="float:left;" id="menu1outer">
    <a href=""><div class="menus">Menu 1</div></a>
    <a href=""><div id="submenus1" class="submenus">Sub 1</div><a/>
    <a href=""><div id="submenus1" class="submenus">Sub 2</div><a/>
    <a href=""><div id="submenus1" class="submenus">Sub 3</div><a/>
</div>

<div style="margin-left:50px;float:left;" id="menu2outer">
    <a href=""><div class="menus">Menu 2</div></a>
    <a href=""><div id="submenus2" class="submenus">Sub 1</div><a/>
    <a href=""><div id="submenus2" class="submenus">Sub 2</div><a/>
    <a href=""><div id="submenus2" class="submenus">Sub 3</div><a/>
</div>

Or just check out this fiddle.


    CSS Howto..

    How does Mozilla create this animated effect?

    how to get fixed table columns width

    How to set min-height for bootstrap container

    How to use same css for separate media query conditions

    How to use jQuery to detect loaded background image after inserting out CSS

    How to scale an element when it loads using only CSS?

    How To Set CSS Classes On HTML Tags Which Are Included In The Page With PHP Include's

    How to keep an unordered list centered within the screen?

    How can I change a table td width using CSS in Spiceworks?

    How to change a portion of text on hover with css [duplicate]

    How to turn off link effect on iPhone/iPod/iPad (CSS)?

    How to fix this CSS 3 code to make it working properly on the server?

    how to add scrollbars to (a potentially infinite) canvas using fabric.js

    How to toggle between display:none and display:block

    Use ::after selector to show line number but also display a element next to it when hovering over the containing table td cell

    How to get a label under an underlined word in css? [closed]

    How to avoid form-control in all inputs with Twitter Bootstrap 3?

    How do you tell which css class to modify?[Example inside]

    how to create circle that cut off one piece with css

    How to vary shade of specific table row id

    jQuery slideshow image delay

    How classes work in a CSS file? [closed]

    How to center this flip card example?

    How to change the Color of dynamically created divs on click event, who are having same class?

    How to move text list items to align with an image list item

    How to fix the height of this div

    How to get CSS pulsating effect to work in FireFox and Internet Explorer?

    How to make an image 'pop out' when page is loaded (using jQuery or possibly CSS transitions)

    Lazy loading images how

    How to make button look like a link?