Стильное горизонтальное меню на CSS3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
#crumbs { text-align: center; } #crumbs ul { list-style: none; display: inline-table; } #crumbs ul li { display: inline; } #crumbs ul li a { display: block; float: left; height: 50px; background: #F3F5FA; text-align: center; padding: 30px 20px 0 60px; position: relative; margin: 0 10px 0 0; font-size: 20px; text-decoration: none; color: #8093A7; } #crumbs ul li a:after { content: ""; border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 40px solid #F3F5FA; position: absolute; right: -40px; top: 0; z-index: 1; } #crumbs ul li a:before { content: ""; border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 40px solid #fff; position: absolute; left: 0; top: 0; } #crumbs ul li:first-child a { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } #crumbs ul li:first-child a:before { display: none; } #crumbs ul li:last-child a { padding-right: 40px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } #crumbs ul li:last-child a:after { display: none; } #crumbs ul li a:hover { background: #357DFD; color: #fff; } #crumbs ul li a:hover:after { border-left-color: #357DFD; color: #fff; } |
|
1 2 3 4 5 6 7 8 |
<div id="crumbs"> <ul> <li><a href="#1">На главную</a></li> <li><a href="#2">Магазин</a></li> <li><a href="#3">Корзина</a></li> <li><a href="#4">Оплата</a></li> </ul> </div> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
