CODEWITHSUNDEEP
htmlcssdrop-down-menu
user1923
user1923

Reputation: 307

Drop Down Menus

I'm creating a drop down menu with subcategories, and each subcategory has another subcategory to it. For example, when the user hovers over the image, a drop down menu will appear, and when the mouse is placed over the categeory "Color", another drop down menu should appear with 3 colors. However, I cannot get the drop down menu with 3 colors to appear. I suspect it's because I'm not tracing the tags correctly in my CSS file. Could someone please show me what I'm doing wrong? Thanks.

Here is my HTML code:

<body>
    <ul id="coolMenu">
        <li>
            <a href="#"> <img src = "gear_icon.png" 
                     class = "nav" height = "20px" width = "20px">
            </a>
            <ul>
                <li>
                    <a href = "#"> Colors </a>
                    <ul>
                        <li><a href = "#"> Blue </a></li>
                        <li><a href = "#"> Green </a></li>
                        <li><a href = "#"> Red </a></li>
                    </ul>

                </li>
                <li><a href="#">Background</a></li>
                <li><a href="#">Indulgentia</a></li>
            </ul>
        </li>
    </ul>
</body>

This is my CSS code:

#coolMenu, #coolMenu ul {
list-style:none;
 }

 #coolMenu {
float:left;
 }
 #coolMenu > li {
float:left;
 }

 #coolMenu li a {
 display:block;
 height: 2em;
 line-height:2em;
 padding: 0 1.5em;
 text-decoration:none;
 }

  #coolMenu ul {
   position:absolute;
   display:none;
   z-index: 999;
  }

  #coolMenu li:hover ul {
display:block;
  }

  #coolMenu ul li ul li{
  position:absolute;
  display:none;
  z-index:999;
  }

 #coolMenu li ul li:hover a {
      display:block;
 }

Upvotes: 0

Views: 166

Answers (2)

Kisspa
Kisspa

Reputation: 584

Do you mean this style

#coolMenu li > ul > li:hover > ul {
    display: block;
    position: absolute;
    left: 110px;
    top: 0px;
}

example: http://jsfiddle.net/kisspa/2bqQL/enter image description here

Upvotes: 1

manosim
manosim

Reputation: 3690

Have a look at this example: jsfiddle. It's just using HTML & CSS.

HTML

  • Item #1
    • Sub-Item #1
    • Sub-Item #2
    • Sub-Item #3
  • Item #2
    • Sub-Item #4
    • Sub-Item #5
    • Sub-Item #6
  • Item #3
    • Sub-Item #7
    • Sub-Item #8
    • Sub-Item #9

CSS

ul > li {display: block; float: left; margin-right: 10px; position: relative; background: Red; padding: 0.5em; line-height: 1em}
ul ul {display: none; width: 150px; position:absolute; top: 2em; left: 0}
ul ul > li {float: none;}
ul > li:hover > ul,
ul > a:hover + ul {display: block}

Upvotes: 1

Related Questions