Skip to main content
J
jeanlouis83
Known Participant
May 30, 2017
Answered

menu with submenu

  • May 30, 2017
  • 1 reply
  • 3052 views

Hello
I want to create a menu with a sub menu. I have been on google but I can not find a solution. Have a solution or tutorial to create a menu and sub menu like this

HTML code

<!doctype html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />

<link rel="icon" type="image/png" href="images/favicon.png" />
<title>menu</title>


<link rel="stylesheet" href="css/styles.css">

<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>


<div class="row">

<div class="col">


  <!-- Affichage menu et sous menu -->  

   <nav class="style-nav">

   <ul>

   <li><a href="#">Page1</a></li>

   <li class="current"><a href="#">Page2</a>

  <ul class="sous-menu">

  <li><a href="#">sousPage2.1</a></li>

  <li><a href="#">sousPage2.2</a></li>

  </ul>

</li>

   <li><a href="#">Page3</a></li>

   <li><a href="#">Page4</a></li>

   </ul>

</nav>

</div>

</div>


<hr>



</body>

</html>

CSS code

@charset "UTF-8";

/* CSS Document */

html,

html * {

padding: 0;

margin-top: 0px;

margin-right: 0px;

margin-left: 0px;

margin-bottom: 0px;

font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";

background-position: 0% 0%;

}

body {

margin-left: auto;

margin-right: auto;

background: #FFFFFF;

font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

}

.style-nav ul {

list-style-type: none;

}

.style-nav ul li a {

text-decoration: none;

color: #FFFFFF;

text-align: center;

display: block;

text-transform: inherit;

padding: 5px 25px;

background-color: #888;

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: 14px;

/*ul.white-space-fix li */

margin-right: -5px;

}

.style-nav ul li a:hover {

color: #FFFFFF;

background-color: #444;

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

}

.style-nav .current a {

background-color: #444;

}

.sous-menu {

display: none;

}

.sous-menu li:hover .sous-menu{

display: inline;

position: absolute;

z-index: 100000;

}

.col {

width: 100%;

}

.row:before, .row:after {

content: "";

display: table;

}

.row:after {

clear: both;

}

/*Tablet View*/

@media (min-width: 768px){

body {

max-width: 778px;

}

.style-nav ul li {

display: inline-block;

}

.style-nav ul {

text-align: center;

}

}

/*Desktop View*/

@media (min-width: 1024px){

body {

max-width: 1200px;

}

.style-nav {

padding: 20px 0px 0px 0px;

float: right;

}

.style-slogan {

float: right;

width: 500px;

padding-top: 20px;

}

}

