Proste menu z rollover

Rollover uzyskujemy poprzez konwersję listy w blok przy użyciu display: block i zmianę koloru tła przy a:hover.

Kod HTML

Kod CSS

#navicontainer {
  margin-left: 30px;
}

#navicontainer ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-family: verdana, arial, Helvetica, sans-serif;
}

#navicontainer li {
  margin: 0 0 1px 0;
}

#navicontainer a {
  display: block;
  padding: 5px 10px;
  width: 140px;
  color: #fff;
  background-color: #036;
  text-decoration: none;
}

#navicontainer a:hover {
  color: #fff;
  background-color: #69C;
  text-decoration: none;
}

#navicontainer ul ul li {
  margin: 0 0 1px 0;
}

#navicontainer ul ul a {
  display: block;
  padding: 5px 5px 5px 30px;
  width: 125px;
  color: #fff;
  background-color: #369;
  text-decoration: none;
}

#navicontainer ul ul a:hover {
  color: #fff;
  background-color: #69C;
  text-decoration: none;
}

Efektem powyższego kodu jest proste menu z efektem rollover dla elementów menu i podmenu.

Szybkie menu