Etiket: Vertical Menu

Dikey Menü Mouse Efekti

HTML
69 lines
<!doctype html>
<html>
<head>
  <meta charset='utf-8'>
  <style>
body{padding: 0;margin: 0;border: 0;line-height: 1;}
ul,li{list-style: none;margin: 0;padding: 0;}
a{
  display: block;
  text-decoration: none;
  font-family: Arial,Tahoma,verdana, sans-serif;
  padding: 15px;
  color: #ffffff;
  font-size:12px;
  background: #333333;
  transition: all 0.3s ease;
}
#menu {
  position: relative;
  float: left;
}
#menu li {
  float: none;
  min-height: 1px;
  line-height: 1em;
  vertical-align: middle;
  position: relative;
}
#menu li.hover,#menu li:hover {
  position: relative;
  cursor: default;
}
#menu li a {/*ana menü*/
  color: #ffffff;
}
#menu li a:hover,#menu li:hover a,#menu li:hover ul {/*ana hover tüm arka plan*/
  background: #111133;
  visibility: visible;
}
#menu ul {
  visibility: hidden;
  position: absolute;
  width: 100%;
  top: 0px;
  left: 99%;
}
#menu ul li:hover a {/*alt menü hover*/
  background: #555f5f;
  color: #ffffff;
}
</style>
</head>
<body>
    <ul id='menu'>
      <li><a href='#'><span>Menü1</span></a>
          <ul>
             <li ><a href='#'><span>A1</span></a></li>
             <li ><a href='#'><span>A2</span></a></li>
          </ul>
       </li>
       <li><a href='#'><span>Menü2</span></a>
          <ul>
             <li ><a href='#'><span>B1</span></a></li>
             <li ><a href='#'><span>B2</span></a></li>
          </ul>
       </li>
    </ul>
</body>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX