встала задача перекроить шаблон
http://www.globbersthemes.com/demo/tequoia/в верхнем горизонтальном меню пункты меню автоматически растягиваются по ширине в зависимости от количества символов. мне необходимо добавить шесть пунктов меню, но чтобы по ширине они были одинаковые и фиксированные.
контейнер меню в index.php
<div class="navigation">
<jdoc:include type="modules" name="position-1" />
</div>
код в tdefault.css
#topmenu {
float:left;
width:100%;
height:80px;
background: url(../images/topmenu.png) 0 0 repeat-x;
margin-top:-5px;
}
.navigation {
float:left;
width: 100%;
background:transparent;
margin-top:13px;
}
.navigation ul {
list-style: none;
margin:0;padding:0;
}
.navigation ul ul {
margin: 0;
padding: 0;
}
.navigation ul li {
margin:0px 0 0 0;
padding: 0;
float: left;
list-style: none;
background: none;
display: block;
}
.navigation ul li ul {
width: 230px;
position: absolute;
z-index: 99;
left: -999em;
height: auto;
w\idth: 230px;
}
.navigation ul li ul ul {
margin: 0;
}
.navigation ul li li {
padding: 0;
margin: 0;
width: 100%;
}
.navigation ul ul a {
width: 100%;
}
.navigation ul li:hover ul ul,.navigation ul li:hover ul ul ul,.navigation ul li.sfhover ul ul,.navigation ul li.havechildsfhover ul ul,
.navigation ul li.havechild-activesfhover ul ul,.navigation ul li.activesfhover ul ul,
.navigation ul li.sfhover ul ul ul,.navigation ul li.havechildsfhover ul ul ul,
.navigation ul li.havechild-activesfhover ul ul ul,.navigation ul li.activesfhover ul ul ul {
left: -999em;
}
.navigation ul li:hover ul,.navigation ul li li:hover ul,.navigation ul li li li:hover ul,
.navigation ul li.sfhover ul,.navigation ul li.havechildsfhover ul,.navigation ul li.havechild-activesfhover ul,
.navigation ul li.activesfhover ul,.navigation ul li li.sfhover ul,.navigation ul li li.havesubchildsfhover ul,
.navigation ul li li.havesubchild-activesfhover ul,.navigation ul li li.activesfhover ul,.navigation ul li li li.sfhover ul,
.navigation ul li li li.havesubchildsfhover ul,.navigation ul li li li.havesubchild-activesfhover ul,.navigation ul li li li.activesfhover ul {
left: auto;
}
.navigation ul li a {
padding: 25px 8px 0 8px ;
margin:0;
display: block;
font-weight: bold;
font-size:16px;
text-transform:capitalize;
height:36px;
background:transparent;
color:#0a0a16;
}
.navigation ul li a:hover {
color:#efe9cf;
background:#0a0a16;
}
.navigation ul li {
background: transparent ;
border-left:1px solid #aea995;
border-right:1px solid #cdc7ae;
}
.navigation ul li.active a {
color:#efe9cf;
background:#0a0a16;
}
.navigation ul li ul {
background:#0a0a16;
margin-top: 0px;
padding-top:15px !important;
padding-bottom: 15px !important;
text-align:left !important;
width:200px;
border:none !important;
}
.navigation ul li ul li {
padding-top:2px ;
padding-bottom:0px ;
background:none !important;
border:none !important;
}
.navigation ul li ul li a{
height:33px !important;
color:#fff !important;
text-align:left !important;
padding-left:20px !important;
padding-top:23px !important;
width:172px !important;
border:none !important;
}
.navigation ul li ul li a:hover {
color:#0a0a16 !important;
height:33px ;
background:#efd02c;
border:none !important;
}
.navigation ul li ul li ul {
margin-left:190px;
margin-top: -30px;
padding-top:10px !important;
text-align:left !important;
}
воспользовался
поиском по форуму, нашел тему
http://joomlaforum.ru/index.php/topic,159871.0.htmlтам советуют
добавьте к тегу a свойство display:block; тогда везде будет фиксированная ширина.
но я не могу понять как применить это на практике.
подскажите, пожалуйста, в какую сторону копать?
29.12.2021, 23:15:38