Никак не могу разобраться, помогите пожалуйста. Это меню, вплывающие.
Вот так это выглядит вживуюhttp://demo.cs-cart.com/index.php Проблема, со следующим - необходимо вывести подкатегори не в выпадающей вкладке, а под основным родительским: просто списком.
Вполне возможно, вопрос, вам покажется идиотическим, но все таки - возможно это реализовать через css? И собственно как?
#vmenu li.has-children { /* Any item with children */ position: relative; width: 154px; display:block; background: #f7f7f7 url('images/category_collapsed.gif') no-repeat 150px; padding-right: 15px; }
#vmenu li.has-children:hover, #vmenu a.has-children:hover { /* Any item with children - hover */ color: #333333; background: #c7ebf9 url('images/category_expanded_emenu.gif') no-repeat 150px; }
#vmenu li > a.has-children:hover, #vmenu li:hover > a.has-children:link, #vmenu li:hover > a.has-children:visited { /* Parents of selected item - do no hide focus from them */ color: #333333; }
#vmenu li { /* Any item without children */ position: relative; width: 154px; display: block; background-color: #f7f7f7; padding-right: 15px; }
#vmenu li:hover, #vmenu a:hover { /* Any item wihout children - hover */ color: #333333; background-color: #c7ebf9; }
#vmenu ul li { /* 2nd+ level items */ background-color: #ffffff; font-size: 11px; background-image: none; width: 154px; }
#vmenu ul li.has-children { /* 2nd+ level items with children */ background-color: #ffffff; }
#vmenu a, #vmenu li ul li a { /* 2nd+ level items (a tag) */ text-decoration:none; color: #333333; font-weight: bold; display:block; padding: 5px 4px 6px 12px; }
#vmenu li ul li a { /* 2nd+ level items (a tag) */ padding: 4px 4px 4px 12px; }
#vmenu ul { /* submenu offset relating to root items */ display: none; position: absolute; top:0; left: 169px; }
#vmenu li:hover > ul { /* Show children */ display: block; }
#vmenu li ul li.h-sep:hover { /* Horizontal subcategories separator */ background: url('images/emenu_delim.gif') repeat-x center; }
/* Win IE only */ * html #vmenu li {float:left; width: 169px; padding-right: 0px;} * html #vmenu li.has-children { width: 169px; padding-right: 0px;} * html #vmenu ul {left: 170px;} * html #vmenu a {width: 154px;} /* end holly hack */
Актуальные контакты:
Telegram: @Nikker_web
E-Mail: tarasevich.email@gmail.com
Портфолио https://www.behance.net/d4d4186e
Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ
Актуальные контакты:
Telegram: @Nikker_web
E-Mail: tarasevich.email@gmail.com
Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ
Портфолио https://www.behance.net/d4d4186e
Question
bose
Здравствуйте.
Никак не могу разобраться, помогите пожалуйста. Это меню, вплывающие.
Вот так это выглядит вживуюhttp://demo.cs-cart.com/index.php Проблема, со следующим - необходимо вывести подкатегори не в выпадающей вкладке, а под основным родительским: просто списком.
Вполне возможно, вопрос, вам покажется идиотическим, но все таки - возможно это реализовать через css? И собственно как?
Спасибо.
#vmenu { /* Common style */
margin: 0px;
padding: 0px;
list-style: none;
font-size: 12px;
}
#vmenu ul { /* Root items */
padding: 1px;
margin: 0px;
list-style: none;
width: 169px;
z-index: 99;
overflow: visible;
position: absolute;
background-color: #ffffff;
border: 1px solid #6faadd;
}
#vmenu li.has-children { /* Any item with children */
position: relative;
width: 154px;
display:block;
background: #f7f7f7 url('images/category_collapsed.gif') no-repeat 150px;
padding-right: 15px;
}
#vmenu li.has-children:hover, #vmenu a.has-children:hover { /* Any item with children - hover */
color: #333333;
background: #c7ebf9 url('images/category_expanded_emenu.gif') no-repeat 150px;
}
#vmenu li > a.has-children:hover, #vmenu li:hover > a.has-children:link, #vmenu li:hover > a.has-children:visited { /* Parents of selected item - do no hide focus from them */
color: #333333;
}
#vmenu li { /* Any item without children */
position: relative;
width: 154px;
display: block;
background-color: #f7f7f7;
padding-right: 15px;
}
#vmenu li:hover, #vmenu a:hover { /* Any item wihout children - hover */
color: #333333;
background-color: #c7ebf9;
}
#vmenu li.h-sep { /* Horizontal separator */
margin: 0;
padding: 0;
height: 2px;
line-height: 1px;
font-size: 1px;
background: url('images/emenu_delim.gif') repeat-x center center;
width: 169px;
}
#vmenu li.h-sep:hover { /* Horizontal separator */
background: url('images/emenu_delim.gif') repeat-x center;
width: 169px;
}
#vmenu ul li { /* 2nd+ level items */
background-color: #ffffff;
font-size: 11px;
background-image: none;
width: 154px;
}
#vmenu ul li.has-children { /* 2nd+ level items with children */
background-color: #ffffff;
}
#vmenu a, #vmenu li ul li a { /* 2nd+ level items (a tag) */
text-decoration:none;
color: #333333;
font-weight: bold;
display:block;
padding: 5px 4px 6px 12px;
}
#vmenu li ul li a { /* 2nd+ level items (a tag) */
padding: 4px 4px 4px 12px;
}
#vmenu ul { /* submenu offset relating to root items */
display: none;
position: absolute;
top:0;
left: 169px;
}
#vmenu li:hover > ul { /* Show children */
display: block;
}
#vmenu li ul li.h-sep { /* Horizontal subcategories separator */
margin: 0;
padding: 0;
height: 1px;
line-height: 0.1px;
font-size: 1px;
background: url('images/emenu_subcats_delim.gif') repeat-x;
}
#vmenu li ul li.h-sep:hover { /* Horizontal subcategories separator */
background: url('images/emenu_delim.gif') repeat-x center;
}
/* Win IE only */
* html #vmenu li {float:left; width: 169px; padding-right: 0px;}
* html #vmenu li.has-children { width: 169px; padding-right: 0px;}
* html #vmenu ul {left: 170px;}
* html #vmenu a {width: 154px;}
/* end holly hack */
Link to comment
Share on other sites
1 answer to this question
Recommended Posts