ich habe ein Problem mit einem Joomla Template. Das CSS Menü wird bei einem Sub Sub Menü Eintrag überdeckt (siehe Screenshot). Welche Bereiche muss ich anpassen damit das Sub Sub Menü richtig nach rechts geöffnet wird?
Code:
{
margin: 0;
padding: 0;
}
body, html {
height: 100%;
}
body {
background: #fff;
color: #2d2d2d;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
padding: 0px;
line-height: 1.4em;
}
body.font-opensans {
font-family: 'Open Sans', sans-serif;
}
body.font-lato {
font-family: 'Lato', sans-serif;
}
body.font-roboto {
font-family: 'Roboto', sans-serif;
}
body.font-ptsans {
font-family: 'PT Sans', sans-serif;
}
body.font-sourcesanspro {
font-family: 'Source Sans Pro', sans-serif;
}
body.font-nobile {
font-family: 'Nobile', sans-serif;
}
body.font-ubuntu {
font-family: 'Ubuntu', sans-serif;
}
body.font-istokweb {
font-family: 'Istok Web', sans-serif;
}
body.font-exo2 {
font-family: 'Exo 2', sans-serif;
}
body.contentpane {
width:auto;
margin:10px;
text-align: left;
}
img {
border: 0 none;
height: auto;
max-width: 100%;
vertical-align: middle;
}
ul {
list-style: none;
}
h1,h2, h3, h4 {
line-height: normal;
margin: 0 0 15px;
}
h1, h2 {
font-size: 24px;
text-transform: uppercase;
}
a {
color: #46962b;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
h4, p {
margin-bottom: 20px;
}
strong {
font-weight: bold;
}
fieldset {
border: none;
margin-bottom: 10px;
}
input, textarea {
background-color: #fff;
border: 1px solid #e4e5e5;
color: #ababab;
padding: 4px;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
}
button, .button {
background-color: #46962b;
border: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
font-family: "Open Sans",sans-serif;
font-size: 14px;
font-weight: bold;
padding: 4px 25px;
}
table {
border: 1px solid #ededed;
border-collapse: collapse;
}
tr, td {
border: 1px solid #ededed;
}
.tooltip {
display: none !important;
}
.pull-left {
float: left;
margin: 0 20px 0 0;
}
.pull-right {
float: right;
}
.componentheading, .contentheading {
color: #2d2d2d;
font-size: 24px;
font-weight: bold;
margin: 0 0 15px;
text-transform: uppercase;
}
#system-message, .reset {
margin: 10px;
}
html[xmlns] .clearfix {
display: block;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
line-height: 0;
}
#jf-wrapper {
overflow: hidden;
position: relative;
}
.wrap {
clear: both;
width: 100%;
}
.main {
margin: 0 auto;
position: relative;
width: 1200px;
}
body [class*="jf-grid"] {
display: inline;
float: left;
margin: 0;
position: relative;
}
/* TOP */
#jf-top {
background-color: #292929;
color: #fff;
}
#jf-callto {
text-transform: uppercase;
}
#jf-callto p {
margin: 0;
}
#jf-social ul {
float: right;
}
#jf-social li {
float: left;
margin: 0;
}
#jf-social li a {
background-repeat: no-repeat;
background-position: center bottom;
display: block;
margin-left: 5px;
height: 17px;
width: 18px;
}
#jf-social li a.button-facebook {
background-image: url(../images/facebook.png);
}
#jf-social li a.button-flickr {
background-image: url(../images/flickr.png);
}
#jf-social li a.button-google {
background-image: url(../images/google.png);
}
#jf-social li a.button-twitter {
background-image: url(../images/twitter.png);
}
#jf-social li a.button-pinterest {
background-image: url(../images/pinterest.png);
}
#jf-social li a.button-rss {
background-image: url(../images/rss.png);
margin-left: 20px;
}
/* HEADER */
#jf-header {
padding: 30px 0;
}
#jf-header .main {
position: relative;
}
#jf-header h1#logo {
font-weight: normal;
margin: 0;
}
#jf-header h1#logo .site-title {
color: #292929;
display: block;
font-size: 42px;
font-weight: bold;
line-height: 42px;
}
#jf-header h1#logo a:hover {
text-decoration: none;
}
#jf-header .search {
border: 1px solid #e4e5e5;
border-radius: 5px;
float: right;
padding-left: 10px;
}
#jf-header .search input {
border: none;
}
#jf-header .search input[type=text] {
background: url(../images/search.png) no-repeat left center;
padding-left: 20px;
}
#jf-header .search .button {
background-color: #46962b;
border: none;
border-radius: 0 5px 5px 0;
color: #fff;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: bold;
padding: 4px 8px;
}
#jf-mainnav {
background: url(../images/menu.png);
border-bottom: 4px solid #46962b;
border-top: 1px solid #e1e1e1;
}
#jf-mainnav .jf-block {
margin: 0 10px;
}
#jf-mainnav ul:after {
clear: both;
content: " ";
display: block;
height: 0;
visibility: hidden;
}
#jf-mainnav ul.menu li {
cursor: pointer;
display: block;
float: left;
position: relative;
z-index: 999;
}
#jf-mainnav ul.menu li a {
background: url(../images/separator.png) no-repeat right center;
border: 1px solid transparent;
color: #2d2d2d;
display: block;
font-size: 13px;
font-weight: bold;
padding: 20px;
text-transform: uppercase;
}
#jf-mainnav ul.menu li.vhover > a, #jf-mainnav ul.menu li a:hover, #jf-mainnav ul.menu li.active a {
background: #282828;
color: #fff;
}
#jf-mainnav ul.menu li.vhover > a, #jf-mainnav ul.menu li a:hover {
background: #282828;
color: #fff;
border: 1px solid #cdcdcd;
border-bottom: none;
-moz-box-shadow: 5px 0 5px -4px #888;
-webkit-box-shadow: 5px 0 5px -4px #888;
box-shadow: 5px 0 5px -4px #888;
}
#jf-mainnav ul.menu li.active ul li a {
background: none;
}
#jf-mainnav ul.menu li.parent > a {
position: relative;
z-index: 9999;
}
#jf-mainnav ul li > ul {
background-color: #282828;
border: 1px solid #cdcdcd;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
position: absolute;
left: -9999em;
z-index: 1000;
min-width: 180px;
padding: 0 20px;
margin: 0;
list-style: none;
margin-top: -1px;
}
#jf-mainnav li:hover > ul {
left: auto;
top: auto;
}
#jf-mainnav ul.menu li ul li {
border-bottom: 1px solid #444;
float: none;
padding: 4px 0;
}
#jf-mainnav ul.menu li ul li a {
background: none;
border: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
color: #fff;
font-size: 12px;
font-weight: normal;
padding: 4px 10px;
text-transform: none;
}
#jf-mainnav ul.menu li ul li a:hover, #jf-mainnav ul.menu li ul li.active a {
background-color: #545454;
border: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#navbutton {
display: none;
}
/* SLIDESHOW */
#jf-slideshow {
background: url(../images/shadow.png) repeat-x left bottom;
padding-bottom: 17px;
}
.jflabel_skitter h2 {
text-transform: uppercase;
}
.jfnext_button, .jfprev_button {
height: 61px !important;
width: 33px !important;
margin-top: -30px !important;
}
.jfnext_button.nextslide1 {
background-image: url(../images/next.png) !important;
}
.jfprev_button.prevsldide1 {
background-image: url(../images/prev.png) !important;
}
.jflabel_skitter {
width: 1180px !important;
position: static !important;
margin: 0 auto;
}
.label_skitter_container {
width: 1180px !important;
position: absolute !important;
top: 115px;
text-align: right;
}
.slidedescription {
float: right;
margin-top: 0 !important;
}
/* SHOWCASE */
#jf-showcase {
background: url(../images/middle.png) repeat-x left bottom;
margin-top: -17px;
position: relative;
z-index: -1;
padding: 24px 0;
text-align: justify;
}
#jf-showcase h3 {
font-size: 18px;
font-weight: bold;
margin: 0 0 5px;
}
#jf-showcase p {
margin: 0;
}
#jf-showcase .jf-block {
padding-left: 32px;
}
#showcase-1 .jf-block {
background: url(../images/icon1.png) no-repeat;
}
#showcase-2 .jf-block {
background: url(../images/icon2.png) no-repeat;
}
#showcase-3 .jf-block {
background: url(../images/icon3.png) no-repeat;
}
#showcase-4 .jf-block {
background: url(../images/icon4.png) no-repeat;
}
/* CONTENT */
#jf-content {
padding: 15px 0;
}
/* COM_CONTENT */
.items-leading h2 a, .item-page h2 a {
color: #2d2d2d;
}
.categories-list > div {
border-bottom: 1px solid #ededed;
padding: 20px 0;
}
.categories-list .item-image {
float: left;
margin: 0 20px 0 0;
}
.categories-list .item-image img {
width: 150px;
}
.categories-list .item-title {
display: block;
font-size: 20px;
font-weight: bold;
margin: 0 0 20px;
}
.categories-list .item-title a {
color: #2d2d2d;
}
.categories-list .category-readmore a, .readmore a {
background: none repeat scroll 0 0 #46962b;
border-radius: 5px;
color: #fff;
float: right;
font-weight: bold;
padding: 6px 25px;
}
.category-desc {
margin: 0 0 20px;
}
.items-row .item {
border-bottom: 1px solid #ededed;
padding: 20px 0;
}
.items-leading h2, .items-row .item h2 {
font-size: 20px;
font-weight: bold;
text-transform: none;
}
.items-row .item h2 a {
color: #2d2d2d;
}
.img-intro-left {
float: left;
margin: 0 20px 0 0;
}
.img-intro-left img {
width: 150px;
}
.item-separator {
clear: both;
}
.item-page .article-info.below {
border-top: 1px solid #ededed;
padding-top: 20px;
}
.item-page .article-info.above {
border-bottom: 1px solid #ededed;
padding-bottom: 20px;
}
.blog-featured .readmore a {
float: left;
}
.icons .dropdown-menu li {
display: inline-block;
*display: inline;
zoom: 1;
}
.icons .dropdown-menu li a {
display: block;
height: 23px;
width: 23px;
text-indent: -9999em;
}
.icons .dropdown-menu li.email-icon a {
background: url("../images/system/email.gif") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.icons .dropdown-menu li.print-icon a {
background: url("../images/system/print.gif") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.pagination {
font-size: 12px;
margin: 24px 0 4px;
padding: 8px 0;
}
div.pagination ul {}
div.pagination ul li {display:inline;margin:0 8px 0 0;text-align:center}
div.pagination ul li a, div.pagination ul li span {line-height:28px;color:#fff;display:inline-block;*display:inline;zoom:1;height:28px;width:28px;background-color:#313131;border-radius:3px;}
div.pagination ul li.pagination-start a,
div.pagination ul li.pagination-end a,
div.pagination ul li.pagination-start span,
div.pagination ul li.pagination-end span {width: auto;padding:0 10px;}
div.pagination ul li span {background-color:#46962b;}
div.pagination ul li a:hover {background-color:#7d7d7d;}
/* WEBLINKS */
table.weblinks, table.category {
font-size: 1em;
margin: 10px 10px 20px 0;
width: 100%;
}
table.weblinks td, table.category td {
padding: 7px 10px;
}
table.weblinks td.hits, table.category td.hits {
padding: 7px 30px;
}
table.weblinks p, table.category p {
margin: 0;
}
table.weblinks a, table.category a {
font-weight: bold;
}
tr.odd, .cat-list-row1 {
background-color: #f9f9f9;
}
/* PORTFOLIO */
#filters {
margin: 0 0 25px;
}
#filters li {
float: left;
margin: 5px 5px 0 0;
}
#filters li a {
background-color: #333;
color: #fff;
display: block;
font-weight: bold;
padding: 6px 12px;
}
#filters li a:hover, #filters li a.selected {
background: #46962b url(../images/arrow-down.png) no-repeat bottom center;
padding: 6px 12px 11px;
}
/**** Isotope ****/
.itemListIsotope {
margin: 0 -10px;
}
.itemListIsotope div.itemContainer {
float: none;
}
.width4 {
width: 25%;
}
.width3 {
width: 33.33%;
}
.width2 {
width: 50%;
}
/* LOGIN */
.login form {
border-bottom: 1px solid #ededed;
margin-bottom: 25px;
padding-bottom: 20px;
}
.form-horizontal .control-group:before, .form-horizontal .control-group:after {
content: "";
display: table;
line-height: 0;
}
.form-horizontal .control-group:after {
clear: both;
}
.form-horizontal .control-group {
margin-bottom: 20px;
}
.form-horizontal .control-label {
float: left;
padding-top: 4px;
width: 180px;
}
.form-horizontal input[type=checkbox] {
margin: 5px 0 0;
}
.form-horizontal .controls {
margin-left: 180px;
}
.profile-edit form#member-profile fieldset dt, .registration form#member-registration fieldset dt {
padding: 12px 5px 10px 0;
width: 13em;
float: left;
clear: left;
}
.profile-edit form#member-profile fieldset dd, .registration form#member-registration fieldset dd {
float: none;
padding: 10px 0;
}
/* CONTACT */
.contact-details {
margin: 65px 0 50px;
}
.contact-details .contact-module {
float: left;
width: 25%;
}
.contact-details .jicons-icons {
background-color: #46962b;
border-radius: 50%;
float: left;
margin-right: 15px;
line-height: 50px;
height: 50px;
width: 50px;
text-align: center;
}
.contact-details strong, .contact-details .contact-phone span, .contact-details .contact-fax span, .contact-details .contact-email span {
display: block;
}
address {
font-style: normal;
}
/* SEARCH */
.searchintro {
font-weight: normal;
margin: 20px 0;
}
.only, .phrases {
border: 1px solid #ededed;
padding: 15px;
}
legend {
padding: 3px 5px;
}
.phrases-box {
float: left;
width: 60%;
}
.phrases-box {
float: left;
width: 60%;
}
fieldset.only label, fieldset.phrases label {
margin: 0 10px 0 0;
}
dl.search-results dt.result-title {
font-weight: bold;
padding: 15px 0 5px;
}
/* RIGHT */
#jf-sidebar .moduletable {
border-bottom: 1px solid #ededed;
padding-bottom: 20px;
margin-top: 18px;
}
#jf-sidebar h3 {
font-size: 18px;
text-transform: uppercase;
}
#jf-sidebar p {
margin-bottom: 0;
}
div.k2ItemsBlock ul li div.moduleItemText {
overflow: hidden;
}
#jf-sidebar div.k2ItemsBlock ul li div.moduleItemIntrotext {
font-size: 12px;
}
#jf-sidebar div.k2ItemsBlock ul li span.moduleItemDateCreated {
font-style: italic;
}
#jf-sidebar div.k2ItemsBlock ul li a.moduleItemComments {
font-size: 12px;
font-weight: bold;
}
/* BOTTOM CONTENT */
#jf-bottom-content {
margin-top: 30px;
}
#jf-bottom-content .jf-block {
border-top: 1px solid #ededed;
padding: 20px 0;
}
#jf-bottom-content h3 {
font-size: 24px;
text-transform: uppercase;
}
#jf-bottom-content div.k2ItemsBlock ul {
margin: 0 -10px;
}
#jf-bottom-content div.k2ItemsBlock ul li {
float: left;
width: 25%;
}
#jf-bottom-content div.k2ItemsBlock ul li.clearList {
float: none;
}
#jf-bottom-content div.k2ItemsBlock ul li .moduleItemView {
margin: 10px;
}
#jf-bottom-content div.k2ItemsBlock ul li a.moduleItemImage img {
float: none;
width: 100% !important;
}
#jf-bottom-content div.moduleItemText {
border: 1px solid #ededed;
margin-top: 1px;
padding: 12px 18px;
}
#jf-bottom-content div.moduleItemText p {
margin: 0;
}
/* BOTTOM */
#jf-bottom {
background: #303030;
color: #fff;
padding: 35px 0;
}
#jf-bottom h3 {
font-size: 18px;
text-transform: uppercase;
}
#jf-bottom div.k2ItemsBlock ul li {
background-color: #545454;
margin: 0 0 8px;
padding: 10px 25px;
}
#jf-bottom div.k2ItemsBlock ul li a.moduleItemTitle {
color: #fff;
}
/* FOOTER */
#jf-footer {
color: #ababab;
padding: 90px 0 35px;
text-align: center;
}
#jf-footer h3 {
color: #fff;
font-size: 72px;
text-transform: none;
}
#jf-footer li {
display: inline-block;
font-size: 36px;
}
#jf-footer li strong {
color: #247d99;
}
#jf-footer .copyright {
margin-top: -18px;
}
#jf-footer .copyright p {
margin: 0;
}
#jf-footer .copyright a {
color: #303030;
font-weight: bold;
}
#backtotop {
background: url(../images/back-to-top.png) no-repeat;
display: inline-block;
*display: inline;
zoom: 1;
margin-bottom: 60px;
height: 36px;
width: 36px;
text-indent: -9999em;
}
/* K2 */
div.itemRelated span.itemRelImage {
display: block;
height: 140px;
overflow: hidden;
}
.form-right {
float: right;
}
.form-left {
float: left;
}
/* Bootstrap Css Map Fix*/
#googleMap img {
max-width: none;
}
/* Bootstrap Css Map Fix*/
#googleMap label {
width: auto; display:inline;
}
#contact-form label#jform_contact_name-lbl {
display: block;
margin: 30px 0 0;
}
#contact-form label#jform_contact_email-lbl{
display: block;
margin: 30px 0 0;
}
#contact-form label#jform_contact_email_copy-lbl {
display: inline-block;
margin: 30px 0 0;
}
#contact-form label#jform_contact_message-lbl {
display: block;
margin: 30px 0 0;
}
#contact-form input#jform_contact_name, #contact-form input#jform_contact_email {
display: block;
margin: 0;
width: 432px;
}
#contact-form textarea {
height: 120px;
width: 432px;
}
.contact-miscinfo p {
margin: 0;
}
input.invalid, textarea.invalid {
border: 1px solid #CF1919;
}
/* #Base 1200 Grid
================================================== */
.jf-grid-1 {width: 100px;}
.jf-grid-2 {width: 200px;}
.jf-grid-3 {width: 300px;}
.jf-grid-4 {width: 400px;}
.jf-grid-5 {width: 500px;}
.jf-grid-6 {width: 600px;}
.jf-grid-7 {width: 700px;}
.jf-grid-8 {width: 800px;}
.jf-grid-9 {width: 900px;}
.jf-grid-10 {width: 1000px;}
.jf-grid-11 {width: 1100px;}
.jf-grid-12 {width: 1200px;}
.jf-block {
margin: 10px;
}
.jf-block:after {
clear: both;
content: "";
display: table;
}
@media only screen and (min-width: 960px) and (max-width: 1199px) {
.main {width: 960px;}
.jf-grid-1 {width: 80px;}
.jf-grid-2 {width: 160px;}
.jf-grid-3 {width: 240px;}
.jf-grid-4 {width: 320px;}
.jf-grid-5 {width: 400px;}
.jf-grid-6 {width: 480px;}
.jf-grid-7 {width: 560px;}
.jf-grid-8 {width: 640px;}
.jf-grid-9 {width: 720px;}
.jf-grid-10 {width: 800px;}
.jf-grid-11 {width: 880px;}
.jf-grid-12 {width: 960px;}
.jflabel_skitter {
width: 960px !important;
}
.label_skitter_container {
width: 960px !important;
top: 50px;
}
div.itemCommentsForm form input.inputbox, div.itemCommentsForm form textarea.inputbox {
width: 430px;
}
}
/* #Tablet (Portrait)
================================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.main {width: 768px;}
.jf-grid-1 {width: 64px;}
.jf-grid-2 {width: 128px;}
.jf-grid-3 {width: 192px;}
.jf-grid-4 {width: 256px;}
.jf-grid-5 {width: 320px;}
.jf-grid-6 {width: 384px;}
.jf-grid-7 {width: 448px;}
.jf-grid-8 {width: 512px;}
.jf-grid-9 {width: 576px;}
.jf-grid-10 {width: 640px;}
.jf-grid-11 {width: 704px;}
.jf-grid-12 {width: 768px;}
.jflabel_skitter {
width: 768px !important;
}
.label_skitter_container {
width: 768px !important;
top: 50px;
}
div.k2ItemsBlock ul li a.moduleItemImage img {
float: none;
}
div.itemCommentsForm form input.inputbox, div.itemCommentsForm form textarea.inputbox {
width: 330px;
}
}
/* #Mobile (Portrait)
================================================== */
@media only screen and (max-width: 767px) {
#jf-header h1#logo {
text-align: center;
}
#jf-header form {
text-align: center;
}
#jf-header .search {
float: none;
display: inline-block;
}
#navbutton {
display: block;
}
#navbutton a {
background: url("../images/collapse-icon.png") no-repeat scroll right center #f5f5f5;
border: 1px solid #bbb;
color: #5c686d;
cursor: pointer;
display: block;
font-family: amaranthregular;
font-size: 18px;
padding: 6px 10px;
}
#jf-mainnav {
padding: 20px 0;
}
#jf-mainnav ul.menu {
background-color: #f5f5f5;
border: 1px solid #bbb;
border-top: none;
display: none;
float: none;
}
#jf-mainnav ul.menu li {
float: none;
}
#jf-mainnav ul.menu li a {
background: none;
border: none;
padding: 8px 10px;
}
#jf-mainnav ul.menu li > ul {
background: none;
border: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
position: static;
}
#jf-mainnav ul.menu li.vhover > a, #jf-mainnav ul.menu li a:hover {
border: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#jf-mainnav ul.menu li ul li a {
color: #2d2d2d;
}
#jf-mainnav ul.menu li.active ul li a {
color: #2d2d2d;
}
#jf-mainnav ul.menu li ul li a:hover, #jf-mainnav ul.menu li ul li.active a {
color: #fff;
}
}
@media only screen and (min-width: 481px) and (max-width: 767px) {
body {-webkit-tap-highlight-color: transparent;}
.main {width: 480px;}
.main [class*="jf-grid"] {display: block;float: none;position: relative;width: 100%;}
#jf-top .jf-grid-6 {
float: left;
width: 240px;
}
.jflabel_skitter {
width: 480px !important;
}
.label_skitter_container {
width: 480px !important;
top: 0;
}
#jf-bottom-content div.k2ItemsBlock ul li, div.itemRelated ul li {
width: 50%;
}
.form-left, .form-right {
float: none;
}
div.itemCommentsForm form input.inputbox, div.itemCommentsForm form textarea.inputbox {
width: 417px;
}
.contact-details .contact-module {
width: 100%;
margin: 0 0 20px;
}
.width4, .width3, .width2 {
width: 50%;
}
}
/* #Mobile (Landscape)
================================================== */
@media only screen and (max-width: 480px) {
body {-webkit-tap-highlight-color: transparent;}
.main {width: 95%;}
.main [class*="jf-grid"] {display: block;float: none;position: relative;width: 100%;}
#jf-callto, #jf-social {
text-align: center;
}
#jf-social ul {
float: none;
display: inline-block;
}
.jflabel_skitter {
width: 95% !important;
}
.label_skitter_container {
width: 95% !important;
top: 0;
}
#jf-bottom-content div.k2ItemsBlock ul li, div.itemRelated ul li {
width: 100%;
}
.form-left, .form-right {
float: none;
}
div.itemCommentsForm form input.inputbox, div.itemCommentsForm form textarea.inputbox {
width: 240px;
}
.contact-details .contact-module {
width: 100%;
margin: 0 0 20px;
}
.width4, .width3, .width2 {
width: 100%;
}
}