Css

Klimat Robot Nevroni Zmenek Predstavitev Motor Izdelki

Osnove Napredno

Osnove Tekst Grafika Napredno

Osnove Json Podatki Napredno

Osnove Jedro Podatki Bool Programi Uvoz Napredno

Osnove Tcp Programi Uvoz Napredno

PhpMyAdmin Dokumenti Sistem Crontab Nadgradi

CSS Napredno Nov zavihek

<html>
  <head>
    <title>Vaja 12</title>
    <style>
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

.meni {
  overflow: hidden;
  background-color: #333;
}

.meni a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.podmeni {
  float: left;
  overflow: hidden;
}

.podmeni .podmenigumb {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.meni a:hover, .podmeni:hover .podmenigumb {
  background-color: red;
}

.podmenivsebina {
  display: none;
  position: absolute;
  left: 0;
  background-color: red;
  width: 100%;
  z-index: 1;
}

.podmenivsebina a {
  float: left;
  color: white;
  text-decoration: none;
}

.podmenivsebina a:hover {
  background-color: #eee;
  color: black;
}

.podmeni:hover .podmenivsebina {
  display: block;
}
    </style>
  </head>
  <body  bgcolor="#ffffff"><center>
  <div class="meni">
    <a href="#domov">Domov</a>
    <div class="podmeni">
      <button class="podmenigumb">Storitve</button>
      <div class="podmenivsebina">
        <a href="#narocilo">Naročilo</a>
        <a href="#dostava">Dostava</a>
        <a href="#pakiranje">Pakiranje</a>
        <a href="#pohvale">Pohvale</a>
      </div>
    </div>
    <div class="podmeni">
      <button class="podmenigumb">Partnerji</button>
      <div class="podmenivsebina">
        <a href="#stran1">Stran 1</a>
        <a href="#stran2">Stran 2</a>
        <a href="#stran3">Stran 3</a>
        <a href="#stran4">Stran 4</a>
      </div>
    </div>
    <a href="#kontakt">Kontakt</a>
  </div>

<div style="padding:0 16px">
    <h3>Spustni meni v navigacijski vrstici</h3>
    <p>Premaknite miško nad povezavo »storitve« ali »partnerji«, če si želite ogledati podnavigacijski meni.</p>
  </div>
  </body>
</html>