0
У меня есть панель навигации с 5 элементами. два из них имеют дополнительное раскрывающееся меню, которое должно отображаться при наведении мыши. Проблема заключается в том, что я делаю, когда наведение мыши покрывает заголовок выпадающего меню и цвет шрифта, который должен быть белым в зеленом фоне.CSS dropdown menue Навигационная панель
здесь являются HTML и CSS я реализовал:
.nav {
list-style: none;
margin: 0;
padding: 0;
position: relative;
text-align: left; /* change to "center" or "right" to align differently */
border-bottom: 10px solid green; /* bottom border */
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #d8d8d8 100%);
background: -webkit-gradient(linear, left top, left bottom, color- stop(0%,#ffffff), color-stop(100%,#d8d8d8));
background: -webkit-linear-gradient(top, #ffffff 0%,#d8d8d8 100%);
background: -o-linear-gradient(top, #ffffff 0%,#d8d8d8 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#d8d8d8 100%);
background: linear-gradient(to bottom, #ffffff 0%,#d8d8d8 100%);
}
.nav ul li{
display: inline-block;vertical-align:top;
}
.nav ul a{
position: relative;
display: inline-block;
overflow: hidden;
color: black; /* font color */
text-decoration: none;
padding: 8px 20px;
font-size: 14px; /* font size */
font-weight: bold;
vertical-align: bottom;
-webkit-transition: color 0.5s; /* transition property and duration */
-moz-transition: color 0.5s;
transition: color 0.5s;
}
ul .nav a::before{
content: '';
color: white;
display: block;
position: absolute;
width: 100%;
height: 100%;
background: green; /* tab background */
left: 0;
top: 110%; /* extra 10% is to account for shadow dimension */
box-shadow: -2px 2px 10px rgba(255,255,255,.5) inset;
border-radius: 15px 15px 0 0/12px 12px;
-webkit-transition: top 0.5s; /* transition property and duration */
-moz-transition: top 0.5s;
transition: top 0.5s;
}
ul .nav a:hover{
color: white;
}
ul .nav a:hover::before{
top: 0; /* slide tab up */
}
.nav li ul {
position: absolute;
display: none;;
width: inherit;
margin:0px;
text-align:center;
}
ul li ul li a {
text-align:center;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}<div class="nav">
<ul calss="main_ul">
<li><a href="#">Home</a></li>
<li><a href="#">HTML</a>
<ul>
<li><a href="#">choice 1</a></li>
<li><a href="#">choice 2</a></li>
<li><a href="#">choice 3</a></li>
</ul>
</li>
<li><a class="active" href="#">CSS</a></li>
<li><a href="#">Javascript</a>
<ul>
<li><a href="#">choice 1</a></li>
<li><a href="#">choice 2</a></li>
<li><a href="#">choice 3</a></li>
</ul>
</li>
<li><a href="#">jQuery</a></li>
</ul>
</div>,
также отрегулируйте ширину для выпадающего меню с его выпадающим титром здесь есть демонстрация https://jsfiddle.net/38q2d3aw/ –
Я действительно пытался понять ваш текст, но я не могу. Я не понимаю, что вы хотите сказать с этим: «Проблема заключается в том, что я делаю, когда наведение мыши покрывает титру раскрывающегося меню, а цвет шрифта должен быть белым на зеленом фоне». –
Извините за непонятный английский не мой родной язык, я делаю зеленый цвет фона, когда появляется курсор мыши на «.main_ul», этот фон скрывает шрифт «.main_ul» - там код в css part под ul .nav a :: before {content = ""} Я не знаю, что мне делать внутри кавычек. –