Verkkokauppa

HTML

<header>
            <h1><img src="http://ronjao.github.io/Saavutettavuus/kuvat/logo.png" class="ylakuva" alt="Verkkokauppa" /></h1>
        </header>
        
        <nav class="linkkilista" role="menubar">
            <a href="#">Etusivu</a>
            <a href="#">Ostoskori</a>
            <a href="#">Käyttäjätiedot</a>

            <div class="kotimenu">
                <a href="#" class="kotimenulinkki">Kodin tarvikkeet</a>
                <div class="kotimenu-sisalto" id="kotimenu-sisalto">
                    <a href="#">Astiat</a>
                    <a href="#">Sisustustavarat</a>
                    <a href="#">Valaisimet</a>
                </div>
            </div>

            <div class="matkailumenu">
                <a href="#">Matkailu</a>
                <div class="matkailumenu-sisalto">
                    <a href="#">Matkalaukut</a>
                    <a href="#">Teltat</a>
                </div>
            </div>
            
            <div class="harrastusmenu">
                <a href="#">Harrastukset</a>
                <div class="harrastusmenu-sisalto">
                    <a href="#">Veneet</a>
                    <a href="#">Soittimet</a>
                    <a href="#">Taidetarvikkeet</a>
                    <a href="#">Askartelu</a>
                </div>
            </div>
            
            <div class="lastenmenu">
                <a href="#">Lastentarvikkeet</a>
                <div class="lastenmenu-sisalto">
                    <a href="#">Turvaistuimet</a>
                    <a href="#">Lelut</a>
                    <a href="#">Syöttötuolit</a>
                </div>
            </div>
            
            <div class="lemmikkimenu">
                <a href="#">Lemmikit</a>
                <div class="lemmikkimenu-sisalto">
                    <a href="#">Talutushihnat</a>
                    <a href="#">Ruokakupit</a>
                    <a href="#">Koiran lelut</a>
                    <a href="#">Muut</a>
    ...

CSS

body {
  margin: 0 30px;
}

.linkkilista {
  float: right;
  border-left: 1px solid #666;
  padding: 6px;
  display: block;
}

.linkkilista a {
  text-decoration: none;
  color: black;
  display: block;
}

.linkkilista a:hover, .linkkilista a:focus {
  background-color: #EEDDEE;
}

header {
  margin-bottom:-30px;
  margin-top:-30px;
}

header img {
  width: 200px;
  display: block;
  margin: auto;
}

p.hehkutus {
  font-size:1em;
  font-weight: normal;
}

.pankit {
  margin: 5px auto;
  display: table;
}
.pankit img {
  width: 40px;
}

.pankit li {
  display: inline-block;
  margin: 0 5px;
}

table {
  border: none;
  background-color: #EEDDEE;
  margin: 20px;
}

.kotimenu,
.matkailumenu,
.harrastusmenu,
.lastenmenu,
.lemmikkimenu {
  position: relative;
}

.kotimenu-sisalto, 
.matkailumenu-sisalto,
.harrastusmenu-sisalto,
.lastenmenu-sisalto,
.lemmikkimenu-sisalto {
  display: none;
  z-index: 1;
  position: absolute;
  min-width: 160px;
  box-shadow:  0px 8px 16px 0px rgba(0,0,0,0.2);
  border: 1px solid #CCC;
  background-color: #FFFFE0;
  padding: 3px 6px;
  right: 0;
  margin-right: 160px;
}

.kotimenu:hover .kotimenu-sisalto,
.matkailumenu:hover .matkailumenu-sisalto,
.harrastusmenu:hover .harrastusmenu.sisalto,
.lastenmenu:hover .lastenmenu-sisalto,
.lemmikkimenu:hover .lemmikkimenu-sisalto {
  display: block;
}

.kotimenu:hover .kotimenulinkki {
  background-color: #DDEEEE;
}

.show {
  display: block;
}