Пожалуйста подскажите как мне настроить такое же верхнее меню.
то моё верхнее меню становиться красивым, но не выпадающим.
В демо шаблона в <ul class="menu_lv_dropdown"> - как я понял отвечает за вывод выпадающего меню, а у меня в шаблоне после того как я прописал Суффикс CSS-класса меню получается <ul id="mainlevel-nav".
.menu_lv_dropdown, .menu_lv_dropdown ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
z-index:99;
display:inline-block;
}
.menu_lv_dropdown {
border-left:1px solid #333;
border-right: 1px solid #000;
}
.menu_lv_dropdown ul {
border:2px solid #000;
padding:5px;
background-color:#222;
-moz-border-radius: 10px;
-moz-box-shadow: 0 0 10px #000;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0 0 10px #000;
}
.menu_lv_dropdown li, .menu_lv_dropdown ul li {
list-style:none;
}
.menu_lv_dropdown li.parent a span, .menu_lv_dropdown li.parent li.parent a span, .menu_lv_dropdown li.parent li.parent li.parent a span {
padding-left:18px;
background-image: url('../images/down.png');
background-repeat:no-repeat;
}
.menu_lv_dropdown li.parent li a span, .menu_lv_dropdown li.parent li.parent li a span, .menu_lv_dropdown li.parent li.parent li.parent li a span {
border:0;
background-image:none;
}
.menu_lv_dropdown a {
display:block;
padding:20px 15px;
border:1px solid #000;
border-right:1px solid #333;
border-bottom:1px solid #333;
color:#fff;
text-decoration:none;
background-color:#222;
background-image: url('../images/dropdown.png');
background-repeat: repeat-y;
}
.menu_lv_dropdown li{
float:left;
position:relative;
}
.menu_lv_dropdown ul {
position:absolute;
display:none;
width:16.15em;
top:4.5em;
}
.menu_lv_dropdown li ul a{
width:15em;
height:auto;
float:left;
padding:10px 1em 10px 0;
}
.menu_lv_dropdown ul ul{
top:auto;
}
.menu_lv_dropdown li ul ul {
left:15em;
margin:0px 0 0 10px;
}
.menu_lv_dropdown li:hover ul ul, .menu_lv_dropdown li:hover ul ul ul, .menu_lv_dropdown li:hover ul ul ul ul{
display:none;
}
.menu_lv_dropdown li:hover ul, .menu_lv_dropdown li li:hover ul, .menu_lv_dropdown li li li:hover ul, .menu_lv_dropdown li li li li:hover ul{
display:block;
}
/*********************************************
*** Designed by Juergen Koller ***
*** Designers Home: http://www.LernVid.com ***
**********************************************/
/****************** LAYOUT ******************/
html {
height:100%;
}
body {
font-family:Arial, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
font-size:14px;
line-height:1.5em;
}
#top {
height:22px;
background-color:black;
background-image: url('../images/top.gif');
}
#bg_up {
background-image: url('../images/bg_up.jpg');
background-repeat:no-repeat;
background-position: center top;
}
#header, #user_outer, #wrapper {
max-width: 1200px;
min-width: 950px;
margin:0 auto;
}
#wrapper {
background-image: url('../images/wrapper.png');
background-position: center top;
background-repeat:repeat-y;
margin-bottom:20px;
}
#header {
min-height: 120px;
position:relative;
}
#nav_outer {
background-image: url('../images/nav.png');
background-repeat:no-repeat;
height:99px;
}
/* logos */
#header a#imglogo {
float:left;
}
#header a#logo {
display:block;
padding:15px 0 0 0;
min-height:65px;
line-height:normal;
width:auto;
font-size:42px;
}
#headermodule1 p {
margin:0; padding::0;
}
#header #slogan {
display:block;
padding:15px 0 0 0;
min-height:40px;
line-height:normal;
width:69%;
font-size:22px;
color: #1b6aac;
}
#header a#logo:hover {text-decoration:none;}
/* logos end */
#user_outer {
position:relative;
min-height:64px;
padding-top:18px;
}
#slider {
display:inline-block;
width:auto;
height:auto;
margin: 0 0 10px 0;
}
#container {
padding: 20px 2%;
}
/* Feed entrys */
#syndicate {
text-align:right;
width:67%;
position:absolute;
margin:10px;
}
/* Feed entrys end */
#content_out {
padding:0;
}
#maincontent {
padding: 0 0 10px 0;
overflow:hidden;
}
#rightcol {
font-size:13px;
float:right;
border-right:0;
}
/* right modules */
#rightcol .module, #rightcol .module_menu, #rightcol .module_text {
padding:0;
margin:0 0 22px 0;;
}
#rightcol .module .div-2, #rightcol .module_menu .div-2, #rightcol .module_text .div-2 {
padding:5% 10%;
}
.module h3.lvrounds, .module_text h3.lvrounds, .module_menu h3.lvrounds {
margin:0 0 7px 0;
padding:0;
font-size:16px;
font-family:Georgia;
font-style:italic;
}
/* right modules end */
/* articles */
.eintrag {
display:inline-block;
width:100%;
margin: 0 0 20px 0;
}
.eintrag-topl, .div-topl {
background-image: url('../images/eintrag-lt.png');
background-repeat:no-repeat;
height:26px;
}
.eintrag-topr, .div-topr {
height:26px;
}
.eintrag-1, .div-1 {
background-image: url('../images/eintrag-l.png');
background-repeat:repeat-y;
}
.eintrag-2, .div-2 {
padding:1% 6%;
}
.eintrag-bottoml, .div-bottoml {
background-image: url('../images/eintrag-lb.png');
background-repeat:no-repeat;
height:26px;
}
.eintrag-bottomr, .div-bottomr {
height:26px;
}
/* articles end */
#wrapper-2 {
}
#footer {
max-width: 1280px;
min-width: 930px;
margin:0 auto;
text-align:center;
min-height: 50px;
padding:10px;
}
a#gotop {
text-align:right;
display:block;
font-style:italic;
text-transform:uppercase;
}
.copyright, .copyright a {
font-size:10px;
}
/****************** LAYOUT END ******************/
/****************** MENUS ******************/
/* MAINMENU right */
.module_menu ul.menu, .module_menu ul.menu ul {
margin:0;
padding: 0 0 0 20px;
}
.module_menu ul.menu li {
margin:2px 0;
padding:0;
}
.module_menu ul.menu li a {
display:block;
}
/* Standard TOPMENU user3 */
ul#mainlevel-nav, ul#mainlevel-nav li {
margin:0;
padding:0;
list-style:none;
}
ul#mainlevel-nav {
display:inline-block;
height:64px;
border-left:1px solid #333;
}
ul#mainlevel-nav li {
display:inline;
float:left;
padding:0;
margin:0;
}
ul#mainlevel-nav li a {
display:block;
padding:20px 15px;
border:1px solid #000;
border-right:1px solid #333;
border-bottom:1px solid #333;
color:#fff;
text-decoration:none;
background-color:#222;
background-image: url('../images/dropdown.png');
background-repeat: repeat-y;
}
ul#mainlevel-nav li a:hover {
text-decoration:none;
}
/****************** MENUS END ******************/
/****************** SEARCH user4 ******************/
#search {
position:absolute;
right:15px;
top:-50px;
width: 22%;
height:40px;
}
#search input.button {
margin-left: 5px;
background-image:none;
border:0;
}
#search .inputbox {
background-image: url('../images/search.png');
background-repeat:no-repeat;
background-position: 3px 3px;
padding: 5px 5px 5px 25px;
border:0;
border:1px solid;
}
/****************** SEARCH user4 end ******************/
/****************** Joomla THINGS ******************/
.contentdescription {
display:inline-block;
width: 98%;
margin: 5px 0;
padding: 1%;
}
/* Search Component */
.results li {
padding-bottom:5px;
margin-bottom:25px;
border-bottom:1px dotted;
}
form.search_result fieldset {
border:solid 2px;
padding:20px;
margin:10px 0;
}
.highlight {
color : #ff0000;
font-weight:bold;
font-family: Verdana;
padding : 0 5px;
}
/* Search Component end */
/* Poll Component */
table.poll {
padding : 0;
width : 100%;
border-collapse : collapse;
}
table.pollstableborder {
padding : 0;
width : 99%;
border : none;
text-align : left;
border: 2px solid;
}
table.pollstableborder th {
padding : 5px;
border:1px solid;
font-size:18px;
}
table.pollstableborder img {
vertical-align : baseline;
padding-left : 10px;
}
table.pollstableborder td {
border: 1px solid;
padding : 5px;
border-collapse : collapse;
border-spacing : 0;
}
table.pollstableborder tr.sectiontableentry1 td {
margin : 1px;
padding : 2px 5px 2px 5px;
}
table.pollstableborder tr.sectiontableentry2 td {
margin : 1px;
padding : 2px 5px 2px 5px;
}
table.pollstableborder tr.sectiontableentry0 td {
margin : 1px;
padding : 2px 5px 2px 5px;
}
.poll dt {
font-weight:bold;
font-size:16px;
float:left;
margin-right: 20px;
}
.poll dd {
}
form.poll fieldset input {
background:none;
border: 0;
}
/* Poll Component end */
/* COMPONENT CONTACT */
table.contact-category {
width: 100%;
}
table.contact-category td {
padding: 8px;
border: 1px solid;
}
table.contact-category th {
padding: 8px;
border: 1px solid;
}
div.contact {
margin:10px 0;
}
address {
font-style:normal;
margin:10px 0;
}
address p {
line-height:1em;
}
.contact label {
float:left;
font-weight:bold;
width:14em;
margin:10px 0 0;
}
span.marker {
margin:0 10px 0 0;
}
.contact_email_checkbox label {
float:none !important;
}
.contact label.copy {
width:90%;
padding:0 0 0 10px;
}
.contact form {
padding:20px;
margin:10px 0;
}
.contact input {
padding:2px 2px 0;
margin:10px 0 0;
}
.contact .button {
font-weight:bold;
margin:20px 10px 0 0;
cursor:pointer;
}
label.textarea {
float:none !important;
margin:10px 0;
display:block;
width:100%;
}
#contact_text {
width:80%;
height:150px;
}
.contact input.invalid,.contact textarea.invalid {
border:solid 2px red;
}
.contact label.invalid {
color:red;
}
/* COMPONENT CONTACT END */
/* contact */
.contact_email {
padding : 5px;
margin : 5px;
}
div.contact {
margin:10px 0;
}
address {
font-style:normal;
margin:10px 0;
}
address p {
line-height:1em;
}
.contact label {
float:left;
font-weight:bold;
width:14em;
margin:10px 0 0;
}
span.marker {
margin:0 10px 0 0;
}
.contact_email_checkbox label {
float:none !important;
}
.contact label.copy {
width:90%;
padding:0 0 0 10px;
}
.contact form {
padding:20px;
margin:10px 0;
}
.contact input {
padding:2px 2px 0;
margin:10px 0 0;
}
.contact .button {
font-weight:bold;
margin:20px 10px 0 0;
cursor:pointer;
}
label.textarea {
float:none !important;
margin:10px 0;
display:block;
width:100%;
}
#contact_text {
width:80%;
height:150px;
}
.contact input.invalid,.contact textarea.invalid {
border:solid 2px red;
}
.contact label.invalid {
color:red;
}
/* contact end */
.display, .filter {
margin: 15px;
}
.sectiontableheader {
font-size:18px;
font-weight:bold;
text-align : left;
text-transform : none;
margin : 0;
padding:5px 10px;
border: 1px dotted;
}
.sectiontablefooter {
padding : 2px;
margin : 0;
text-align : left;
text-transform : none;
}
.sectiontableentry1 td {
line-height: 25px;
padding:5px 10px;
margin : 1px;
border: 1px dotted;
}
.sectiontableentry2 td {
line-height: 25px;
padding:5px 10px;
margin : 1px;
border: 1px dotted;
}
.sectiontableentry0 td {
line-height: 25px;
padding:5px 10px;
margin : 1px;
border: 1px dotted;
}
.sectiontableentry0, sectiontableentry1, sectiontableentry2 {
text-align : left;
}
.invalid {
border-color: #ff0000;
}
label.invalid {
color: #ff0000;
}
a.cat, a.sec {
font-size:12px;
}
div.moduletable, div.moduletable_text, div.moduletable_menu {
padding:10px;
}
span.breadcrumbs a {
font-weight:bold;
color:#205677;
}
span.breadcrumbs {
margin:3px 0 0 0;
padding: 0 20px 3px 0;
display:block;
line-height:15px;
text-align:right;
font-size:10px;
position:absolute;
top:-22px;
right:50px;
background-image : url(../images/breadcrumb.png);
background-repeat:no-repeat;
background-position: right top;
}
.leading_separator {
display: block;
height: 10px;
margin:0;
}
.article_separator {
display: block;
height: 10px;
margin:0;
}
.blog_more {
padding: 20px
}
.blog_more h2 {
font-weight:normal;
font-size:12px;
}
p.counter {
text-align:right;
padding:20px;
}
.componentheading {
font-size:11px;
font-weight:normal;
margin:3px 0 0 20px;
padding: 0 5px 0 20px;
line-height:15px;
text-align:left;
position:absolute;
top:0;
background-image: url('../images/compo.png');
background-repeat:no-repeat;
}
h1.contentheading {
font-size:17px;
font-style:italic;
font-family:Georgia;
margin:0 0 20px 0;
padding:0;
}
h1.contentheading span {
padding:0 3px 2px 3px;
}
.buttonheading {
float:right;
padding: 0 0 5px 10px;
}
.buttonheading a {
padding: 0 0 3px 7px;
clear:both;
}
.iteminfoz {
font-size:8.5px;
float:right;
}
.iteminfo {
font-size:8.5px;
display:inline-block;
margin: 5px 0 0 0;
padding:0;
}
.createdate, .createdby, .modifydate {
float:left;
height:auto;
margin:2px;
padding: 2px 7px 2px 24px;
background-repeat:no-repeat;
background-position: 5px 5px;
}
.createdate {
background-image : url(../images/create.png);
}
.createdby {
background-image : url(../images/createdby.png);
}
.modifydate {
background-image : url(../images/modify.png);
}
a.readon {
padding:5px;
}
.pageinfo {
display:block;
padding:10px;
text-align:right;
}
.weblinks a.category {
font-size:16px;
display:inline-block;
height: 35px;
width: auto;
padding-left: 10px;
}
#system-message {
color: blue;
}
/* Editor */
.contentpaneopen_edit{
text-align:right;
}
.contentpaneopen_edit img { border:0
}
form.editor legend {
font-size:1.2em;
font-weight:bold;
padding:2px;
}
form.editor fieldset {
border:solid 1px;
padding:20px;
margin:10px 0;
}
form.editor .publishing label {
float:left;
width:14em;
font-weight:bold;
}
form.editor .publishing div {
margin:5px 0;
}
form.editor .publishing .radio label {
float:none;
width:14em;
}
form.editor .publishing .radio label span {
float:left;
width:14em;
}
form.editor fieldset.metadata label {
float:none !important;
display:block;
font-weight:bold;
}
.save {
text-align:right;
padding:10px 0;
}
/* Editor end */
/* -- buttons */
#editor-xtd-buttons {
padding: 5px;
}
.button2-left,
.button2-right,
.button2-left div,
.button2-right div {
float: left;
}
.button2-left a,
.button2-right a,
.button2-left span,
.button2-right span {
display: block;
height: 22px;
float: left;
line-height: 22px;
font-size: 11px;
color: #666;
cursor: pointer;
}
.button2-left span,
.button2-right span {
cursor: default;
color: #999;
}
.button2-left .page a,
.button2-right .page a,
.button2-left .page span,
.button2-right .page span {
padding: 0 6px;
}
.page span {
color: #000;
font-weight: bold;
}
.button2-left a:hover,
.button2-right a:hover {
text-decoration: none;
color: #0B55C4;
}
.button2-left a,
.button2-left span {
padding: 0 24px 0 6px;
}
.button2-right a,
.button2-right span {
padding: 0 6px 0 24px;
}
.button2-left {
float: left;
margin-left: 5px;
}
.button2-right {
float: left;
margin-left: 5px;
}
body.contentpane {
background-color:#fff;
}
form#login label {
display:block;
padding:10px 0 3px 0;
font-weight:bold;
}
form#login fieldset {
border: 10px solid #333;
padding: 20px;
color: #fff;
}
/* Section List */
ul.sectionentry li {
margin:0 10px 30px 10px;
padding: 0 30px;
border-bottom: 3px double;
}
ul.sectionentry li a.category {
font-size:18px;
display:block;
}
ul.sectionentry li .small {
float:right;
display:block;
text-align:right;
font-size:11px;
}
/* Section List end */
/****************** Joomla THINGS END ******************/
/****************** HTML THINGS ******************/
.button, input, .validate, .inputbox, .pagenav, .pagenav_next, .pagenav_prev {
border:0;
font-size:11px;
padding: 3px 6px;
margin: 0 5px;
background-image:url('../images/button.gif');
background-repeat:repeat-x;
}
td {
font-size:14px;
}
.clr {
clear:both;
}
a, a:link, a:visited, a:active, a:focus {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
input, button {
font-size:10px;
}
img, a, fieldset {
border:0;
outline:0;
}
/****************** HTML THINGS END ******************/