2014-02-02 4 views
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 Мог вы поможете? Очень ценится.

ответ

0
  • меню дисплея по горизонтали (главная о росте бизнеса должны быть на одной горизонтальной линии)

добавить это в CSS

nav,nav ul{ 
    display:inline-block; 
} 
  • стрелка форма пункт главного меню

я предполагаю, что вы хотите на hover

ul li > a:hover{ 
    display:block; 
    background:#fff url(images/arrow.png) no-repeat center bottom; 
    } 
  • разрыв между основными пунктами меню и подпунктам

добавить это в CSS

ul.sub-menu{ 
    margin-top:10px; /* or whatever suits your layout*/ 
} 
Смежные вопросы