Adding dropdown to menu

HTML & CSS
1

Hello i have this code for the navigation menu but it’s not working as i want it to. I want the sub menu to lineup exactly under the ADMIN menu link:

<div class='rmm' data-menu-title = "Navigation" data-menu-style = "custom">
<ul>
<li><a href="./menu.html">HOME</a></li>
<li><a href="./menu2.html">CLIENTS</a></li>
<li><a href="./menu3.html">PROJECTS</a></li>
<li><a href="./menu4.html">CONTACT US</a></li>
<li><a href="./menu5.html">WEBSHOP</a></li>
<li><a href="./menu6.html">ADMIN</a>
<ul>
<li>
<a href="#">Audiobooks</a>
</li>
<li>
<a href="#">Cookbooks</a>
</li>
<li>
<a href="#">Catalogs</a>
</ul>
</li>
</li>
</ul>
</div>

<!--Navigation/Menu End-->

And then i have this css code for the sub/dropdown menu:

/* Sublevel Menu Start */

.rmm li ul {
display:none !important ;
position:relative;

}
.rmm li:hover ul{
background:#2F2F2F;
display:inline-block !important;
height:auto!important;
width:166px !important;
position:relative !important;
top:48px;
}

.rmm li:hover ul li a{
width:100%;
clear: both;
}

/* Sublevel Menu End */

Live demo menu here (hover the ADMIN link): http://test3.fcab.se/myextensions/responsive_menu/menu_test/menu.html

2

No offense, but that entire demo doesn’t really do anything correctly. You’d be better off redoing everything there. Have you looked at tutorials for dropdown menus? The dropdown part usually is position:absolute; and hidden off screen. Don’t use display:none; since screen readers get screwed.

http://codepen.io/ryanreese09/pen/WveEjK

This is a basic one I took from somewhere and cleaned up slightly. This is somehting more of what you should be doing.

3

Yes you are proberly right, but for reasos that are hard to explain i have to get this code to work.
Thank you.

4

I mean, if you’re forced…

  1. Change this to inline-block and add position:relative;
.rmm .rmm-main-list li{display:inline-block;position:relative;}
  1. Add this in
.rmm ul li ul {
position: absolute;
display: block!important;
left: -999rem;
}
  1. Add this in
.rmm ul li:hover ul {
left: 0;
position:absolute!Important;
}

Start from there I guess.

5

Thank you for your help, this will get me started.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.