изменение цвета текста элементов LI

У меня есть CSS-меню, в котором у меня была некоторая помощь в сортировке, он почти работает, как мне хотелось бы.изменение цвета текста элементов LI

я просто хочу, чтобы иметь возможность изменить цвет текста на LI парить, а также подменю, кажется, отображая еще правее, когда он должен быть непосредственно под

CSS:

.menu-my-integra-container { 
    border:1px solid black; 
    display:block; 
    float:left; 
} 
#menu-my-integra, ul.sub-menu { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
#menu-my-integra > li { 
    float:left;  
    display: block; 
    margin-right:0px; 
    position:relative; 
    background:#F36F25; 
    padding:8px; 
    color:#FFFFFF; 
    text-decoration:none; 
} 

#menu-my-integra > li:hover { 
    background:#FFFFFF; 
    color:#F36F25; 
} 

ul.sub-menu { 
    display:none; 
    width:200px; 
    position:absolute; 
    z-index:1; 
} 
#menu-my-integra li:hover ul.sub-menu { 
    display: block; 
    max-height: 200px; 
    background:#F36F25; 
} 
ul.sub-menu li { 
    color:#FFFFFF; 
    float:none; 
    padding:5px; 
} 

ul.sub-menu li:hover { 
    color:#F36F25; 
    background:#FFFFFF; 
    float:none; 
    padding:5px; 
}

http://jsfiddle.net/c2u21366/

источник

2015-11-11 charlie

Это изменит цвет текстов к родителям:

#menu-my-integra li > a { 
    color: inherit; 
}

Добавьте left: 0; в ul.sub-menu, чтобы выровнять ваше подменю влево.

ul.sub-menu { 
    left: 0; 
}

источник

2015-11-11 08:44:58 AlexG

отличное - ive отсортировано по выравниванию подменю. Спасибо. я хочу, чтобы меню имело белый текст и наводило изменения фона на белый, а текст менялся на oragne и тот же для подменю, как я могу это сделать, а также сохранять цвета родительского элемента при наведении указателя на подменю – charlie

ive обновил мой ответ, удалив '>', вы должны унаследовать все нужные цвета, просто не добавляйте его в свой css, и он должен работать. – AlexG

Атрибут цвета должен указывать на тег привязки, а не на тег списка. Выбор цвета переписывается стандартом браузера по умолчанию. Вам нужен более прямой стиль. Следующий CSS окрасит ваш список, как

.menu-item a{ 
    color:#FFFFFF; 
} 
.menu-item a:hover { 
    color:#F36F25; 
}

источник

2015-11-11 08:47:42

CSS файл

<body class="news"> 
 
    <header> 
 
    <div class="nav"> 
 
     <ul> 
 
     <li class="home"><a href="#">Home</a></li> 
 
     <li class="tutorials"><a href="#">Tutorials</a> 
 
      <ul> 
 
      <li><a href="#">Tutorial #[email protected]@</a></li> 
 
      <li><a href="#">Tutorial #2</a></li> 
 
      <li><a href="#">Tutorial #3</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="about"><a class="active" href="#">About</a></li> 
 
     <li class="news"><a href="#">Newsletter</a> 
 
      <ul> 
 
      <li><a href="#">News #1</a></li> 
 
      <li><a href="#">News #[email protected]@@</a></li> 
 
      <li><a href="#">News #3</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="contact"><a href="#">Contact</a></li> 
 
     </ul> 
 
    </div> 
 
    </header> 
 
</body>

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background: #ccc; 
 
} 
 

 
.nav ul { 
 
    list-style: none; 
 
    background-color: #444; 
 
    text-align: center; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.nav li { 
 
    font-family: 'Oswald', sans-serif; 
 
    font-size: 1.2em; 
 
    line-height: 40px; 
 
    text-align: left; 
 
} 
 

 
.nav a { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    display: block; 
 
    padding-left: 15px; 
 
    border-bottom: 1px solid #888; 
 
    transition: .3s background-color; 
 
} 
 

 
.nav a:hover { 
 
    background-color: #005f5f; 
 
} 
 

 
.nav a.active { 
 
    background-color: #aaa; 
 
    color: #444; 
 
    cursor: default; 
 
} 
 

 
/* Sub Menus */ 
 
.nav li li { 
 
    font-size: .8em; 
 
} 
 

 
/******************************************* 
 
    Style menu for larger screens 
 

 
    Using 650px (130px each * 5 items), but ems 
 
    or other values could be used depending on other factors 
 
********************************************/ 
 

 
@media screen and (min-width: 650px) { 
 
    .nav li { 
 
    width: 130px; 
 
    border-bottom: none; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    font-size: 1.4em; 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
    } 
 

 
    .nav a { 
 
    border-bottom: none; 
 
    } 
 

 
    .nav > ul > li { 
 
    text-align: center; 
 
    } 
 

 
    .nav > ul > li > a { 
 
    padding-left: 0; 
 
    } 
 

 
    /* Sub Menus */ 
 
    .nav li ul { 
 
    position: absolute; 
 
    display: none; 
 
    width: inherit; 
 
    } 
 

 
    .nav li:hover ul { 
 
    display: block; 
 
    } 
 

 
    .nav li ul li { 
 
    display: block; 
 
    } 
 
}

источник

2015-11-11 08:50:34 Thusithz

предпочитает этот файл, вы можете получить идею – Thusithz

Ваше подменю не правильно расположен. Вам не хватает left: 0;. Это должно зафиксировать позиционирование.

ul.sub-menu { 
    display: none; 
    width: 200px; 
    position: absolute; 
    z-index: 1; 
    left: 0; 
}

В отношении парить Color

a:hover { 
    color: #000 !important; 
}

Ofcourse Я использовал важно! Потому что я не понимаю, какой цвет вы на самом деле хотите изменить.

источник

2015-11-11 08:51:03 Paran0a

изменение цвета текста элементов LI

ответ

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