Drupal Technical

[Drupal] Pure CSS multilevel dropdown menu for Drupal

Tintu.manuel | | 2 min read

It is very good if we can create a pure CSS multilevel drop-down menu in Drupal. We can simply avoid adding additional modules or jQuery for the multilevel drop-down menus. As we had a requirement to create a multilevel drop-down menu without using jQuery, we created it in pure css. And it works well in different browsers.

We created this menu as main menu for the header navigation part. And there is a region for the header part called "region-header" and it wrapped in a class called .header-wrapper. Also Drupal provides a class called 'menu' for ul. So we had to define the class-name along with the ul.

See the CSS code for drop-down menu :

By using display:none property, we can hide the sub menu links while not hovering. And we had set margin:0px to remove ul's default margins.

.header-wrapper .region-primarynav ul.menu ul.menu {
    display: none;margin:0px;
}

Here we used display:block to show the submenu links while hovering on main ul.

.header-wrapper .region-primarynav ul.menu li:hover > ul.menu {
    display: block;
}

These are the properties we set for the main ul links. Also here we had set the position to relative, so the absolute positioned sub-menus will be positioned accordingly.

.header-wrapper .region-primarynav ul.menu {
    background: #ddd;
    border-radius: 10px 10px 10px 10px;
    display: inline-block;
    list-style: none outside none;
    padding: 0 0px;
    position: relative;
}

Here we used float:left to get horizontally and left alignment of the menu. Also we removed the default list-styles of Drupal.

.header-wrapper .region-primarynav ul.menu li {
    float: left;
    list-style:none;
    list-style-image:none;
}
.header-wrapper .region-primarynav ul.menu li:hover {
    background: -moz-linear-gradient(center top , #4F5964 0%, #5F6975 40%) repeat scroll 0 0 transparent;
}
.header-wrapper .region-primarynav ul.menu li:hover a {
    color: #FFFFFF;
}
.header-wrapper .region-primarynav ul.menu li a {
    color: #757575;
    display: block;
    padding: 15px 60px;
    text-decoration: none;
}
.header-wrapper .region-primarynav ul.menu ul.menu {
    background: none repeat scroll 0 0 #5F6975;
    border-radius: 0 0 0 0;
    padding: 0;
    position: absolute;
    top: 100%;
}
.header-wrapper .region-primarynav ul.menu ul.menu li {
    border-bottom: 1px solid #575F6A;
    border-top: 1px solid #6B727C;
    float: none;
    position: relative;
}
.header-wrapper .region-primarynav ul.menu ul.menu li a {
    color: #FFFFFF;
    padding: 15px 40px;
}
.header-wrapper .region-primarynav ul.menu ul.menu li a:hover {
    background: none repeat scroll 0 0 #4B545F;
}
.header-wrapper .region-primarynav ul.menu ul.menu ul.menu {
    left: 100%;
    position: absolute;
    top: 0;
}

And the HTML for the dropdown :

<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a>
    <ul class="menu">
      <li><a href="#">Sublevel-1</a></li>
      <li><a href="#">Sublevel-1</a></li>
      <li><a href="#">Sublevel-1</a>
        <ul class="menu">
          <li><a href="#">Sublevel-2</a></li>
          <li><a href="#">Sublevel-2</a></li>
          <li><a href="#">Sublevel-2</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Contact</a></li>
</ul>

You can add any background images or any styles for the drop-down.

 

 

Related Topics