Prośba o poprawienie menu w CCSie

Question

Witam.

Mam problem ze zrobieniem menu. Aktualnie jest tak:
http://wklej.org/id/3118517/ - HTML
http://wklej.org/id/3118518/ - CSS

Skopiujcie kod i zobaczcie jak to wygląda.
Po pierwsze: chciałbym, żeby menu było na wysokości nav.
Po drugie: fajnie by było, żeby tekst był wyśrodkowany w pionie
Po trzecie: po najechaniu na rozwijane menu połowa przycisku jest ucięta.

Mógłby ktoś poprawić kod ewentualnie naprowadzić mnie gdzie coś zmienić?
Jeśli zły dział to przepraszam

Comments

Zły dział, to powinno być: HTML i CSS. Tytuł również posiada błąd.

---

Racja, wybaczcie

Answer 1

dla nav usuń height, wklej ten cały patent na fiddle, będzie łatwiej

Answer 2

Witam. Trochę niepotrzebnego kodu :)

body {
    margin: 0;
    padding: 0;
}

nav {
    height: 80px;
    width: 100%;
    background-color: aquamarine;
    margin: 0;
    padding: 0;
}

/*#mainmenu{
    display: block;
    
}*/

ul {
    list-style: none;
    margin: 0;/*dodaj*/
    padding: 0;/*dodaj*/
    /*float: left;*/
  
}

ul > li {
  
    margin: 0;
    padding: 0;
    float: left;
    /*position: relative;
     height: 5em;*/
    height: 80px;/*dodaj*/
    background-color: gray;
}

ul > li > a {
    /*padding: 50px;*/
    color: #fff;
    display: block;/*dodaj*/
    height: 80px;/*dodaj*/
    width: 200px;/*dodaj*/
    line-height: 80px;/*dodaj*/
    text-align: center;/*dodaj*/
    text-decoration: none;
    
}

ul > li > a:hover,
ul > li:hover > a {
    color: #fff;
    background-color: #0A131C;
    text-decoration: underline;
}

ul > li ul {
    /*padding: 0;
    position: absolute;
    visibility: hidden;
    left: 0px;
    top: 30px;
    text-align: left;
    border: 1px solid #ccc;*/
    width: 200px;
    background-color: #fcfcfc;
    transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform-origin: 50% 0;
    -webkit-transform-origin: 50% 0;
    transition: 200ms;
}

ul li:hover > ul {
    visibility: visible;
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
}

/*ul > li ul ul {
    left: 200px;
    top: -1px;
    
}
ul > li ul li {
    margin: 0;
    padding: 0;
    position: relative;
    float: none;
    height: auto;
}*/

ul > li ul li a {
    /*padding: 10px 20px;*/
    color: #505050;
    text-decoration: none;
    display: block;
}

ul > li ul li a:hover,
ul > li ul li:hover > a {
    text-decoration: none;
    color: #fff;
    background-color: #0A131C;
}