CSS Hover属性

Question

I am trying to make a CSS dropdown menu but just with CSS to keep it simple, so i have a UL structured nav menu like so:

<div class="navbar">
    <ul>
        <li><a href="source/home.php">Home</a></li>
        <li><a href="challenge">placeholder</a></li>
        <li>PVP</li>
            <ul class="inner">
                <li><a href="source/placeholder.php">placeholder</a></li>
                <li><a href="source/placeholder.php">placeholder</a></li>
                <li><a href="source/placeholder.php">placeholder</a></li>
            </ul>
        <li>PVE</li>
            <ul class="inner">
                <li><a href="source/placeholder.php">placeholder</a></li>
                <li><a href="source/placeholder.php">placeholder</a></li>
                <li><a href="source/placeholder.php">placeholder</a></li>
                <li><a href="source/placeholder.php">placeholder</a></li>
            </ul>
        <li>Other Services</li>
            <ul class="inner">
                <li><a href="source/placeholder.php">placeholder</a></li>
            </ul>
        <li><a href="source/contact.php">placeholder</a></li>
    </ul>
</div>

Now, i have hidden the class "inner" with Display:none. And i want to make it so when a certain parent li is hovered then that relevant inner will appear. hows is the best way i can do this? please let me know guys, or maybe you have a better way of making a dropdown?

Answer 1

Your html is not valid.

Do not close the "li" so early

    <li>PVE</li>
        <ul class="inner">
            <li><a href="source/placeholder.php">placeholder</a></li>
            <li><a href="source/placeholder.php">placeholder</a></li>
            <li><a href="source/placeholder.php">placeholder</a></li>
            <li><a href="source/placeholder.php">placeholder</a></li>
        </ul>

correct html is:

    <li>PVE
        <ul class="inner">
            <li><a href="source/placeholder.php">placeholder</a></li>
            <li><a href="source/placeholder.php">placeholder</a></li>
            <li><a href="source/placeholder.php">placeholder</a></li>
            <li><a href="source/placeholder.php">placeholder</a></li>
        </ul>
    </li>

and the css now:

.navbar li {
    position: relative;
}
.navbar ul.inner {
    display: none;
    position: absolute;
    top: 20px; // edit it
    left: 0px; // edit it
}
.nav li:hover ul.inner {
    display: block;
}

i hope it help.

Answer 2

first of all, you need to put your inner menus inside the li elements so you would be able to align them.

next you would want to set the position of the inners to absolute so it would not mess up the navbar when they drop down.

and then a few cosmetic touches and here is an example: Fiddle

Answer 3

You could go here and create a pure css menu, very quickly and easily: http://cssmenumaker.com/pure-css-menus

DEMO: http://jsfiddle.net/NZ6EF/

HTML

<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Widgets</span></a></li>
         <li><a href='#'><span>Menus</span></a></li>
         <li class='last'><a href='#'><span>Products</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Company</span></a>
      <ul>
         <li><a href='#'><span>About</span></a></li>
         <li class='last'><a href='#'><span>Location</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

CSS

#cssmenu {
  width: auto;
  border: 1px solid #6b6363;
  background: #6b6363;
}
#cssmenu > ul {
  padding: 1px 0;
  margin: 0px;
  list-style: none;
  width: 100%;
  height: 21px;
  border-top: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
  font: normal 8pt verdana, arial, helvetica;
}
#cssmenu > ul li {
  margin: 0;
  padding: 0;
  display: block;
  float: left;
  position: relative;
  width: 148px;
}
#cssmenu > ul li a:link,
#cssmenu > ul li a:visited {
  padding: 4px 0;
  display: block;
  text-align: center;
  text-decoration: none;
  background: #6b6363;
  color: #ffffff;
  width: 148px;
}
#cssmenu > ul li:hover a,
#cssmenu > ul li a:hover,
#cssmenu > ul li a:active {
  padding: 4px 0;
  display: block;
  text-align: center;
  text-decoration: none;
  background: #928989;
  color: #ffffff;
  width: 146px;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
}
#cssmenu > ul li ul {
  margin: 0;
  padding: 1px 1px 0;
  list-style: none;
  display: none;
  background: #ffffff;
  width: 146px;
  position: absolute;
  top: 21px;
  left: -1px;
  border: 1px solid #6b6363;
  border-top: none;
}
#cssmenu > ul li:hover ul {
  display: block;
}
#cssmenu > ul li ul li {
  clear: left;
  width: 146px;
}
#cssmenu > ul li ul li a:link,
#cssmenu > ul li ul li a:visited {
  clear: left;
  background: #6b6363;
  padding: 4px 0;
  width: 146px;
  border: none;
  border-bottom: 1px solid #ffffff;
  position: relative;
  z-index: 1000;
}
#cssmenu > ul li ul li:hover a,
#cssmenu > ul li ul li a:active,
#cssmenu > ul li ul li a:hover {
  clear: left;
  background: #928989;
  padding: 4px 0;
  width: 146px;
  border: none;
  border-bottom: 1px solid #ffffff;
  position: relative;
  z-index: 1000;
}
#cssmenu > ul li ul li ul.navigation-3 {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  left: 145px;
  top: -2px;
  padding: 1px 1px 0 1px;
  border: 1px solid #6b6363;
  border-left: 1px solid #6b6363;
  background: #ffffff;
  z-index: 900;
}
#cssmenu > ul li ul li:hover ul.navigation-3 {
  display: block;
}
#cssmenu > ul li ul li ul.navigation-3 li a:link,
#cssmenu > ul li ul li ul.navigation-3 li a:visited {
  background: #6b6363;
}