Member Avatar for donoskaro

Hello Guys,
I have tried to make a Pure CSS Menu with Sub-Menus but I am stuck with one small (or big) problem. After I hover over my Link which has a Sub-Menu assigned to it, the Sub-Menu appears but if I try to go on it, it disappears. I know it's because my mouse is not on the button anymore. How can I fix this?

This is a live demo: http://obsidiangaming.net/cssmenu
This is the HTML:

<!doctype html>
<html>
<head>
    <title>CSS Menu</title>
    <link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>

    <div id="cssMenu">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li>
        <a href="#" class="dropdown" >Link 2</a>

        <div class="drop">
        <div class="column">
        <b>Link 2</b>
        <a href="#">Sub 1</a>
        <a href="#">Sub 2</a>
        <a href="#">Sub 3</a>
        <a href="#">Sub 4</a>
        </div>
        </div>

        </li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
        <li><a href="#">Link 7</a></li>
    </ul>
    </div>

</body>

And this is the CSS:

* {margin: 0; padding: 0;}
#cssMenu {width: 1040px; height: 50px; margin: auto; margin-top: 100px; background-image: url('menubackground.png'); background-repeat: no-repeat; border-radius: 5px; font-family: arial; border:1px solid #009900;}
#cssMenu {text-align: center;}
#cssMenu ul  {height: 50px; list-style: none;}
#cssMenu ul {display: inline-block; zoom:1; *display: inline;}
#cssMenu ul li {float: left; height: 50px; line-height: 50px; display: block; position:relative}
#cssMenu ul li a {text-decoration: none; padding-top: 17px; padding-bottom: 16px; padding-left: 28px; padding-right: 28px; color: white; font-size: 15px;}
#cssMenu ul li a:hover {background-color: #38B536;}
#cssMenu .dropdown, #cssMenu .dropdown:hover {background-image: url('arrow.gif'); background-repeat: no-repeat; background-position: right center;}
#cssMenu .dropdown:hover {background-color: #FFFFFF; color: #38B536; }
.drop {display: none;}
#cssMenu .dropdown:hover + .drop {display: block;}
#cssMenu li: hover a {text-decoration:underline;}
.drop .column a {white-space:nowrap; clear: both; color: black !important; padding: 0; margin: 0; background: none; display: block; line-height: 15px; height: 15px; padding: 5px !important;}
.drop .column a:hover {background: none;}
.drop .column { padding: 5px;}
.drop {position:absolute; text-align:left; border:1px solid #009900; background:#FFFFFF; padding:20px;}

I have tried many solutions but none of them work. Is this possible to achieve or do I have to redesign the HTML layout?

Thank you,
Oskar

  • 4 Contributors
  • 4 Replies
  • 406 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by creiglee
Member Avatar for JorgeM

I tried working with your example, but am having trouble with your approach. I have a demo you can take a look at and feel free to adapt to your needs if you find that you will need to rewrite some of your HTML.

Example --> Multi Level CSS Navigation Menu

Edited by JorgeM
Member Avatar for donoskaro

Thanks guys, I have used IIM's Link and copied the structure and then just applied the CSS styling that I had on my original. Works perfectly. Thank you!

Member Avatar for creiglee

Try this pure CSS Menu

Lee

commented: "Works perfectly" and solved 2 years ago, usually indicate it's not a good idea to post here. -1
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.