CSS Hover property

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?

I somehow have a feeling you could solve this by doing the following in your browser: F6 -> type "CSS dropdown menu" -> ENTER — Jonathan
– Jonathan, Commented Apr 19, 2014 at 12:24
I agree you should search for answers on the Internet before asking — Jacques Koekemoer
– Jacques Koekemoer, Commented Apr 19, 2014 at 12:34

Petroff · Accepted Answer · 2014-04-19 12:45:39Z

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.

Banana · Accepted Answer · 2014-04-19 12:46:14Z

1

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

answered Apr 19, 2014 at 12:46

Banana

7,4843 gold badges25 silver badges44 bronze badges

Comments

JCBiggar · Accepted Answer · 2014-04-19 13:31:24Z

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;
}

Collectives™ on Stack Overflow

CSS Hover property

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related