Thank you for your help

    This topic has been closed for replies.
    Correct answer Nancy OShea

    Start with the HTML code.  Make an unordered list with sub-lists like this:

    <nav>

    <ul>

    <li><a href="#">Menu Item1 &#9660;</a>

        <ul>

        <li><a href="#">Sub_menu1a</a></li>

        <li><a href="#">Sub_menu1b</a></li>

        </ul>

    </li>

    <li><a href="#">Menu Item2 &#9660;</a>

        <ul>

        <li><a href="#">Sub_menu2a</a></li>

        <li><a href="#">Sub_menu2b</a></li>

        <li><a href="#">Sub_menu2c</a></li>

        <li><a href="#">Sub_menu2d</a></li>

        </ul>

    </li>

    <li><a href="#">Menu Item3</a></li>

    </ul>

    </nav>

    Next, work on the CSS code.

    /* BEGIN HORIZONTAL DROP-MENU */

    nav {

        position: relative;

        width: 100%;  /**adjust width as needed**/

        margin: 0 auto;

        padding: 0;

        text-align: center;

        z-index:1000;

    }

    nav ul {

        margin: 0;

        padding: 0

    }

    nav li {

        list-style: none;

        font-size: 12px;

        float: left;

        text-align: center;

    }

    /**top level menu**/

    nav li a {

        display: block;

        text-decoration: none;

        margin-right: 2px;   /* space between links */

        width: 9em;   /* adjust as needed or use auto */

        padding: 6px 15px;

        font-weight: bold;

        line-height: 2em;

        color:#1e5799;

        border: 1px solid #FFF;

        background:#C7D5E3;

    }

    /**top menu style on mouse over**/

    nav li:hover > a {

        color: #FFF;

        background: #1e5799;

    }

    /**sub-menu**/

    nav li ul {

        display: none;

        text-align: center;

        margin: 0;

        padding: 0 1em;

        background:#C7D5E3;

        font-weight:normal;

        font-style:oblique;

    }

    /**sub-menu, help for older IE**/

    nav li:hover ul, nav li.hover ul {

        display: block;

        position: absolute;

        padding: 0;

    }

    nav li:hover li,

    nav li.hover li {float: none;}

    /**drop-menu style**/

    nav li:hover li a, nav li.hover li a {

        width: 9em;  /* adjust width as needed or use auto */

        margin-top: 0;

        line-height:1.25em;

        font-weight:normal;

        border:none;

    }

    /**drop-menu style on mouse over**/

    nav li li a:hover {

        background:#D3E1B7;

        color: #004A43;

    }

    This menu is not responsive.   If you wish make it responsive on mobile devices, look at MeanMenu -- a jquery plugin.

    https://www.meanthemes.com/plugins/meanmenu/

    Nancy

    1 reply

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    May 30, 2017

    If you want a responsive menu, try this Bootstrap example.

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Bootstrap Starter</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!--Latest compiled and minified Bootstrap-->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style>

    body {

        padding-top: 78px;

        font-size: 125%

    }

    </style>

    </head>

    <body>

    <!--BEGIN NAVBAR-->

    <nav class="navbar navbar-inverse navbar-fixed-top">

    <div class="container-fluid">

    <div class="navbar-header">

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

    <span class="icon-bar"></span>

    <span class="icon-bar"></span>

    <span class="icon-bar"></span>

    </button>

    <a class="navbar-brand" href="Index.html">WebSiteName</a> </div>

    <div class="collapse navbar-collapse" id="myNavbar">

    <ul class="nav navbar-nav">

    <li class="active"><a href="index.html" class="glyphicon glyphicon-home"> Home</a></li>

    </ul>

    <ul class="nav navbar-nav navbar-right">

    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown 1 <span class="caret"></span></a>

    <ul class="dropdown-menu">

    <li><a href="#">submenu 1-1</a></li>

    <li><a href="#">submenu 1-2</a></li>

    <li><a href="#">submenu 1-3</a></li>

    </ul>

    </li>

    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown 2 <span class="caret"></span></a>

    <ul class="dropdown-menu">

    <li><a href="#">submenu 2-1</a></li>

    <li><a href="#">submenu 2-2</a></li>

    <li><a href="#">submenu 2-3</a></li>

    </ul>

    </li>

    <li><a href="#">Menu 3</a></li>

    <li><a href="#">Menu 4</a></li>

    <li><a href="#">Menu 5</a></li>

    </ul>

    </div>

    </div>

    <!--end top navbar--></nav>

    <div class="container">

    <div class="row">

    PAGE CONTENT STARTS HERE...

    <!--end row--></div>

    <!--end container--></div>

    <!--Compiled & minified jQuery-->

    <script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous">

    </script>

    <!--Latest compiled & minifed Bootstrap-->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </body>

    </html>

    Nancy O'Shea— Product User & Community Expert
    J
    jeanlouis83Author
    Known Participant
    May 30, 2017

    Thanks but I'm a beginner and start with bootstrap seems a bit complicated. I prefer to compose myself the code css to understand well how it works. And I can not find a tutorial that explains well what each command allows to do

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    May 30, 2017

    Start with the HTML code.  Make an unordered list with sub-lists like this:

    <nav>

    <ul>

    <li><a href="#">Menu Item1 &#9660;</a>

        <ul>

        <li><a href="#">Sub_menu1a</a></li>

        <li><a href="#">Sub_menu1b</a></li>

        </ul>

    </li>

    <li><a href="#">Menu Item2 &#9660;</a>

        <ul>

        <li><a href="#">Sub_menu2a</a></li>

        <li><a href="#">Sub_menu2b</a></li>

        <li><a href="#">Sub_menu2c</a></li>

        <li><a href="#">Sub_menu2d</a></li>

        </ul>

    </li>

    <li><a href="#">Menu Item3</a></li>

    </ul>

    </nav>

    Next, work on the CSS code.

    /* BEGIN HORIZONTAL DROP-MENU */

    nav {

        position: relative;

        width: 100%;  /**adjust width as needed**/

        margin: 0 auto;

        padding: 0;

        text-align: center;

        z-index:1000;

    }

    nav ul {

        margin: 0;

        padding: 0

    }

    nav li {

        list-style: none;

        font-size: 12px;

        float: left;

        text-align: center;

    }

    /**top level menu**/

    nav li a {

        display: block;

        text-decoration: none;

        margin-right: 2px;   /* space between links */

        width: 9em;   /* adjust as needed or use auto */

        padding: 6px 15px;

        font-weight: bold;

        line-height: 2em;

        color:#1e5799;

        border: 1px solid #FFF;

        background:#C7D5E3;

    }

    /**top menu style on mouse over**/

    nav li:hover > a {

        color: #FFF;

        background: #1e5799;

    }

    /**sub-menu**/

    nav li ul {

        display: none;

        text-align: center;

        margin: 0;

        padding: 0 1em;

        background:#C7D5E3;

        font-weight:normal;

        font-style:oblique;

    }

    /**sub-menu, help for older IE**/

    nav li:hover ul, nav li.hover ul {

        display: block;

        position: absolute;

        padding: 0;

    }

    nav li:hover li,

    nav li.hover li {float: none;}

    /**drop-menu style**/

    nav li:hover li a, nav li.hover li a {

        width: 9em;  /* adjust width as needed or use auto */

        margin-top: 0;

        line-height:1.25em;

        font-weight:normal;

        border:none;

    }

    /**drop-menu style on mouse over**/

    nav li li a:hover {

        background:#D3E1B7;

        color: #004A43;

    }

    This menu is not responsive.   If you wish make it responsive on mobile devices, look at MeanMenu -- a jquery plugin.

    https://www.meanthemes.com/plugins/meanmenu/

    Nancy

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices