Долго решался и все же решил вернутся к изучению Joomla, все шло свои чередом пока не столкнулся с проблемой сделать выпадающие горизонтальное меню.
Просто горизонтальное меню сделал без проблем, поковырял не много CSS и все пучком, меню поделил на две части, слева картинка с писаниной, справа навигация, работает, но как только дело дошло до выпадающей части, тут начались проблемы. Само меню сделал с помощью HTML и CSS и все прекрасно работает, в дле на своих наработках проблем нет, но как только код вставляю в Joomla начинается белиберда, Joomla, какие то свои стили использует, все перекрывает, сложно это как то.
Кто-нибудь из здесь присутствующих может подробно объяснить как его сделать? Используемый код ниже, посмотрите кто-нибудь что не так в нем, где какие ошибки в ксс, с меня пиво
Код CSS.
#menu {background: #FFF; height:86px; border:solid 1px #cacaca; width:1000px; padding:0px; margin: 0 auto;}
#left_m {background:url(images/bg_fon_ag.png) no-repeat center; height:40px; float:left; width: 500px; margin:0px; padding:0px;}
#righr_m {float:right; width:460px; margin:0px; padding: 0; list-style: none;}
#righr_m ul {margin:0px; padding: 0; width: 115px; list-style: none; visibility: hidden; position: relative; top: 100%; left: 0; width: 100%;}
#righr_m li {list-style-type:none; width: 115px; float:right; margin: 0; padding: 0; display: inline; position: relative;}
#righr_m a {height:56px; display:block; background:url(images/bc_separator.png) no-repeat left; color: #4184cc; padding-left: 15px; padding-top:30px; text-decoration: none; color:#454545; float: none !important; float: left; display: block;}
#righr_m a:link {color: #4184cc;}
#righr_m a:visited {color: #4184cc;}
#righr_m a:active {background:url(images/bottom.png) no-repeat center;}
#righr_m a:hover {background:url(images/bottom_hover.png) no-repeat center; color: #4184cc;}
#righr_m li.hover,
#righr_m li:hover {position: relative;}
#righr_m ul li {float: none;}
#righr_m ul ul {top: 1px; left: 99%;}
#righr_m li:hover > ul {visibility: visible;}
#righr_m ul li:hover a{
color:#000;
background:#36f;
}
#righr_m ul li:hover ul li a{
display:block;
background:#ddd;
color:#000;
}
#righr_m ul li:hover ul li a:hover{
background:#6fc;
color:#000
}
#righr_m ul li a, #righr_m ul li a:visited{
color:#000000;
width:100px;
height:20px;
text-align:center;
border:1px solid #fff;
background:url(../images/bgfon.png) no-repeat;
//background:#710069;
line-height:20px;
font-size:11px;
overflow:hidden
}
Из HTML
<div id="menu">
<ul id="left_m">
<li>
<p><b>Всякая писанина.</b></p>
<p>Всякая писанина.</p>
</li>
</ul>
<ul id="righr_m">
<jdoc:include type="modules" name="user3"/>
</ul>
</div>
А это выдержка из кода, если его открыть через браузер.
<ul id="righr_m">
<ul id="mainlevel-nav"><li><a href="/index.php?option=com_content&view=article&id=25&Itemid=28" class="mainlevel-nav" >Наш район</a></li><li><a href="/index.php?option=com_content&view=article&id=48&Itemid=29" class="mainlevel-nav" >Недвижимость</a></li><li><a href="/index.php?option=com_content&view=article&id=47&Itemid=18" class="mainlevel-nav" >Аренда</a></li><li><a href="/index.php?option=com_content&view=article&id=46&Itemid=30" class="mainlevel-nav" id="active_menu-nav">Агентство</a></li><li><a href="/index.php?option=com_content&view=article&id=49&Itemid=55" class="mainlevel-nav" >История района</a></li></ul>
</ul>
Уже сам запутался, где. что нужно отредактировать.
