скругление углов css меню !

[morgusha]

Всем приветк ! подскажите пожалуйста...не могу скруглить все углы у меню ! оно построено как то так, что нижняя линия добавляется отдельно,а если скруглять тут, то скругляются и углы разделов меню (((

.suckerdiv ul li a{

display: block;

color: black;

text-decoration: none;

background-color: #fff;

padding: 1px 5px;

border: 1px solid #ccc;

border-bottom: 0;

line-height: 2em;

}

подскажите как меню подправить ???

suckerdiv li {
display: none;
}
.suckerdiv ul{
margin-left: -7px;
margin-top: 0px;
padding: 0;
list-style-type: none;
width: 165px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
font-family: arial;
font-size: 11px;
}

.suckerdiv ul li{
position: relative;
background-color: #eee;
}

/*1st level sub menu style */
.suckerdiv ul li ul{
left: 174px; /* Parent menu width - 1*/
position: absolute;
width: 165px; /*sub menu width*/
top: 0;
display: none;
}/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul{
left: 164px; /* Parent menu width - 1*/
}
/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li a{
left: 164px; /* Parent menu width - 1*/
background-color: #fff;
}/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul li a{
background-color: #bbb;
}
/*All subsequent sub menu levels offset */
.suckerdiv ul li ul li ul li ul li a{
background-color: #aaa;
}/* menu links style */
.suckerdiv ul li a{
display: block;
color: black;
text-decoration: none;
background-color: #fff;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
line-height: 2em;
}
.suckerdiv ul li a:visited{
color: black;
}.suckerdiv ul li a:hover{		 /*для смны цвета и фона при наведении мышкой*/
/*background-color: #d5d5d5;*/
color: #0091be;
text-decoration: none;
}
.suckerdiv ul li ul li a:hover{	 /*для смены цвета и фона при наведении мышкой выпадающего меню*/
background-color: rgb 204 204 204;
color: #0091be;
text-decoration: none;
}.suckerdiv ul li ul li ul li a:hover{
background-color: rgb 204 204 204;
color: black;
text-decoration: none;
}

[lexxcode]

сделайте пример на http://jsfiddle.net/ проще вникать будет другим людям

[morgusha]

не получается у меня там сделать ! просто менб как то криво что ли сделано ??? я делал обычно и убирал нижнее подчёркивание у последнего элемента,а тут наоборот оно добавляется ! получается что рамка делается вокруг каждого элемента отдельно (

и меню к админке прикреплено так что структуру хтмл изменить не очень можно то,а вот если выход при помощи css есть то ПЛИИИИИИИИИИИИИИИЗ!

Edited February 12, 2013 by morgusha

[morgusha]

как пример вот сайт :

www.joomla.metko.ru

вот так вот скругляет ? (((

http://zalil.ru/34254270

Edited February 12, 2013 by morgusha

[skinva]

диву задаешь бордер, а потом скругляешь этот див

[morgusha]

ахах что просто сделать див и позиционировать его как рамку меню ? ))) так надо же что бы и подменю тоже было с закруглёнными углами или какому диву то ???

[morgusha]

ну кто подскажет...весь день не могу сделать (((( уже вообще нет идей всёменял и один хрен не получается(((

<!-- Бокс разделы -->
<div id="boxCategories">
<!--<h5>{#heading_categories#}</h5>-->
<!-- Begin css-menu - installed by Установка модулей //-->
{literal}
<script type="text/javascript">
//SuckerTree Vertical Menu (Aug 4th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  }
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)
</script>
{/literal}

<!-- End css-menu - installed by Установка модулей //-->

<!-- Begin css-menu - installed by Установка модулей //-->
<div id="categoriesBoxMenu1">

<!-- End css-menu - installed by Установка модулей //-->
{$BOX_CONTENT}
</div>
</div>
<!-- /Бокс разделы -->

может тут как можно ???

[lexxcode]

У тебя такая ситуация?? http://jsfiddle.net/alexriz/f2MT5/

А нужна такая?? http://jsfiddle.net/alexriz/f2MT5/4/

[morgusha]

.suckerdiv ul{

margin-left: -7px;

margin-top: 0px;

padding: 0;

list-style-type: none;

width: 165px; /* Width of Menu Items */

border-bottom: 1px solid #ccc;

font-family: arial;

font-size: 11px;

border-radius:8px;

overflow: hidden;

}

overflow: hidden; ставлю и видны становятся закругления ! не пойму с чем это связано то ??? но при overflow: hidden; не открывается меню второго уровня тогда (((

да да ты верно понял мою ситуацию....в чём же дело то ? фон что ли перекрывает или как ??? (((

[lexxcode]

ну так вот нужно было сделать просто пример, глядишь и сам бы разобрался. Обрати внимание на то, что у пунктов есть background и углы у них нескруглены. А border и скругление у списка, который оборачивает эти пункты.

А теперь смотри во-второй ссылке решение, я просто добавил скругление вложенным пунктам, первому на верхних углах, а последнему на нижних. И всех делов то. Да именно фон и перекрывает.

Предоставь нормальную информацию, тогда тебе нормально помогут. А просто так орать бесполезно

[morgusha]

ну у меня меню формируется js и поэтому структуру html я не могу взять ! ток вот css есть !

[lexxcode]

тогда нужно было хотя бы ссылку кинуть на страницу в которой это все происходит. Живой пример всегда проще анализировать

[morgusha]

я же кинул ссылку !

www.joomla.metko.ru

и ещё вот у меня такая вот структура меню получается...

.suckerdiv li {
display: none;
}[/font][/color]
[color=#282828][font=helvetica, arial, sans-serif].suckerdiv ul{
margin-left: -7px;
margin-top: 0px;
padding: 0;
list-style-type: none;
width: 165px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
font-family: arial;
font-size: 11px;
}

border-bottom: 1px solid #ccc; добавляет линию к самому последнему элементу списка у него она не появляется почему то ! а все другие линии добавляются в этом вот блоке :

.suckerdiv ul li a{
display: block;
color: black;
text-decoration: none;
background-color: #fff;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom:0px;
line-height: 2em;
}

border-bottom:0px; причём если эту строку убрать, то получаются двойные линии вот сча на сайте как раз этот параметр убран нижнии линии толще олучаются...выходи они где то 2 раза что ли задаются... ...что за бред вообще (

Edited February 12, 2013 by morgusha

[max2012]

Ясно понятно

Edited February 12, 2013 by max2012

[morgusha]

что ЯСНО что ПОНЯТНО ? ) вот мне не понятно откуда этот фон перекрывает линию закругления, если фон не задан как картинка с размером ???

Edited February 13, 2013 by morgusha

[mrnobody]

Вам нужно типа такого меню как здесь http://starbuzz.16mb.com/ (боковое меню слева) ?

[morgusha]

ну почти такое же ! посмотримте по сылке :

www.joomla.metko.ru

вроде скруглилось ,а вот если выбрать подкатегории аксессуары то там верхние углы не скругляются(((

второй день не могу сделать ( дам 100р кто подскажет как ! ! ! ! !

[morgusha]

ну ктоподскажет то ?

[lexxcode]

Я не вижу даже меню такого, по той ссылки которая предоставлена

[morgusha]

просто я его редактирую всегда ( и оно меняется )

вот почему может last child и first child распростроняться на всё,а не только на верхний и нижний элемент ?

получается либо все углы скручиваются вместе с разделительными линиями либо нифига не скручивается(

всё! Спасибо за внимание ! сделал ! ! !