HTML/CSS - dropdown-meny försvinner för snabbt + transitions
Hej!
Jag har ett par frågor.
fråga 1:
Min dropdown-meny försvinner för snabbt när man hovrar på menyknappen "Start". När muspekaren lämnar menyknappen så försvinner alltså dropdown-menyn. Kan man sätta så att dropdown-menyn försvinner först efter en delay? transition-delay ?
fråga 2:
Samt, när dropdown menyn visas när man hovrar med muspekaren på menyknappen "Start", går det att göra så att dropdown-menyn expanderas nedåt i X och Y-led på ca 1sek eller så?
fråga3 :
Jag har flera menyer, nedan så har jag dock bara listat en av dom, men det kommer flera stycken i följd i sidleds. Om jag t.ex befinner mig med muspekaren inuti dropdownlistan på ett av elementen så vill jag att menyknappen "Start" ska få en blå underline. Det ska tydligen finnas en automatiskt-genererad .class i wordpress som heter ".current-menu-item a" som verkar passa just för detta, men jag har helt enkelt inte den klassen med i källkoden som wordpress genererar åt mig. Och detta ägnade jag en hel dag på att försöka få till förgäves.
här kommmer min HTML-kod:
HTML wordpress:
<nav id="main-nav">
<div class="dropdown">
<a href="<?php echo get_site_url();?>">
<span class="dropbtn">Start</span>
</a>
<div class="dropdown-content">
<?php wp_nav_menu(array( 'theme_location' => 'main-nav-start' )); ?>
</div>
</div>
</nav>
efter wordpress genererat sin kod:
<nav id="main-nav">
<div class="dropdown">
<a href="http://localhost">
<span class="dropbtn">Start</span>
</a>
<div class="dropdown-content">
<div class="menu-mainmeny-start-container">
<ul id="menu-mainmeny-start" class="menu">
<li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"><a href="http://localhost/test1/">test1</a></li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://localhost/test2/">test2</a></li>
<li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-64"><a href="http://localhost/test3/">test3</a></li>
<li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55"><a href="http://localhost/test4/">test4</a></li>
</ul>
</div>
</div>
</div>
</nav>
min CSS:kod
#main-nav
{
display:inline;
position:absolute;
padding-top:2.5vh;
}
#main-nav ul
{
list-style: none;
font-size:2vh;
width:12.7vw;
}
.dropbtn /* Dropdown Button */
{
margin-top:0;
color: black;
padding: 0.6vw;
font-size: 0.8vw;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
/*overflow: hidden;*/
border-top:0;
border-left:0;
border-right:0;
z-index:2;
}
.dropbtn:hover
{
background:#f0f8fd;
border-style:solid;
border-bottom:2px solid blue;
}
.dropdown a:link
{
text-decoration: none;
}
.dropdown-content /* Dropdown Content (Hidden by Default) */
{
display: none;
position: absolute;
background-color: #f8f8f8;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);
margin-top:2.6vh;
}
.dropdown-content a /* Links inside the dropdown */
{
color: black;
padding-top: 0.5vh;
padding-bottom: 0.5vh;
padding-right: 0.5vw;
text-decoration: none;
display: block;
margin-left:-1.5vw;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.dropdown-content a:hover /* Change color of dropdown links on hover */
{
background-color: lightblue;
}
.dropdown:hover .dropdown-content /* Show the dropdown menu on hover */
{
display: block;
}
.dropdown
{
position: relative;
display: inline-block;
border-style:solid;
border-image:linear-gradient(transparent, gray) 0.5;
border-width: thin;
padding-right:0.2vw;
border-bottom:0;
border-left:0;
border-top:0;
}
.current-menu-item a
{
background:lightblue;
}
Jag har suttit med detta nu hur länge som helst, i flera dagar, men jag får absolut inte till någonting alls.
