Autor Zpráva
robbie
Profil *
Zdravím a chci se optat, v responsivním menu, po najetí myši :hover nad první položku menu nejsem schopen docílit, aby se červené zvýraznění položky menu zobrazilo hned od zvrchu menu, zustavá me tam nevzhledný kousek y vrchu bloku a nevím, jak se toho zbavit. Přikládám kod menu:
Jestli někdo poradí budu jenom rád, zkoušel jsem menit margin, padding, ale nedaří se mi červený hover efekt zarovnat k vršku bloku menu. Děkuji

html:
<html>
<head>
<style>
/* normal css */

#head{height:70px;
    background-color:#CCCCFF;
    margin-bottom:3px;
    border-radius:5px;
    }

#head ul{margin: 0 auto;
         }
        
#head ul li {display: inline;
            float:left;
            list-style:none;
            width: 50px;
            margin:20px 15px;
            }
            
#head ul li a{color:white;
                     text-decoration:none;}
            
#head ul li:hover a{color:#CC3333;}

/*responsive css menu */

#
#head{height:160px;
    background-color:#CCCCFF;
    margin:0px auto 2px auto;
    border-radius:5px;
    }

#head ul li {text-align:center;
                  display:block;
            float:left;
            list-style:none;
            width: 100%;
            margin:5px 0px;
            height:22px;
            }
            
#head ul:last-child li{margin-bottom:0px;}

#head ul li a{text-align:center;
                    }
            
            

                 
#head ul li:hover a{color:white;
                              margin:3px auto;}
                 
#head ul li a:hover{background-color:#CC3333;
                              color:white;
                    height:30px;
                    display:block;
                    margin:0px auto;
                    padding:2px auto;


</style>
</head>
<body>
<div id="head">
        <ul>
          <li id="first"><a href="#">Service</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Prizes</a></li>
          <li><a href="#">Help</a></li>
          <li><a href="#">Map</a></li>
        </ul>
        
      </div>
</body>
</html>
Trejpa
Profil
robbie:
Může za to margin na položkách:
#head ul li { margin:5px 0px; }

Doporučil bych chování změnit:
1) nastavit odkazům display: block rovnou bez :hoveru,
2) nastavit jim výšku a svislý padding nebo line-height
3) položky seznamu maximálně přetypovat na blok bez odrážek, paddingu, marginu a zadané výšky
4) v responzivní verzi zrušit plavání položek seznamu a s tím i výšku seznamu, která se bude přizpůsobovat položkám
juriad
Profil
Teda ty jsi umělec. Polovina toho, co jsi napsal, nedává smysl. Řešil bych to asi takto:
Živá ukázka

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: