0
Я пытаюсь стиль моих выпадающего меню, так что это будет выглядеть как на картинке: [выпадающее меню] ()CSS стайлинг выпадающего меню
До сих пор я получил это:
`<nav>
<ul id="home">
<li><a href="#">HOME</a></li>
</ul>
<ul id="about">
<li><a href="#">ABOUT</a></li>
</ul>
<ul id="business">
<li><a href="#">BUSINESS GROWTH</a>
<ul class="sub-menu">
<li><a href="#">BUSINESS GROWTH </a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">FEES & SCHEDULING</a></li>
<li><a href="#">QUESTIONNAIRE</a></li>
</ul>
</li>
</ul>
`
#business,
#home,
#about
{
list-style-type: none;
}
#business li{
position:relative;
background-color: #004473;
display:inline-block;
width: 180px;
}
#business li a {
color: #fff;
text-decoration: none;
display:inline-block;
}
#business li ul {
position: absolute;
left: -9999px;
background-color: grey;
margin:0;
padding:0;
list-style-type: none;
width: auto;
}
#business li:hover ul {
left: 0px;
display:inline-block;
}
#business li ul li {
background-color: #004473;
width: 180px;
display:inline-block;
margin:0;
padding:0;
}
#business li ul li a {
color:#fff;
text-decoration: none;
font-style: italic;
}
#business li ul li a:hover {
text-decoration:underline;
}
основные вопросы:
-
меню
- дисплея по горизонтали (главный о росте бизнеса должен быть на одной горизонтальной линии)
- стрелки формы главного меню
- разрыв между основными пунктами меню и подпунктам
http://codepen.io/anon/pen/oDzbH Мог вы поможете? Очень ценится.