CSS меню с Hover

Я пытаюсь сделать мое меню ссылки #666666, а затем на hover сделать #FFFFFFCSS меню с Hover

я хочу, чтобы эти цвета, чтобы изменить на text colour и top border

#topbar { 
    width:100%; 
    height:80px; 
    background-color:#000000; 
} 
#topbar-inner { 
    width:1000px; 
    margin:0 auto 0 auto; 
} 
#logo { 
    display:inline; 
    float:left; 
    margin-top:20px; 
} 

#menu { 
    display:inline; 
    float:right; 
} 
#menu > ul > li { 
    display:inline-block; 
    border-top:4px solid #666666; 
    margin-right:20px; 
    padding-top:20px; 
    min-width:120px; 
} 
#menu > li { 
    display:inline-block; 
    list-style:none; 
    margin-top:25px; 
    margin-left:auto; 
    margin-right:auto; 
} 
#menu > li:hover { 
    color:#FFFFFF; 
}

источник

2013-06-27 Anonymous

Моя мать всегда говорила мне, что '«хочет»мертв, даже внутри garden' короля (я предполагаю, что это не очень хорошо переводится на английский, но все же ..) –

возможный дубликат [Как изменить цвет ссылки в определенном классе для div CSS] (http://stackoverflow.com/questions/10845517/how-to-change-the-link-color-in-a-specific-class-for-a-div -css) – Nobita

С точки зрения вашего CSS, вероятно, вы должны прочитать эту статью. Это объяснит, почему у вас есть эта проблема: [link] (http://css-tricks.com/child-and-sibling-selectors/) – Andrew

Селекторы должны быть

#menu li a { 
    color: #666; 
    display: block; 
} 
#menu li:hover { 
    border-top-color: #FFF; 
} 
#menu li:hover a { 
    color:#FFFFFF; 
}

#menu не имеет прямых li потомков, так что #menu > li:hover ничего не соответствует.

http://jsfiddle.net/4Xdkn/8/

источник

2013-06-27 10:30:48 dfsq

Ничего себе, так много ответов. Но вы были первыми. Congrats! (Теперь я могу удалить свою обновленную скрипту.) –

Это решение имеет проблему, когда вы наводите курсор на 'li', он меняет цвет и фон, но вы не можете щелкнуть по нему, поскольку тег' a' не установлен на 'display: block', лично я не думаю, что это лучшее решение. –

хороший - спасибо. как я могу сделать цвет текста # 666666, когда он не зависает? –

У Вас есть ошибка в вашем CSS

#menu > li ничего не предназначаться, так как #menu применяется к div и не имеет прямых потомков типа li.

Используйте эти правила

#menu li { 
    display:inline-block; 
    border-top:4px solid #666666; 
    margin-right:20px; 
    padding-top:20px; 
    min-width:120px; 
} 
#menu li:hover, 
#menu li:hover a { 
    color:#FFFFFF; 
} 
#menu li a { 
    color:#666666; 
} 
#menu li:hover { 
    border-color:#FFFFFF; 
}

Demo в http://jsfiddle.net/gaby/4Xdkn/4/

источник

2013-06-27 10:31:42

Updated Fiddle

Вам нужно добавить:

#menu li a { 
    display:block; 
    padding-top:25px; 
    border-top:4px solid #666666; 
} 
#menu 
    li a:hover { 
     border-color:red; 
     color:#fff 
}

На #menu > ul > li удалить border-top и padding, потому что теперь он добавлен в тег a.

На #menu > li удалить margin-top свойство

источник

2013-06-27 10:32:13

Try ниже CSS

 #topbar { 
    width:100%; 
    height:80px; 
    background-color:#000000; 
     } 
     #topbar-inner { 
    width:1000px; 
    margin:0 auto 0 auto; 
     } 
     #logo { 
    display:inline; 
    float:left; 
    margin-top:20px; 
     } 

     #menu { 
    display:inline; 
    float:right; 
      } 
     #menu > ul > li { 
     display:inline-block;  
     margin-right:20px; 
     min-width:120px; 
      } 
     #menu > li { 
     list-style:none; 
     padding:25px 0 0 0; 
     margin-left:auto; 
     margin-right:auto; 
      border-top:1px solid #fff; 
      } 
     #menu ul li a:hover { 
     color:#FFFFFF; 
      } 
     #menu li a {display:block; padding:20px 0 0 0;border-top:4px solid #666666;} 
     #menu li a:hover { border-top:4px solid #fff; color:#fff}

источник

2013-06-27 10:32:23 Pbk1303

попробовать этот

http://jsfiddle.net/4Xdkn/7/

#topbar { 
    width:100%; 
    height:80px; 
    background-color:#000000; 
} 
#topbar-inner { 
    width:1000px; 
    margin:0 auto 0 auto; 
} 
#logo { 
    display:inline; 
    float:left; 
    margin-top:20px; 
} 

#menu { 
    display:inline; 
    float:right; 
} 
#menu > ul > li { 
    display:inline-block; 
    border-top:4px solid #666666; 
    margin-right:20px; 
    padding-top:20px; 
color:#ffffff; 
    min-width:120px; 
} 
#menu > li > a { 
    display:inline-block; 
    list-style:none; 
    margin-top:25px; 
    margin-left:auto; 
    margin-right:auto; 
    text-decoration:none; 
    color:#ffffff; 
    text-decoration:none; 
} 

#menu li:hover { 
    color:#FFFFFF !important; 
    text-decoration:none; 
    border-top:4px solid #ffffff; 
    display:inline-block; 
} 
#menu li a:hover{ 
    color:#ffffff; 
    text-decoration:none; 
} 
}

источник

2013-06-27 10:32:53 falguni

Раскрасить а-элемент вместо литий и сделать элемент a, такой же большой, как li.

#menu li a:hover { 
    color:white; 
    border-style:solid; 
    border-width: 1px 0px 0px 0px; 
    border-color:white; 
}

источник

2013-06-27 10:34:25 5im

CSS меню с Hover

ответ

Смежные вопросы