CODEWITHSUNDEEP
htmlcss
IE8IsBetterThenGoogleChrome
IE8IsBetterThenGoogleChrome

Reputation: 2325

Trying to create a drop down list in CSS3

I've been trying to work on this with no success, for some reason the sub list is just not showing up! I've tried: nav > ul > li:hover > ul{} but that seems to break functionality of the code. I'm sure this is a pretty simple issue I'm having.

nav > ul {
  list-style: none;
}
nav > ul > li {
  padding: 20px;
  float: left;
}
nav > ul > li {
  background-color: #fff;
}
nav > ul > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
}
nav > ul > ul > li {
  float: none;
  width: 200px;
}
nav > ul > li:hover {
  color: #4169E1;
  display: block;
  visibility: visible;
}
body {
  background: black;
}
<nav>
  <ul>
    <li>Home</li>
    <li>About Us</li>
    <li>Secure</li>
    <ul>
      <li>How secure are we?</li>
      <li>We are not secure enough!!</li>
    </ul>
    <li>Mad</li>
  </ul>
</nav>

Upvotes: 0

Views: 62

Answers (3)

Suresh Karia
Suresh Karia

Reputation: 18208

Use some more css3 power!

See Demo here

See Fullscreen

enter image description here

<nav>
    <ul id="menu">
        <li class="category top_level"><a class="selected" href="#">Home</a></li>
        <li class="category top_level"><a href="#">About</a></li>
        <li class="category top_level"><a href="#">Secure</a>
                    <ul class="dropdown">
                <li class="item"><a href="#">How secure are we?</a></li>
                <li class="item"><a href="#">We are not secure enough!!</a></li>
            </ul>
        </li>
        <li class="category top_level last"><a href="#">Mad</a>
        </li>
    </ul>
</nav>

css

body {
    font-family:'Montserrat', sans-serif;
    background:#000;
}
ul {
    list-style-type: none;
}
#menu a {
    text-decoration: none;
    white-space: nowrap;
    color: #222;
    background-color: #fff;
}
#menu li.top_level {
    vertical-align: top;
    zoom: 1;
    display: block;
    float: left;
    width: 16.5%;
    margin-right: 0.2%;
    position: relative;
    text-align:center;
}
#menu li.last {
    margin-right: 0px;
}
#menu .dropdown {
    float: none;
    z-index: 100;
    position: absolute;
    width: 100%;
    height: 0;
    overflow: hidden;
}
#menu .category:hover .dropdown, #menu .category:focus .dropdown {
    height:auto;
}
#menu .item a, #menu .category a, #menu .category a:visited, #menu .item a:visited {
    line-height:2em;
    display:block;
    padding:.6em;
    border-top: #ffffff 2px solid;
}
#menu .item a:hover, #menu .category a:hover, #menu .item a:focus, #menu .category a:focus {
    background:#007dac;
    -webkit-transition: background-color 940ms;
    -moz-transition: background-color 940ms;
}
#menu a.selected {
    color: #ffffff;
    background-color: #007dac;
}

Upvotes: 0

misterManSam
misterManSam

Reputation: 24692

  • Simplify your selectors (nav ul ul) is fine

  • Make the parent li's position: relative so that the position: absolute dropdowns are positioned in relation to them. Use an appropriate top value

  • In your example, visibility: visible is not doing anything. display: none and display: block are used to hide / show

  • Nest your lists properly. This is the correct way:

<ul>
    <li>Top Menu Item
        <ul>
            <li>Sub-menu Item</li>
        </ul>
    </li>
</ul>

Read more: Nested lists on w3.org

CSS / HTML / Demo

* {
  margin: 0;
  padding: 0;
}
nav ul {
  list-style: none;
  padding: 0;
}
nav ul li {
  padding: 20px;
  float: left;
  background-color: #fff;
  position: relative;
}
nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
}
nav ul ul li {
  width: 200px;
  background: #FFF;
  padding: 10px;
}
nav ul li:hover ul {
  color: #4169E1;
  display: block;
}
body {
  background: black;
}
<nav>
  <ul>
    <li>Home</li>
    <li>About Us
      <ul>
        <li>This is us!</li>
        <li>This is us!</li>
        <li>This is us!</li>
        <li>This is us!</li>
      </ul>
    </li>
    <li>Secure
      <ul>
        <li>How secure are we?</li>
        <li>We are not secure enough!!</li>
      </ul>
    </li>
    <li>Mad</li>
  </ul>
</nav>

Upvotes: 1

Ruchan
Ruchan

Reputation: 3194

To Point out one of the Mistakes you have

   <ul>
        <li>Home</li>
        <li>About Us</li>
        <li>Secure
           <ul> **--> this should be inside li** 
                <li>How secure are we?</li>
                <li>We are not secure enough!!</li>
            </ul>
        </li>

        <li>Mad</li>
    </ul>

and your css

add this 

nav > ul > li:hover > ul{
  display: block;
  opacity: 1;
  visibility: visible;
}

check the fiddle http://jsfiddle.net/ruchan/4fk6y2wu/

Upvotes: 0

Related Questions