Menu Rollover-Effekt

cester

Bin gerade dabei ein Template umzubauen und möchte nun einen Rollover-Effekt im Menü einbinden:

akgez Augenlaser & Beauty Travels (Bitte nach unten scrollen, da ist ein Menü mit orangen Hintergrund)

Ich möchte nun, dass wenn man mit der Maus auf "Home" geht, dass der graue Kasten nicht nur um "Home" sichtbar wird, sondern das Ganze Feld ausfüllt.

Mir würde es auch reichen, wenn ich wüsste, was ich in der CSS ändern muss, dass beim Rollover des Feldes "Home" der Hintergrund sich verändert.

Die dazugehörige CSS zu diesem Feld sieht so aus:

Code

#navi1
{
 position: relative;
 background: #46461F url(images/navibg.jpg) repeat-x;
 height: 34px;
         text-align: center; 
         float: left;
         width: 149px;
 padding: 0 0px 0 0px;
 margin: 300px 0 20px 0;
 font-family:Tahoma, Georgia, Arial, Verdana, Serif;
 text-transform:uppercase;
}
#navi1 ul
{
 margin:0;
 padding:0;
}
#navi1 ul li
{
 display: inline;
 line-height: 40px;
 padding-left: 3px;
 margin:0 10px 0 0;
}
#navi1 ul li a
{
 background-color: transparent;
 background-repeat: repeat-x;
 font-size: 12px;
 color: #fff;
 font-weight: bold;
 border-bottom:none;
}
#navi1 ul li a:hover, #navi1 ul li.current_page_item a
{
 background: #fff url(images/a18.gif) 100% repeat-x top;
 color: #4A4A24;
 text-decoration: none;
}

Alles anzeigen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

cester

Das mit dem Rollover habe ich jetzt hinbekommen...

Jetzt wird das aber im IE und Firefox anders dargestellt (im Firefox erscheint ein weißer Rand unter dem Button)

Wie bekomme ich das weg?

Zu sehen unter:
http://www.akgez.de/site

flolay

Hi!

Hier mal nur was kleines aus meiner Wühlkiste:

Code

.navirahmen {
    margin: 0;
    padding: 0;
    height: 33px;
    background: url(images/navi.gif) repeat-x;
}


.navi {
    margin: 0 auto;
    width: 950px;
}


.navi ul {
    margin: 0;
    padding: 0;
    list-style: none;
}


.navi li {
    margin: 0;
    padding: 0;
    display:inline;
}


.navi li a:link, .navi a:visited {
    display: block;
    height: 19px;
    padding: 8px 10px 6px 10px;;
    background: url(images/navi-normal.gif) right 0 no-repeat;
    float: left;
    color: #fff;
    font-size: 12px;
}


.navi li a:hover {
    background: url(images/navi-hover.gif) right 0 no-repeat;
}

Alles anzeigen

So würde ich die style.css für ein horizontales Menü aufbauen.

Der HTML-Bereich sieht dann so aus:

Code

<div class="navirahmen">
    <div class="navi">
<ul><li><a href="test.html" >Über uns</a></li></ul>
<ul><li><a href="test.html" >Test</a></li></ul>
.
.
.
</div>

Ist aber wirklich nur aus meiner Wühlkiste, aber normalerweise klappt das so.

Gruß
Flo

bgeissler

Du hast den hover auf position top gesetzt. Setze auf middle.

Zitat

#navi3 ul li a:hover, #navi3 ul li.current_page_item a {
background:#FFFFFF url(images/navibgover.jpg) repeat-x middle;
color:#333333;
text-decoration:none;
}

Warum setzt du für jeden Navibutton ein eigene Beschreibung ?

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Menu Rollover-Effekt

Jetzt mitmachen!