Hidden (не могу победить)

#1 26 мая 2015 в 18:06
Есть вот такой код

  1.  
  2. <div class="row">
  3. <div class="col-3">
  4. <div id="logo"><a href="<?php echo href_to_home(); ?>"></a></div>
  5. </div>
  6. <div class="col-9">
  7. <?php if($this->hasWidgetsOn('header')) { ?>
  8. <nav>
  9. <?php $this->widgets('header', false, 'wrapper_plain'); ?>
  10. </nav>
  11. <?php } ?>
  12. </div>
  13. </div>
  14.  
в нем у <div class="row"> свойство overflow: hidden; из-за этого не видно выпадающие пункты меню. как не бьюсь не могу победить. Подскажите пожалуйста как победить с минимальными потерями?
#2 26 мая 2015 в 18:30
Так Вы в стилях к самому классу col-9 нарисуйте импотента (!important).
Импотент побеждает все приоритеты.
#3 26 мая 2015 в 18:42


Так Вы в стилях к самому классу col-9 нарисуйте импотента (!important).
Импотент побеждает все приоритеты.

HiAndy

  1.  
  2. .row {
  3. margin: 0 auto;
  4. overflow: hidden;
  5. width: 96%;
  6. padding:0 2%;
  7. }
  8.  
  9. .row-in {
  10. margin: 0;
  11. overflow: hidden;
  12. width: 100%;
  13. padding:0;
  14. }
  15. .row > div:last-child,.row-in > div:last-child {
  16. margin-right: 0
  17. }
  18. .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11 {
  19. float: left;
  20. margin-right: 2%;
  21. min-height: 1px;
  22. }
  23. .col-1 {
  24. width: 6.5%;
  25. }
  26. .col-2 {
  27. width: 15%;
  28. }
  29. .col-3 {
  30. width: 23.5%;
  31. }
  32. .col-4 {
  33. width: 32%;
  34. }
  35. .col-5 {
  36. width: 40.5%;
  37. }
  38. .col-6 {
  39. width: 49%;
  40. }
  41. .col-7 {
  42. width: 57.5%;
  43. }
  44. .col-8 {
  45. width: 66%;
  46. }
  47. .col-9 {
  48. width: 74.5%;
  49. }
  50. .col-10 {
  51. width: 83%;
  52. }
  53. .col-11 {
  54. width: 91.5%;
  55. }
  56. .col-12 {
  57. width: 100%;
  58. }
  59. img, object, embed {
  60. max-width: 100%;
  61. }
  62. img {
  63. height: auto;
  64. }
  65. .last {
  66. margin-right: 0
  67. }
  68.  
  69. .no_padding {
  70. width: 100%;
  71. padding:0 0;
  72. background: #3d4b54;
  73. }
  74.  
  75. #logo a{
  76. display: block;
  77. float: left;
  78. width: 133px;
  79. height: 50px;
  80. background: url("../images/logo.png") no-repeat left center;
  81. margin-left:5%;
  82. }
  83.  
  84. /* Section ================================================================== */
  85.  
  86. #body section{
  87. float:left;
  88. width:66%;
  89. }
  90.  
  91. #body section article {
  92.  
  93. }
  94.  
  95. /* Sidebar ================================================================== */
  96.  
  97. #body aside{
  98. float:right;
  99. width:32%;
  100. }
  101.  
  102. /* Main Navigation =========================================================== */
  103.  
  104. nav {
  105. height:50px;
  106. padding: 0;
  107. font-size:14px;
  108. text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
  109. }
  110.  
  111. nav .menu,
  112. nav .menu li,
  113. nav .menu ul {
  114. list-style: none;
  115. margin: 0;
  116. padding: 0;
  117. }
  118.  
  119. nav .menu {
  120. position: relative; z-index: 1000; float: right;
  121. height: 50px;
  122. line-height: 50px;
  123.  
  124. }
  125.  
  126. nav .menu .item{
  127. background-image:none !important;
  128. }
  129.  
  130. nav .menu > li {
  131. float: left;
  132. }
  133.  
  134. nav .menu > li:first-child {
  135. background:none;
  136. }
  137.  
  138. nav .menu > li > a {
  139. display: block;
  140. padding: 0 20px;
  141. color:#FFF;
  142. text-decoration: none;
  143. border-left: 1px solid #485a63;
  144. }
  145.  
  146. nav .menu > li > a:hover {
  147. background: #303e45 !important;
  148. }
  149.  
  150. nav .menu > li.active > a { background: #303e45 !important; }
  151. nav .menu > li.active > a:hover { }
  152. nav .menu > li.active > ul a:hover { color:#000; }
  153.  
  154. nav .menu ul li a,
  155. nav .menu li.active ul li a {
  156. color: #000;
  157. text-shadow: none;
  158. text-decoration: none;
  159. padding: 0 10px;
  160. }
  161.  
  162. nav .menu li ul li.active > a{ color:#2980B9; }
  163. nav .menu li ul li.active > a:hover { color:#2980B9; }
  164.  
  165. nav .menu ul li:hover > a { background-color: #DAE9FA; }
  166.  
  167. nav .menu li:hover {
  168. position: relative;
  169. z-index: 599;
  170. cursor: default;
  171. }
  172.  
  173. nav .menu ul {
  174. visibility: hidden;
  175. position: absolute;
  176. top: 98%;
  177. left: 0;
  178. z-index: 598;
  179. width: 100%;
  180. box-shadow: 0 1px 1px #000;
  181. }
  182.  
  183. nav .menu ul li {
  184. float: none;
  185. border-bottom: solid 1px #DAE9FA;
  186. background-color: #f9f9f9;
  187. color: #000;
  188. }
  189.  
  190. nav .menu ul li:last-child {
  191. border-bottom: none;
  192. }
  193.  
  194. nav .menu ul li a {
  195. display: block;
  196. height:30px;
  197. line-height:30px;
  198. overflow: hidden;
  199. }
  200.  
  201. nav .menu ul ul {
  202. top: 0px;
  203. left: 99%;
  204. }
  205.  
  206. nav .menu li:hover > ul {
  207. visibility: visible;
  208. }
  209.  
  210. nav .menu ul { width: 200px; margin-top: 1px; }
  211.  
  212. nav .menu ul li:last-child,
  213. nav .menu ul li:last-child a {
  214. }
  215.  
  216. nav .menu ul li:first-child,
  217. nav .menu ul li:first-child a {
  218. }
  219.  
  220. nav .menu > .folder > a {
  221. padding-right: 8px;
  222. }
  223.  
  224. nav .menu > .folder > a > .wrap {
  225. padding-right: 20px;
  226. background: url("../images/nav-arrow-down-white.png") no
#4 26 мая 2015 в 19:33
Итак, начнем сначала.
Я так понимаю, это какой-то не дефолтный шаблон для instant 2 ?
Вы пытаетесь сделать там какое-то выпадающее меню?
Вместо hidden пробовали написать auto | hidden | scroll | visible | inherit?
#5 26 мая 2015 в 19:47


Итак, начнем сначала.
Я так понимаю, это какой-то не дефолтный шаблон для instant 2 ?
Вы пытаетесь сделать там какое-то выпадающее меню?
Вместо hidden пробовали написать auto | hidden | scroll | visible | inherit ?

HiAndy

пробовал.
#6 26 мая 2015 в 20:24

пробовал.

SE7EN
Что с ответами на предыдущие вопросы?
#7 26 мая 2015 в 20:34


пробовал.

SE7EN
Что с ответами на предыдущие вопросы?

HiAndy

наверное отложим дискуссию. сделаем по другому, скину в инет, чтоб понятно было а там продолжим.
#8 26 мая 2015 в 23:21

Так Вы в стилях к самому классу col-9 нарисуйте импотента (!important).
Импотент побеждает все приоритеты.

HiAndy
Тут не победит: тот случай когда родители не в ответе за потомков. laugh
Несколько вариантов на выбор:
— назначение идентификатора
— составной селектор классов
— назначение пользовательского стиля
— очищение потока другим способом (тут тоже вариантов несколько)
Если нет каких-либо дополнительных условий, я б выбрал второй вариант.
  1. <div class="row visible">
стиль:
  1.  
  2. .row.visible{
  3. overflow:visible
  4. }
  5.  
#9 26 мая 2015 в 23:38

Тут не победит: тот случай когда родители не в ответе за потомков.

Олег Васильевич я

Спасибо, буду знать! v

Век живи — век учись… и дураком помрешь… smile
#10 27 мая 2015 в 03:10
Hidden VS Human, who won?
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.