Sujets similaires

Bonjour,

Tout d'abord, je tiens à m'excuser si la question a déjà été abordée mais ma recherche a remonté tellement de résultats que je n'ai pas eu le courage de consulter chaque sujet.

Je planche sur une barre de menu depuis quelques jours. J'ai trouvé du code CSS un peu partout, étant moi-même novice. Je rencontre un souci de largeur que je ne parviens pas à régler. Voici le CSS :

Code:: ol, ul {
  list-style: none;
}

nav {
  height: 44px;
}

.nav {
  margin: 200px auto;
  width: 1200px;
  text-align: center;
}
.nav a {
  display: block;
  text-decoration: none;
}
.nav > li {
  float: left;
  font-family: "OpenSans Semibold";
}

.nav > li > a {
  height: 44px;
  line-height: 44px;
  padding: 0 20px;
  color: #595959;
  text-decoration: none;
  text-shadow: 0 1px white;
  background-colour: rgba(0, 0, 0, 0.05);
  border: 1px solid;
  border-color: #cfcfcf #d6d6d6 #c8c8c8;
  background-image: url("../img/bg.png");
  -webkit-box-shadow: inset 0 1px white, inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px #dadada, 0 3px #c4c4c4, 0 4px 3px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px white, inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px #dadada, 0 3px #c4c4c4, 0 4px 3px rgba(0, 0, 0, 0.1);
}
.nav > li > a:hover {
  color: #539f07;
  text-shadow: 0 1px white, 0 0 20px white;
}
.nav > li.active > a, .nav > li > a:active, .nav > .dropdown:hover > a {
  color: #539f07;
  text-shadow: 0 1px white, 0 0 20px white;
}
.nav a.icon {
  position: relative;
  width: 40.8px;
  padding: 0;
}
.nav a.icon > span {
  display: block;
  position: absolute;
  top: 14px;
  left: 12px;
  height: 16px;
  width: 16px;
  background-repeat: no-repeat;
  background-position: 0 0;
  font: 0/0 serif;
  text-shadow: none;
  color: transparent;
}
.nav a.icon.home > span {
background-image: url("../img/icons.png");
}

.dropdown {
  position: relative;
  text-align: center;
}
.dropdown:hover ul {
  display: block;
}
.dropdown ul {
  display: none;
  position: absolute;
  left: -1px;
  padding: 0 0 5px;
  white-space: nowrap;
  color: #595959;
  text-shadow: 0 1px white;
  border: 1px solid;
  border-color: #cfcfcf #d6d6d6 #c8c8c8;
  background-image: url(../img/bg.png);
  -webkit-box-shadow: inset 0 1px white, inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px #dadada, 0 3px #c4c4c4, 0 4px 3px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px white, inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px #dadada, 0 3px #c4c4c4, 0 4px 3px rgba(0, 0, 0, 0.1);
}
.dropdown ul:last-child {
  border-bottom-width: 1px !important;
  border-bottom-color: #c6c6c6;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.dropdown ul.large {
  width: auto;
}
.dropdown li {
  display: block;
  padding: 0 20px;
  height: 44px;
  vertical-align: central;
  overflow: visible;
  font-family: "OpenSans Light";
}

.dropdown li a {
  color: #555;
  padding: 8px 18px;
  margin: 0 -18px;
}
.dropdown li a:hover {
  color: #539f07;
  text-shadow: 0 1px white, 0 0 20px white;
}

Mon problème est que je voudrais que la largeur de mes menus principaux s'adapte à la largeur des sous-menus qui leurs sont rattachés lorsqu'elle est plus importante et ce en évitant tout retour à la ligne du texte et vice versa.

Des idées ?

Salut,

Tu aurai le code HTML associé au menu ?

Oui, pardon. Voici :

Code:: <body>
<nav>
<ul class="nav">
  <li><a class="icon home" href="#">
  <span>Home</span></a></li>
  <li class="dropdown">
   <a href="#">Éducation</a>
   <ul>
   <li><a href="#">Location et maintenance</a></li>
   <li><a href="#">E. N. T.</a></li>
   <li><a href="#">Tableaux Blancs Interactifs</a></li>
   </ul>
  </li>
  <li class="dropdown">
   <a href="#">Entreprises</a>
    <ul>
   <li><a href="#">Location et Maintenance</a></li>
   <li><a href="#">Infogérance</a></li>
   <li><a href="#">Monitoring</a></li>
   <li><a href="#">Audit</a></li>
   <li><a href="#">Conseil</a></li>
   <li><a href="#">Personnel en régie</a></li>
   <li><a href="#">Logiciels de gestion</a></li>
   </ul>
  </li>
  <li class="dropdown">
   <a href="#">Nos partenaires</a>
   <ul>
   <li><a href="#">Impero</a></li>
   <li><a href="#">Licence-PC</a></li>
   <li><a href="#">Microsoft</a></li>
   <li><a href="#">Quadratus</a></li>
   </ul>
  </li>
  <li><a href="#">Télémaintenance</a></li>
  <li class="dropdown">
   <a href="#">À propos</a>
   <ul>
   <li><a href="#">Qui sommes-nous ?</a></li>
   <li><a href="#">L'équipe</a></li>
   <li><a href="#">Nos références</a></li>
   </ul>
  </li>
  <li><a href="#">Nous contacter</a></li>
</ul>
</nav>
</body>

Bonsoir AlexandreC,
Le problème est-il toujours d'actualité ?

Largeur de menu

Largeur de menu

Sujets similaires

Sujets similaires

Partenaires Or