Я пытаюсь создать многоуровневое меню с помощью css. Моя проблема, как вы можете видеть, заключается в том, что когда я перехожу на 3-й UL, второй UL теряет свой стиль (белый цвет шрифта). Что мне не хватает в моем CSS, чтобы сохранить второй UL в белом шрифте с голубым BG, как я сделал с верхним UL?
http://codepen.io/anon/pen/xhKrC
благодаря
<nav id="menu">
<ul>
<li><a>Users</a></li>
<li>
<a>Applications</a>
<ul>
<li>
<a>Application 1</a>
<ul>
<li><a>Users</a></li>
<li><a>Roles</a></li>
<li><a>Groups</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
nav {
float: left;
background: #142c56;
color: #ffffff;
height: 45px;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
position: relative;
display: inline-block;
list-style: none;
white-space: nowrap;
margin-left: 20px;
box-sizing: content-box;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #425677;
color: #ffffff;
}
nav ul li a {
display: block;
padding: 14px 33px;
margin-top: 1px;
cursor: pointer;
text-decoration: none;
}
nav ul ul {
background: #ffffff;
position: absolute;
top: 100%;
margin-left: 0px;
display: none;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #425677;
margin-top: 0px;
}
nav ul ul li a:hover {
background: #425677;
color: #ffffff;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
Вы можете просто изменить строку 75 в CSS этого Pen для nav ul li:hover > a
- Ссылка переопределяет цвет текста, поэтому вам нужно переопределить это правило.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
font-family: "Segoe UI", Segoe, Tahoma, Verdana, Helvetica, Sans-Serif
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
nav {
float: left;
background: #142c56;
color: #ffffff;
height: 45px;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
position: relative;
display: inline-block;
list-style: none;
white-space: nowrap;
margin-left: 20px;
box-sizing: content-box;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #425677;
color: #ffffff;
}
nav ul li a {
display: block;
padding: 14px 33px;
margin-top: 1px;
cursor: pointer;
text-decoration: none;
}
nav ul ul {
background: #ffffff;
position: absolute;
top: 100%;
margin-left: 0px;
display: none;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
margin-top: 0px;
}
nav ul ul li a:hover {
background: #ff2800;
color: #ffffff;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
попробуйте этот код :)