0

I am trying to create a centred pure CSS drop down menu, but am struggling with the implementation. Problem summary:

  1. The first menu is transparent and overlapping the other, which it shouldn't
  2. I'm not able to put the menus side-by side
  3. Im unable to centre the menus on the page
  4. I'm unable to get rid of the transparent gap between the link background and the edge of the list
  5. I'd like to select by clicking on the box surrounding the link. Now I have to click on the link itself. Overlapping menu

Here's a JSFiddle example: http://jsfiddle.net/nxq55ppr/1/

Here's the HTML:

<div class="menuitems">
<div class="menuouter"><div class="menuinner">First menu<ul>
    <li><a class="menuitem " href="#">Lorem</a></li>
    <li><a class="menuitem " href="/#">Ipsum</a></li>
    <li><a class="menuitem " href="#">Lorem</a></li>
    <li><a class="menuitem " href="/#">Ipsum</a></li>
</ul></div></div>
<div class="menuouter"><div class="menuinner">Second menu<ul>
    <li><a class="menuitem " href="#">Lorem</a></li>
    <li><a class="menuitem " href="/#">Ipsum</a></li>
    <li><a class="menuitem " href="#">Lorem</a></li>
    <li><a class="menuitem " href="/#">Ipsum</a></li>
</ul></div></div>

And here's the CSS:

.menuinner { 
    margin: 10px;
    padding: 10px; 
    border: 2px solid purple; 
    width: 200px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: absolute;
}
.menuinner > ul { display: none; }
.menuinner:hover > ul { padding: 0; margin: 0; list-style-type: none; display: block; background: #f9f9f9; border-top: 1px solid purple;}
.menuinner:hover > ul > li { list-style-type:none; padding: 5px; display: block;}
.menuinner:hover > ul > li:hover { background: #ccc;}
.menuinner:hover > ul > li:hover > a { color: red; }
neu242
  • 15,796
  • 20
  • 79
  • 114

1 Answers1

1

Here's an updated version of your fiddle

I've also added box sizing rule to your css

*, *:before, *:after {
 box-sizing: border-box;
}

Changes made

  1. The first menu is transparent and overlapping the other, which it shouldn't

Your .menuinner doesn't have background-color, so it appear transparent

  1. I'm not able to put the menus side-by side

Your .menuinner have a width specified but the parent .menuouter have full width

  1. Im unable to centre the menus on the page

Your .menuinner have an absolute position.

  1. I'm unable to get rid of the transparent gap between the link background and the edge of the list

Your ul elements has a default top and bottom margin.

  1. I'd like to select by clicking on the box surrounding the link. Now I have to click on the link

I changed anchor element from inline to block and give it full width.

slashsharp
  • 2,823
  • 2
  • 19
  • 26
  • I will, but could you make a couple of comments in your answer regarding the main problems with my faulty solution? StackOverflow prefers that over a link only. – neu242 Feb 15 '15 at 19:23
  • I updated your answer with iPad support (adding `onClick=”return true;”` to the menu divs) and a fix for the overlapping transparent menus (adding `z-index: 1;` to the first menu): http://jsfiddle.net/nxq55ppr/4. But in Chrome on Android the first menu item is autoselected. Any idea why? – neu242 Feb 16 '15 at 14:54
  • I couldn't test it on Android, but on my Chrome, the menu stay hidden, no autoselected. – slashsharp Feb 16 '15 at 15:01
  • In desktop Chrome it works like it should. On Android Chrome, when I click on the menu, the first item is automatically selected. Annoying... – neu242 Feb 16 '15 at 18:51
  • If you figure out the last part, there's a bounty waiting for you at http://stackoverflow.com/questions/28601716/how-can-i-avoid-the-first-item-in-a-pure-css-pull-down-menu-to-be-auto-selected :) – neu242 Mar 12 '15 at 15:58