Search code examples
cssdrop-down-menuhoverfixedsubmenu

How to create a FIXED submenu (the dropdown menu should be displayed permanently)


I have a menu and a submenu. The submenu is only displayed when hovering over it. QUESTION 1: I want it to be displayed permanently. QUESTION 2: I would like it to be displayed horizontally (and not vertically as it is now). To see what I mean, go to http://appartement-met-zeezicht.be and hover on "English". What is displayed under "English" should be displayed permanently, pereferably in a horizontal (and not vertical) way. Thanks a lot!!

/SUBMENU/

topmenu ul li ul{ position:absolute;width:150px; z-index:999999; padding-left:0; margin-left:-10px; margin-top:24px; display:none;}

topmenu ul li ul li{ float:none; margin:0; padding:10px 0px; text-align:center; background:#302f2f url(images/pattern.png) repeat; display:block; border-bottom: 1px solid #333; height:auto;}

topmenu ul > li ul li:hover{ background:#2bb975 url(images/pattern.png) repeat;}

topmenu ul li ul li a{ font-size:14px; font-weight:normal; padding:4px;}

topmenu ul li ul li ul{left: 100%; margin-top:-27px; float:none; margin-left:0px;}

.tinynav, .tinynav1{ display:none;}


Solution

  • EDIT: it seems that some Javascript is overwriting the CSS, you can try to add this to style.css:

    #topmenu ul li ul, #topmenu li:hover > ul {
        display: block !important;
    }
    

    For the second question: in your style.css find the parts below /MENU/ and /SUBMENU/. Delete the next lines below those comments and paste this code instead:

    /*MENU*/
    #menu_wrap{width:100%; float:left; background:#302f2f url(images/menu_wrap.png) repeat;}
    .is-sticky{ width:1000px!important;}
    #topmenu{text-align:center;}
    .menu-header{margin:auto; padding:0; display:block;}
    #topmenu ul{ margin:0; padding:0;}
    #topmenu ul li{list-style-type:none; display:inline-block; margin-top:0px;padding:25px 15px;}
    #topmenu li a{ font-size:18px; color:#fff;}
    #topmenu ul > li:hover{  background:url(images/transblack.png) repeat;}
    #menu-icon{display:none;}
    
    /*SUBMENU*/
    #topmenu ul li ul{ position:absolute;width:auto; z-index:999999;  padding-left:0; margin-left:-10px;  margin-top:24px; display:none;}
    #topmenu ul li ul li{ float:left; margin:0; padding:10px 0px; text-align:center; background:#302f2f url(images/pattern.png) repeat;  display:block; border-bottom: 1px solid #333; height:auto;}
    #topmenu ul > li ul li:hover{ background:#2bb975 url(images/pattern.png) repeat;}
    #topmenu ul li ul li a{ font-size:14px; font-weight:normal; padding:4px;}
    #topmenu ul li ul li ul{left: 100%; margin-top:-27px; float:none; margin-left:0px;}