Jump to content

Drop Down Menu Hover


jp

Recommended Posts

you cold just add a secondary one witch this would be the codes for that its much easier

 <div class="dropdown">
  <button class="dropbtn">Social Links</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div> 

and than you could add to the custom css

 

 /* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
} 

i am still working on this just to get it 2 work and the sizie of the secondary bar but it coming along

if you need it smaller just change

 /* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    font-size: 12px;
    border: none;
    cursor: pointer;
}

i set it around 10 x 12

hover.png.3d8192ad37e07d2922e2bc8b70798e42.png

Link to comment
Share on other sites

/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: skyblue;
}

.active {
    background-color: #4CAF50;
}


.ipsTabs_activeItem:hover{
background: #003765!important ;  
color: green!important    
} 

a.ipsTabs_activeItem,
.ipsTabs_activeItem {
background: green;
}


.ipsTabs_item {
background: green;
}

here is the codes to hover user title bar

for the other im still working on the hover rather than cliks

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...