0

Hello Im a beginner but nontheless CSS must be the most stomach turning language ever invented. So I just want the list elements of my dropdown to be displayed further below and to the left. I managed to do this with top, right but now the dropdown closes instantly . So I want it to be further to the left and not closing so fast. I tried transition delay after reading this here but it wont work. Also right does not enable me to push the dropdown list further to the left. Any help would be appreciated thank you. This thread was just closed with a reference to another thread but that did not answer my problem. The dropdown elements must be clickable and thats not the case in the referenced solution.

.carFilter889{
    display:flex;
    flex-direction:row;
    align-items: center;
    justify-content: center;
    float:left;
}

.boxyc889{
    padding:10px;
    border-top:1px solid #CCCCCC;
    border-bottom:1px solid #CCCCCC;
    border-left:1px solid #CCCCCC;
    border-right:1px solid #CCCCCC;
    border-radius:5px;
    color:black;
    display: inline-block;
    font-size:100%;
    margin:0;
    content:none;
    padding-left:20px;
    padding-right:20px;
}

.tagsxy889{
        padding-left:40px;
}
    

.boxycx889{
    align-items: center;
    justify-content: center;
}

.vcxvcx889{
    margin:0;
    align-items: center;
}
    
.tagsxy889{
    content:none;
}

.activexyz889{
    background-color: #e2f6ff;
    color:#4D4D4D!important;
}
 .dropdown{
     list-style: none;
     position:relative;
}
 .dropdown2{
     list-style: none;
     transition-delay: 5s;
     position:relative;
}
 li a{
    float:left;
}

li ul{
    display:none;
}
 li:hover ul{
     transition-delay: 5s;
    display:inline;
}

.show-hide-menu li:hover ul{
    transition-delay: 5s;
    visibility:visible;
    display:inline;
}

 li li{
    float:none;
}
 .dropdown ul{
    position:absolute;
    left:0;
    top:100%;
    background:#fff;
    padding:20px 0;
    border-bottom:3px solid #34495e;
}
 .dropdown li{
    white-space:nowrap;
}

 .dropdown li a{
    padding:10px 35px;
    font-size:13px;
    min-width:200px;
    
}

 li li a{
    float:none;
    color:white;       
    display:block;
    border-radius:3px;
    font-size:13px;
    background:#bdc3c7 !important;

}

 li li a.activexyz889{
    background-color: #e2f6ff!important;
    color:#4D4D4D!important;

}

 li li a:hover{
    background:#949DA4 !important;
}

.show-hide-menu li:hover ul{
    transition-delay: 5s;
    visibility:visible;
    display:inline;
}

.show {display: block;}

.listxy:before {
    display: block;
    content: "";
    width: 100%;
    height: 10px;
    position: absolute;
    top: -10px;
    left: 0;
}

#myUL{
    margin-top: 0;
    z-index:999;
    transition-delay: 5s;
    top: 30px;
    right:60px;
}
<div class="carFilter889">
 <p class="boxycx889">Filter:</p>
 <div class="tagsxy889">
 <span id="boxyc889" class="boxyc889"><p class="vcxvcx889"> 
    <li class="dropdown" id="dropdown">
      <a class="titel">{{titeleins}}</a>
      <ul id="myUL" style="list-style-type:none;">
        {{#if ort1}}<li><a class="listxy">{{ort1}}</a></li>{{/if}}
        {{#if ort2}}<li><a class="listxy">{{ort2}}</a></li>{{/if}}
        {{#if ort3}}<li><a class="listxy">{{ort3}}</a></li>{{/if}}
        {{#if ort4}}<li><a class="listxy">{{ort4}}</a></li>{{/if}}
        {{#if ort5}}<li><a class="listxy">{{ort5}}</a></li>{{/if}}
    </ul>
    </li></span>
 </div>
 </div>
Bitlord
  • 105
  • 6
  • Make `#myUL` a child of `{{titeleins}}` rather than a sibling. Looking for a dupe target now. – TylerH Sep 25 '20 at 14:33
  • Thanks I will try this immediately. – Bitlord Sep 25 '20 at 14:36
  • So I did make it a child and closed the a tag after closing the ul tag but the behaviour remains the same. – Bitlord Sep 25 '20 at 14:42
  • Actually I see now you have invalid markup. You cannot make block elements children of inline elements. For example you cannot have p, li, or ul be children of span. You will also need to fix that. – TylerH Sep 25 '20 at 14:46
  • ah alright guess I will have to start from scratch. The language has far too many entertainable dead ends. Thanks for the help. – Bitlord Sep 25 '20 at 14:47
  • I would try messing with the CSS only once you have the generated HTML output. For example it looks like you have PHP placeholders here. That can make it difficult sometimes because PHP can change the markup unexpectedly. – TylerH Sep 25 '20 at 14:49

0 Answers0