Question

I’m trying to make a horizontal menu layout in CSS. I was using the guide listed here:
http://www.devinrolsen.com/pure-css-horizontal-menu/

I’ve got a css file looking like this, called navigation.css:

.navigation{
  width:100%;
  height:30px;
  background-color:lightgray;
}
.navigation ul {
  margin:0px;
  padding:0px;
}
.navigation ul li {
  display:inline;
  height:30px;
  float:left;
  list-style:none;
  margin-left:15px;
}
.navigation li a {
  color:black;
  text-decoration:none;
}
.navigation li a:hover {
  color:black;
  text-decoration:underline;
}
.navigation li ul {
  margin:0px;
  padding:0px;
  display:none;
}
.navigation li:hover ul {
  display:block;
  width:160px;
}
.navigation li li{
  list-style:none;
  display:block;
}

and in my actual php page, I have this

<div class="navigation">
  <ul>
    <li>
    <a href="#">something</a>
      <ul>
        <li><a href="./hello.php">Hello</a></li>
        <li><a href="./hello2.php">hello2</a></li>
      </ul>
    </li>
    <li>
    <a href="#">Browse database</a>
      <ul>
        <li><a href="./test.php">test</a></li>
        <li><a href="./test2.php">Test2</a></li>
        <li><a href="./search.php">Search</a></li>
      </ul>
    </li>
  </ul>
</div>

For reasons I cannot determine, their is no drop-down menu effect. Consequently, if I change navigation to an id instead of a class by replacing .navigation with #navigation, then none of the layout affects the HTML.

Answer 1

In case you’re still having the problem, have you tried changing:

.navigation li li{
  list-style:none;
  display:block;
}

To:

.navigation li li{
  list-style:none;
  display:none;
}
.navigation li:hover li{
  display:block;
}