• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Navigation Submenus help

Explorer ,
Nov 15, 2012 Nov 15, 2012

Copy link to clipboard

Copied

I have a navigation menu with the main links then I have a submenu under some of those links, but now I need to create a submenu within the submenu. Picture posted below. If you need any coding or anything to understand more please let me know. Thanks.

Submenu.jpg

Views

554

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Nov 19, 2012 Nov 19, 2012

Copy link to clipboard

Copied

You just need to adjust your CSS. Perhaps you can use something like http://www.htmldog.com/articles/suckerfish/dropdowns/. You can see an example of a 3 level menu here http://www.htmldog.com/articles/suckerfish/dropdowns/example/bones3.html

-m

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 27, 2012 Nov 27, 2012

Copy link to clipboard

Copied

LATEST

Mario,

the web site was very helpful, I did what it told me to do when creating the 3rd submenu, but for some reason now my menu is kind of off, it doesn't line up with the link DW cable which is in the picture above, instead of kind of sit right below it sort of in between DW cable and SR cable how do I get it to actually go across and line up? CSS and picture below. Thanks you.

ul.topmenu, ul.topmenu ul {

  display: block;

  margin: 0;

  padding: 0;

  line-height: 18px;

}

ul.topmenu li {

display: inline;

  list-style: none;

  margin: 0;

  padding-right: 0;

}

ul.topmenu li ul {

  visibility: hidden;

  margin: 0px;

  padding: 0px;

  display:list-item;

  }

 

  ul.topmenu li.submenu:hover ul {

      visibility: visible;

      display:list-item;

}

#navmenu {

    background:none repeat scroll 0 0 #737373;

    margin: 0;

    overflow:hidden;

}

#navmenu ul {

    display:inline;

    margin: 0;

    padding: 0;

    list-style-type: none;

    list-style-image: none;

    text-align: left;

}

#navmenu li {display: block; float:left; width: 11em; padding-right: 5px;}

#navmenu ul li a:hover, #navmenu ul li a:active, #navmenu ul li ul li a:hover, #navmenu ul li ul li a:active{

    color: red;

}

#navmenu ul li ul {

    background: none repeat scroll 0 0 #737373;

    left: -999em;

    position: absolute;

    width: 11em;

    z-index: 333;

}

#navmenu ul li:hover ul{

    left:auto;

}

#navmenu li ul li {float: none; padding: none;}

#navmenu ul li a {display: block; text-decoration:none;  margin: 0px;

    padding: 5px 20px 5px 20px; color: white;

    background: #737373;}

#navmenu ul li a:hover {

    color: Red;

    background:#CCC;

}

    

#navmenu ul ul li a {padding: 5px 5px;}

#navmenu ul ul {display:block; margin-top: 0px;}

#navmenu ul ul li {margin-top: 10px;}

#navmenu li ul ul {

    margin: -1em 0 0 10em;

    background: none repeat scroll 0 0 #737373;

    position: absolute;

    width: 11em;

    z-index: 333;

    float: left;

}

#navmenu, #navmenu ul {

    padding: 0;

    margin: 0;

    list-style: none;

}

#navmenu li:hover ul ul, #navmenu li.sfhover ul ul {

    left: -999em;

}

#navmenu li:hover ul, #navmenu li li:hover ul, #navmenu li.sfhover ul, #navmenu li li.sfhover ul {

    left: auto;

}

#navmenu li:hover ul ul, #navmenu li:hover ul ul ul, #navmenu li.sfhover ul ul, #navmenuli.sfhover ul ul ul {

    left: -999em;

}

#navmenu li:hover ul, #navmenu li li:hover ul, #navmenu li li li:hover ul, #navmenu li.sfhover ul, #navmenu li li.sfhover ul, #navmenu li li li.sfhover ul {

    left: auto;

}

submenu.jpg

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines