Le problème est le suivant, je n'arrive pas à réajuster l'espace dans ma liste contenant mon menu avec avec ses éléments:

Image of website

Je veux avoir l'espace pour afficher le fond blanc et je voudrais que la liste occupe tout l'espace disponible.

Je voudrais avoir cet effet:

entrez la description de l'image ici

Code HTML:

<nav role="navigation" class="nav-menu w-nav-menu" id="primary_nav_wrap">
      <ul>
        <li>
          <a href="index.html" class="nav-link w-nav-link w--current">Home</a>
          <ul>
            <li><a href="#">Chi siamo</a></li>
          </ul>
        </li>
        <li>
          <a href="#" class="nav-link w-nav-link">Servizi</a>
          <ul>
            <li><a href="#">Servizi mobile</a></li>
            <li><a href="#">Oscuramento vetri</a></li>
            <li><a href="#">Wrapping</a></li>
          </ul>
        </li>
        <li>
          <a href="vantaggi.html" class="nav-link w-nav-link">I vantaggi per voi</a>
        </li>
        <li>
          <a href="#" class="nav-link w-nav-link">Galleria</a>
          <ul>
            <li><a href="#">Riparazione mobile</a></li>
            <li><a href="#">Oscuramento vetri</a></li>
            <li><a href="#">Wrapping</a></li>
          </ul>
        </li>
        <li>
          <a href="contatti.html" class="nav-link w-nav-link">Contatti</a>
        </li>
      </ul>
    </nav>

Les listes sous lien sont les sous-menus.

Code CSS:

#primary_nav_wrap ul {

list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0
}

#primary_nav_wrap ul a {
  display: block;
  text-decoration: none;
  line-height: 32px;
  padding: 0 15px;
}

#primary_nav_wrap ul li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0
}

#primary_nav_wrap ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 0
}

#primary_nav_wrap ul ul li {
  float: none;
  width: 200px;
  background: #fff;
}

#primary_nav_wrap ul ul a {
  line-height: 120%;
  padding: 10px 15px;
  color: #000;
}

#primary_nav_wrap ul ul li:hover {
  background: #ffed00;
}

#primary_nav_wrap ul ul a:hover {
  color: #fff;
}

#primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%
}

#primary_nav_wrap ul li:hover>ul {
  display: block
}

Ce code est uniquement pour la balise nav dans ma page html.

Merci pour l'aide.

2
Carlo17 20 nov. 2018 à 16:01

4 réponses

Meilleure réponse

HTML:

N'oubliez pas de copier les balises qui figurent dans <head> dans votre fichier html.

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- MenuMaker Plugin -->
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js"></script>

<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<title>Test</title>
</head>

<body>
<div id="cssmenu">
  <ul>
     <li><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
     <li><a href="#"><i class="fa fa-fw fa-bars"></i> Menus</a>
        <ul>
           <li><a href="#">Menu 1</a>
              <ul>
                 <li><a href="#">Menu 1.1</a></li>
                 <li><a href="#">Menu 1.2</a></li>
                 <li><a href="#">Menu 1.3</a></li>
              </ul>
           </li>
           <li><a href="#">Menu 2</a>
              <ul>
                 <li><a href="#">Menu 2.1</a></li>
                 <li><a href="#">Menu 2.2</a></li>
                 <li><a href="#">Menu 2.3</a></li>
                 <li><a href="#">Menu 2.4</a></li>
              </ul>
           </li>
        </ul>
     </li>
     <li><a href="#"><i class="fa fa-fw fa-cog"></i> Settings</a></li>
     <li><a href="#"><i class="fa fa-fw fa-phone"></i> Contact</a></li>
  </ul>
</div>
</body>

</html>

CSS:

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  font-family: Montserrat, sans-serif;
  background: #333333;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 17px;
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: none;
  color: #dddddd;
  font-weight: 700;
  text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
  color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
  position: absolute;
  top: 22px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}
#cssmenu > ul > li.has-sub > a:before {
  position: absolute;
  top: 19px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
  top: 23px;
  height: 0;
}
#cssmenu ul ul {
  position: absolute;
  left: -9999px;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu ul ul li {
  height: 0;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu li:hover > ul {
  left: auto;
}
#cssmenu.align-right li:hover > ul {
  left: auto;
  right: 0;
}
#cssmenu li:hover > ul > li {
  height: 35px;
}
#cssmenu ul ul ul {
  margin-left: 100%;
  top: 0;
}
#cssmenu.align-right ul ul ul {
  margin-left: 0;
  margin-right: 100%;
}
#cssmenu ul ul li a {
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
  padding: 11px 15px;
  width: 170px;
  font-size: 12px;
  text-decoration: none;
  color: #dddddd;
  font-weight: 400;
  background: #333333;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
  border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
  color: #ffffff;
}
#cssmenu ul ul li.has-sub > a:after {
  position: absolute;
  top: 16px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
  right: auto;
  left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
  position: absolute;
  top: 13px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
  right: auto;
  left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
  top: 17px;
  height: 0;
}
#cssmenu.small-screen {
  width: 100%;
}
#cssmenu.small-screen ul {
  width: 100%;
  display: none;
}
#cssmenu.small-screen.align-center > ul {
  text-align: left;
}
#cssmenu.small-screen ul li {
  width: 100%;
  border-top: 1px solid rgba(120, 120, 120, 0.2);
}
#cssmenu.small-screen ul ul li,
#cssmenu.small-screen li:hover > ul > li {
  height: auto;
}
#cssmenu.small-screen ul li a,
#cssmenu.small-screen ul ul li a {
  width: 100%;
  border-bottom: 0;
}
#cssmenu.small-screen > ul > li {
  float: none;
}
#cssmenu.small-screen ul ul li a {
  padding-left: 25px;
}
#cssmenu.small-screen ul ul ul li a {
  padding-left: 35px;
}
#cssmenu.small-screen ul ul li a {
  color: #dddddd;
  background: none;
}
#cssmenu.small-screen ul ul li:hover > a,
#cssmenu.small-screen ul ul li.active > a {
  color: #ffffff;
}
#cssmenu.small-screen ul ul,
#cssmenu.small-screen ul ul ul,
#cssmenu.small-screen.align-right ul ul {
  position: relative;
  left: 0;
  width: 100%;
  margin: 0;
  text-align: left;
}
#cssmenu.small-screen > ul > li.has-sub > a:after,
#cssmenu.small-screen > ul > li.has-sub > a:before,
#cssmenu.small-screen ul ul > li.has-sub > a:after,
#cssmenu.small-screen ul ul > li.has-sub > a:before {
  display: none;
}
#cssmenu.small-screen #menu-button {
  display: block;
  padding: 17px;
  color: #dddddd;
  cursor: pointer;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
}
#cssmenu.small-screen #menu-button:after {
  position: absolute;
  top: 22px;
  right: 17px;
  display: block;
  height: 4px;
  width: 20px;
  border-top: 2px solid #dddddd;
  border-bottom: 2px solid #dddddd;
  content: '';
  box-sizing: content-box;
}
#cssmenu.small-screen #menu-button:before {
  position: absolute;
  top: 16px;
  right: 17px;
  display: block;
  height: 2px;
  width: 20px;
  background: #dddddd;
  content: '';
  box-sizing: content-box;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
  top: 23px;
  border: 0;
  height: 2px;
  width: 15px;
  background: #ffffff;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#cssmenu.small-screen #menu-button.menu-opened:before {
  top: 23px;
  background: #ffffff;
  width: 15px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#cssmenu.small-screen .submenu-button {
  position: absolute;
  z-index: 99;
  right: 0;
  top: 0;
  display: block;
  border-left: 1px solid rgba(120, 120, 120, 0.2);
  height: 46px;
  width: 46px;
  cursor: pointer;
}
#cssmenu.small-screen .submenu-button.submenu-opened {
  background: #262626;
}
#cssmenu.small-screen ul ul .submenu-button {
  height: 34px;
  width: 34px;
}
#cssmenu.small-screen .submenu-button:after {
  position: absolute;
  top: 22px;
  right: 19px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}
#cssmenu.small-screen ul ul .submenu-button:after {
  top: 15px;
  right: 13px;
}
#cssmenu.small-screen .submenu-button.submenu-opened:after {
  background: #ffffff;
}
#cssmenu.small-screen .submenu-button:before {
  position: absolute;
  top: 19px;
  right: 22px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
}
#cssmenu.small-screen ul ul .submenu-button:before {
  top: 12px;
  right: 16px;
}
#cssmenu.small-screen .submenu-button.submenu-opened:before {
  display: none;
}
#cssmenu.small-screen.select-list {
  padding: 5px;
}

JavaScript:

$("#cssmenu").menumaker({
    title: "Menu",
    breakpoint: 768,
    format: "multitoggle"
});

Les résultats sur le bureau:

enter image description here

Le résultat sur smartphone:

enter image description here

0
Husam Ebish 24 nov. 2018 à 16:07

En supposant que j'ai bien compris vos questions, j'ai fait un exemple en utilisant flexbox. J'ai également ajouté quelques classes, pour rendre le css lisible.

#primary_nav_wrap ul {
  display: flex;
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0;
  justify-content: space-between;
}

#primary_nav_wrap .nav-link {
  padding: 0 20px 0 0;
}

#primary_nav_wrap ul li a {
  display: block;
}

#primary_nav_wrap a {
  color: black;
  text-decoration: none;
}

 #primary_nav_wrap .secondary-list {
   opacity: 0;
   pointer-events: none;
   display: flex;
   flex-direction: column;
   background: #ffed00;
 }
 
 #primary_nav_wrap .secondary-list li a {
   padding: 5px;
 }
  
 #primary_nav_wrap .secondary-list li:hover {
   background: blue;
 }
   
 #primary_nav_wrap .secondary-list li:hover a {
   color: white;
 }
 
 #primary_nav_wrap .primary-list > li:hover .secondary-list  {
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
  }
  .nav-drop-true::after{
    content: " \25bc";
  }
<nav role="navigation" class="nav-menu w-nav-menu" id="primary_nav_wrap">
  <ul class="primary-list">
    <li>
      <a href="index.html" class="nav-link w-nav-link w--current nav-drop-true">Home</a>
      <ul class="secondary-list">
        <li><a href="#">Chi siamo</a></li>
      </ul>
    </li>
    <li>
      <a href="#" class="nav-link w-nav-link nav-drop-true">Servizi</a>
      <ul class="secondary-list">
        <li><a href="#">Servizi mobile</a></li>
        <li><a href="#">Oscuramento vetri</a></li>
        <li><a href="#">Wrapping</a></li>
      </ul>
    </li>
    <li>
      <a href="vantaggi.html" class="nav-link w-nav-link">I vantaggi per voi</a>
    </li>
    <li>
      <a href="#" class="nav-link w-nav-link nav-drop-true">Galleria</a>
      <ul class="secondary-list">
        <li><a href="#">Riparazione mobile</a></li>
        <li><a href="#">Oscuramento vetri</a></li>
        <li><a href="#">Wrapping</a></li>
      </ul>
    </li>
    <li>
      <a href="contatti.html" class="nav-link w-nav-link">Contatti</a>
    </li>
  </ul>
</nav>
0
Shivam Sharma 21 nov. 2018 à 12:17

Essayez ceci et définissez votre propre style

nav{
  display:block;
}
a{
  color:#fff;
  text-decoration: none;
}
ul{
  padding:0;
  list-style: none;
}
#primary_nav_wrap>ul {
  list-style: none;
  position: relative;
  display:block;
  margin: 0;
  background-color:teal;
}
#primary_nav_wrap>ul>li {
  display: inline-block;
  position: relative;
  padding: 10px 0;
}
#primary_nav_wrap>ul>li>a {
  display: block;
  text-decoration: none;
  padding: 0 15px;
}
#primary_nav_wrap>ul>li>div {
  display: none;
  position:absolute;
  top:100%;
  left:0;
  background-color:#999;
  padding:10px;
}
#primary_nav_wrap>ul>li>div>ul>li {
  display:block;
}
#primary_nav_wrap>ul>li>div>ul>li a {
  display:block;
  white-space: nowrap;
  padding:5px 2px;
}
#primary_nav_wrap>ul>li:hover>div {
  display: block
}
.nav-drop-true::after{
  content: " \25bc";
}
/*
#primary_nav_wrap ul li {
  position: relative;
  display:inline-block;
  margin: 0;
  padding: 0
}

#primary_nav_wrap>ul ul {
  display:inline-block;
  position: absolute;
  top: 100%;
  left: 0;
  background-color:#fff;
  padding: 0
}

#primary_nav_wrap ul ul li {
  background: teal;
}

#primary_nav_wrap ul ul a {
  line-height: 120%;
  padding: 10px 15px;
  color: #000;
}

#primary_nav_wrap ul ul li:hover {
  background: #ffed00;
}

#primary_nav_wrap ul ul a:hover {
  color: #fff;
}

#primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%;
}
*/
<nav role="navigation" class="nav-menu w-nav-menu" id="primary_nav_wrap">
      <ul>
        <li>
          <a href="index.html" class="nav-link w-nav-link w--current nav-drop-true">Home</a>
          <div>
			  <ul>
				<li><a href="#">Chi siamo</a></li>
			  </ul>
		  </div>
        </li>
        <li>
          <a href="#" class="nav-link w-nav-link nav-drop-true">Servizi</a>
		  <div>
			  <ul>
				<li><a href="#">Servizi mobile</a></li>
				<li><a href="#">Oscuramento vetri</a></li>
				<li><a href="#">Wrapping</a></li>
			  </ul>
		  </div>
        </li>
        <li>
          <a href="vantaggi.html" class="nav-link w-nav-link">I vantaggi per voi</a>
        </li>
        <li>
          <a href="#" class="nav-link w-nav-link nav-drop-true">Galleria</a>
          <div>
			  <ul>
				<li><a href="#">Riparazione mobile</a></li>
				<li><a href="#">Oscuramento vetri</a></li>
				<li><a href="#">Wrapping</a></li>
			  </ul>
		  </div>
        </li>
        <li>
          <a href="contatti.html" class="nav-link w-nav-link">Contatti</a>
        </li>
      </ul>
    </nav>
0
Shivam Sharma 21 nov. 2018 à 13:02

Un autre style:

$('#cssmenu li.active').addClass('open').children('ul').show();
$('#cssmenu li.has-sub>a').on('click', function(){
  $(this).removeAttr('href');
  var element = $(this).parent('li');
  if (element.hasClass('open')) {
    element.removeClass('open');
    element.find('li').removeClass('open');
    element.find('ul').slideUp();
  } else {
    element.addClass('open');
    element.children('ul').slideDown();
    element.siblings('li').children('ul').slideUp();
    element.siblings('li').removeClass('open');
    element.siblings('li').find('li').removeClass('open');
    element.siblings('li').find('ul').slideUp();
  }
});
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
#cssmenu {
  margin: 0;
  position: relative;
  font-family: 'Roboto';
  line-height: 1;
  width: 250px;
}
.align-right {
  float: right;
}
#cssmenu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
}
#cssmenu ul li {
  position: relative;
  margin: 0;
  padding: 0;
}
#cssmenu ul li a {
  text-decoration: none;
  cursor: pointer;
}
#cssmenu > ul > li > a {
  color: #ddd;
  text-transform: uppercase;
  display: block;
  padding: 20px;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  background: #222;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  letter-spacing: 1px;
  font-size: 16px;
  font-weight: 300;
  -webkit-transition: all 0.25s ease-in;
  -moz-transition: all 0.25s ease-in;
  -ms-transition: all 0.25s ease-in;
  -o-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
  position: relative;
}
#cssmenu > ul > li:first-child > a {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
#cssmenu > ul > li:last-child > a {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom: 1px solid #000;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.open > a,
#cssmenu > ul > li.active > a {
  background: #151515;
  color: #fff;
}
#cssmenu ul > li.has-sub > a::after {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-top: 13px solid #000;
  border-botom: 13px solid transparent;
  border-left: 125px solid transparent;
  border-right: 125px solid transparent;
  left: 0;
  bottom: -13px;
  bottom: 0px;
  z-index: 1;
  opacity: 0;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
#cssmenu ul > li.has-sub > a::before {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-top: 13px solid #151515;
  border-botom: 13px solid transparent;
  border-left: 125px solid transparent;
  border-right: 125px solid transparent;
  left: 0;
  bottom: -12px;
  bottom: -1px;
  z-index: 3;
  opacity: 0;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
#cssmenu ul > li.has-sub::after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-top-color: #ddd;
  z-index: 2;
  right: 20px;
  top: 24.5px;
  pointer-events: none;
}
#cssmenu ul > li:hover::after,
#cssmenu ul > li.active::after,
#cssmenu ul > li.open::after {
  border-top-color: #fff;
}
#cssmenu ul > li.has-sub.open > a::after {
  opacity: 1;
  bottom: -13px;
}
#cssmenu ul > li.has-sub.open > a::before {
  opacity: 1;
  bottom: -12px;
}
#cssmenu ul ul {
  display: none;
}
#cssmenu > ul > li.active > ul {
  display: block;
}
#cssmenu ul ul li {
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
#cssmenu ul ul li a {
  background: #f1f1f1;
  display: block;
  position: relative;
  font-size: 15px;
  padding: 14px 20px;
  border-bottom: 1px solid #ddd;
  color: #777;
  font-weight: 300;
  -webkit-transition: all 0.25s ease-in;
  -moz-transition: all 0.25s ease-in;
  -ms-transition: all 0.25s ease-in;
  -o-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
}
#cssmenu ul ul li:first-child > a {
  padding-top: 18px;
}
#cssmenu ul ul ul li {
  border: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
  background: #e4e4e4;
  color: #666;
}
#cssmenu ul ul > li.has-sub > a::after {
  border-top: 13px solid #ddd;
}
#cssmenu ul ul > li.has-sub > a::before {
  border-top: 13px solid #e4e4e4;
}
#cssmenu ul ul ul li a {
  padding-left: 30px;
}
#cssmenu ul ul > li.has-sub::after {
  top: 18.5px;
  border-width: 6px;
  border-top-color: #777;
}
#cssmenu ul ul > li:hover::after,
#cssmenu ul ul > li.active::after,
#cssmenu ul ul > li.open::after {
  border-top-color: #666;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<title>Test</title>
</head>

<body>

<div id="cssmenu">
  <ul>
     <li class="active"><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
     <li class="has-sub"><a href="#"><i class="fa fa-fw fa-bars"></i> Menus</a>
        <ul>
           <li class="has-sub"><a href="#">Menu 1</a>
              <ul>
                 <li><a href="#">Menu 1.1</a></li>
                 <li><a href="#">Menu 1.2</a></li>
                 <li><a href="#">Menu 1.3</a></li>
              </ul>
           </li>
           <li class="has-sub"><a href="#">Menu 2</a>
              <ul>
                 <li><a href="#">Menu 2.1</a></li>
                 <li><a href="#">Menu 2.2</a></li>
                 <li><a href="#">Menu 2.3</a></li>
                 <li><a href="#">Menu 2.4</a></li>
              </ul>
           </li>
        </ul>
     </li>
     <li><a href="#"><i class="fa fa-fw fa-cog"></i> Settings</a></li>
     <li><a href="#"><i class="fa fa-fw fa-phone"></i> Contact</a></li>
  </ul>
</div>

</body>

</html>
0
Husam Ebish 24 nov. 2018 à 16:36