我的水平菜单被我自己的图像隐藏了

时间：2017-07-13 14:26:46

标签： javascript html css

我一直在写一个我写主题或其他任何内容的网站，其中一些是从一张专辑或一个展示图片的画廊开始，但我发现我的菜单在悬停时，我的选择被我的相册隐藏，我采用了滑动图像效果，使用javascript，我尝试更改菜单的位置或显示，但它没有工作

enter image description here 

/*
 *	generated by WOW Slider 4.7
 *	template Book
 */

@import url(http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext,cyrillic);
#wowslider-container6 {
  zoom: 1;
  position: relative;
  max-width: 1024px;
  margin: 19px auto 17px;
  z-index: 90;
  border: none;
  text-align: left;
  /* reset align=center */
}

* html #wowslider-container6 {
  width: 1024px
}

#wowslider-container6 .ws_images ul {
  position: relative;
  width: 10000%;
  height: auto;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-spacing: 0;
  overflow: visible;
  /*table-layout:fixed;*/
}

#wowslider-container6 .ws_images ul li {
  width: 1%;
  line-height: 0;
  /*opera*/
  float: left;
  font-size: 0;
  padding: 0 0 0 0 !important;
  margin: 0 0 0 0 !important;
}

#wowslider-container6 .ws_images {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#wowslider-container6 .ws_images a {
  width: 100%;
  display: block;
  color: transparent;
}

#wowslider-container6 img {
  max-width: none !important;
}

#wowslider-container6 .ws_images img {
  width: 100%;
  border: none 0;
  max-width: none;
  padding: 0;
}

#wowslider-container6 a {
  text-decoration: none;
  outline: none;
  border: none;
}

#wowslider-container6 .ws_bullets {
  font-size: 0px;
  float: left;
  position: absolute;
  z-index: 70;
}

#wowslider-container6 .ws_bullets div {
  position: relative;
  float: left;
}

#wowslider-container6 .wsl {
  display: none;
}

#wowslider-container6 sound,
#wowslider-container6 object {
  position: absolute;
}

#wowslider-container6 .ws_bullets {
  padding: 5px;
}

#wowslider-container6 .ws_bullets a {
  width: 20px;
  height: 21px;
  background: url(./bullet.png) left top;
  float: left;
  text-indent: -4000px;
  position: relative;
  margin-left: 7px;
  color: transparent;
}

#wowslider-container6 .ws_bullets a.ws_selbull,
#wowslider-container6 .ws_bullets a:hover {
  background-position: 0 100%;
}

#wowslider-container6 a.ws_next,
#wowslider-container6 a.ws_prev {
  position: absolute;
  display: none;
  top: 50%;
  margin-top: -20px;
  z-index: 60;
  height: 39px;
  width: 70px;
  background-image: url(./arrows.png);
}

#wowslider-container6 a.ws_next {
  background-position: 100% 0;
  right: 5px;
}

#wowslider-container6 a.ws_prev {
  left: 5px;
  background-position: 0 0;
}

* html #wowslider-container6 a.ws_next,
* html #wowslider-container6 a.ws_prev {
  display: block
}

#wowslider-container6:hover a.ws_next,
#wowslider-container6:hover a.ws_prev {
  display: block
}


/*playpause*/

#wowslider-container6 .ws_playpause {
  display: none;
  width: 58px;
  height: 58px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -19px;
  margin-top: -29px;
  z-index: 59;
}

#wowslider-container6:hover .ws_playpause {
  display: block;
}

#wowslider-container6 .ws_pause {
  background-image: url(./pause.png);
}

#wowslider-container6 .ws_play {
  background-image: url(./play.png);
}


/* bottom right */

#wowslider-container6 .ws_bullets {
  bottom: 5px;
  right: 5px;
}

#wowslider-container6 .ws-title {
  position: absolute;
  display: block;
  bottom: 33px;
  left: 0px;
  z-index: 50;
  margin-right: 15px;
  padding: 8px;
  color: #664b2b;
  background: #e7d7c3;
  font-family: 'Lobster', Comic Sans MS, cursive;
  font-size: 30px;
  line-height: 32px;
  border-radius: 0px 5px 5px 0px;
  -moz-border-radius: 0px 5px 5px 0px;
  -webkit-border-radius: 0px 5px 5px 0px;
  box-shadow: 2px 0px 3px rgba(114, 82, 45, 0.6);
  -moz-box-shadow: 2px 0px 3px rgba(114, 82, 45, 0.6);
  -webkit-box-shadow: 2px 0px 3px rgba(114, 82, 45, 0.6);
}

#wowslider-container6 .ws-title div {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  color: #473520;
  font-size: 20px;
  line-height: 22px;
  margin-top: 6px;
}

#wowslider-container6 .ws_images ul {
  animation: wsBasic 196.8s infinite;
  -moz-animation: wsBasic 196.8s infinite;
  -webkit-animation: wsBasic 196.8s infinite;
}

#wowslider-container6 .ws_shadow {
  background-image: url(./bg.png);
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  z-index: -1;
  left: -3.22%;
  top: -2.47%;
  width: 106.44%;
  height: 104.68%;
}

* html #wowslider-container6 .ws_shadow {
  /*ie6*/
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='engine6/bg.png', sizingMethod='scale');
}

*+html #wowslider-container6 .ws_shadow {
  /*ie7*/
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='engine6/bg.png', sizingMethod='scale');
}

#wowslider-container6 .ws_bullets a img {
  text-indent: 0;
  display: block;
  bottom: 20px;
  left: -32px;
  visibility: hidden;
  position: absolute;
  box-shadow: 0 1px 3px rgba(46, 15, 0, 0.4);
  -moz-box-shadow: 0 1px 3px rgba(46, 15, 0, 0.4);
  -webkit-box-shadow: 0 1px 3px rgba(46, 15, 0, 0.4);
  border: 3px solid #edd8a3;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  max-width: none;
}

#wowslider-container6 .ws_bullets a:hover img {
  visibility: visible;
}

#wowslider-container6 .ws_bulframe div div {
  height: 48px;
  overflow: visible;
  position: relative;
}

#wowslider-container6 .ws_bulframe div {
  left: 0;
  overflow: hidden;
  position: relative;
  width: 64px;
  background-color: #edd8a3;
}

#wowslider-container6 .ws_bullets .ws_bulframe {
  display: none;
  bottom: 24px;
  overflow: visible;
  position: absolute;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(46, 15, 0, 0.4);
  -moz-box-shadow: 0 1px 3px rgba(46, 15, 0, 0.4);
  -webkit-box-shadow: 0 1px 3px rgba(46, 15, 0, 0.4);
  border: 3px solid #edd8a3;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

#wowslider-container6 .ws_bulframe span {
  display: block;
  position: absolute;
  bottom: -8px;
  margin-left: -1px;
  left: 32px;
  background: url(./triangle.png);
  width: 15px;
  height: 6px;
}

body {
  background-color: rgba(170, 200, 228, 0.3);
}

section {
  word-wrap: break-word;
  max-width: 400px;
  max-height: 100%;
  overflow: auto;
  float: left;
  max-height: 1000px;
}

#contenue h1 {
  background-repeat: no-repeat;
}

#contenue {
  color: #000;
  text-align: left;
  margin: 0 10px 20px 405px;
  padding: 0 0 10px 0;
  border-left: 1px solid #37b;
  font: 12px/20px verdana, arial, geneva, sans-serif;
}

#contenu {
  color: #000;
  text-align: left;
  margin: 0 10px 20px 405px;
  padding: 0 0 10px 0;
  border-left: 1px solid #37b;
  font: 12px/20px verdana, arial, geneva, sans-serif;
}

#vieID {
  color: #000;
  text-align: left;
  margin: 0 10px 20px 405px;
  padding: 0 0 10px 0;
  border-left: 1px solid #f90;
  font: 12px/20px verdana, arial, geneva, sans-serif;
}

#tempsfortsID {
  color: #000;
  text-align: left;
  margin: 0 10px 20px 405px;
  padding: 0 0 10px 0;
  border-left: 1px solid #45aa44;
  font: 12px/20px verdana, arial, geneva, sans-serif;
}

#visiteID {
  color: #000;
  text-align: left;
  margin: 0 10px 20px 405px;
  padding: 0 0 10px 0;
  border-left: 1px solid #f90;
  font: 12px/20px verdana, arial, geneva, sans-serif;
}

#formationID {
  color: #000;
  text-align: left;
  margin: 0 10px 20px 405px;
  padding: 0 0 10px 0;
  border-left: 1px solid #e43;
  font: 12px/20px verdana, arial, geneva, sans-serif;
}

#anciensID {
  color: #000;
  text-align: left;
  margin: 0 10px 20px 405px;
  padding: 0 0 10px 0;
  border-left: 1px solid #FECEA8;
  font: 12px/20px verdana, arial, geneva, sans-serif;
}

.texte h3 {
  float: center;
  padding: 15px, 15px;
  position: static;
  color: #666666;
  font-size: 18px;
  background-image: url(image/H4gris.jpg);
  background-repeat: no-repeat;
}

h4 {
  color: #666666;
  margin-top: 30px;
  background-image: url(image/H4gris.jpg);
  background-repeat: no-repeat;
  background-position: 0 0 0 -20px;
}

#contenue h2 {
  color: #000000;
  margin: 0;
  background-image: url(IMAGE/H2violet.jpg);
  background-repeat: no-repeat;
  background-position: 0 0 0 -20px;
}

#formationID h2 {
  color: #000000;
  margin: 0;
  background-image: url(IMAGE/H2rouge.jpg);
  background-repeat: no-repeat;
  background-position: 0 0 0 -20px;
}

#visiteID h2 {
  color: #000000;
  margin: 0;
  background-image: url(IMAGE/H2orange.jpg);
  background-repeat: no-repeat;
  background-position: 0 0 0 -20px;
}

#vieID h2 {
  color: #000000;
  margin: 0;
  background-image: url(IMAGE/H2jaune.jpg);
  background-repeat: no-repeat;
  background-position: 0 0 0 -20px;
}

#tempsfortsID h2 {
  color: #000000;
  margin: 0;
  background-image: url(IMAGE/H2vert.jpg);
  background-repeat: no-repeat;
  background-position: 0 0 0 -20px;
}

#anciensID h2 {
  color: #000000;
  margin: 0;
  background-image: url(IMAGE/H2belge.jpg);
  background-repeat: no-repeat;
  background-position: 0 0 0 -20px;
}

#contenu {
  background-image: url(image/fondbleu.jpg);
  min-height: 800px;
}

#contenue {
  background-image: url(image/fondviolet.jpg);
  min-height: 800px;
}

#formationID {
  background-image: url(image/fondrouge.jpg);
  min-height: 800px;
}

#visiteID {
  background-image: url(image/fondorange.jpg);
  min-height: 800px;
}

#vieID {
  background-image: url(image/fondjaune.jpg);
  min-height: 800px;
}

#tempsfortsID {
  background-image: url(image/fondjaune.jpg);
  min-height: 800px;
}

#contenu img {
  display: block;
  -webkit-margin-before: 0px;
  -webkit-margin-after: 0px;
  -webkit-margin-start: -1px;
  -webkit-margin-end: 0px;
}

#vieID img {
  display: block;
  -webkit-margin-before: 0px;
  -webkit-margin-after: 0px;
  -webkit-margin-start: -1px;
  -webkit-margin-end: 0px;
}

#visiteID img {
  display: block;
  -webkit-margin-before: 0px;
  -webkit-margin-after: 0px;
  -webkit-margin-start: -1px;
  -webkit-margin-end: 0px;
}

#anciensID img {
  display: block;
  -webkit-margin-before: 0px;
  -webkit-margin-after: 0px;
  -webkit-margin-start: -1px;
  -webkit-margin-end: 0px;
}

#tempsfortsID img {
  display: block;
  -webkit-margin-before: 0px;
  -webkit-margin-after: 0px;
  -webkit-margin-start: -1px;
  -webkit-margin-end: 0px;
}

#contenue img {
  display: block;
  -webkit-margin-before: 0px;
  -webkit-margin-after: 0px;
  -webkit-margin-start: -1px;
  -webkit-margin-end: 0px;
  font-weight: bold;
}

#formationID img {
  display: block;
  -webkit-margin-before: 0px;
  -webkit-margin-after: 0px;
  -webkit-margin-start: -1px;
  -webkit-margin-end: 0px;
}

.début {
  font-size: 15px;
  padding-left: 45px;
  margin: 0 50px 50px 0;
}

#contenu h2 {
  padding-left: 20px;
  color: #000000;
  margin: 0;
  background-image: url(image/H2bleu.jpg);
  background-repeat: no-repeat;
  background-position: 0 0 0 -20px;
}

#contenue .histoire {
  height: 1000px;
  width: 1100px;
  background-repeat: no-repeat;
}

header {
  font-size: 1px;
  border: 7px ridge #1173AF;
}

header img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 200px;
  width: 500px;
  overflow: hidden;
}

.menu {
  overflow: hidden;
  background-color: #3CA9DF;
  font-family: Arial, Serif, Sans-Serif;
  min-width: 150px;
  z-index: 1000
}

.menu a {
  float: left;
  font-size: 12px;
  color: white;
  text-align: center;
  padding: 12px 15px;
  text-decoration: none;
}

.VAE {
  float: left;
  overflow: hidden;
  font-size: 15px;
}

.on-parle-de-nous {
  float: left;
  overflow: hidden;
  font-size: 15px;
}

.formulaire-de-contacts {
  float: left;
  overflow: hidden;
  font-size: 15px;
}

.accueil {
  float: left;
  overflow: hidden;
  font-size: 15px;
}

.accueil .accueilbtn {
  border: none;
  outline: none;
  color: white;
  background-color: inherit;
}

.VAE .VAEbtn {
  border: none;
  outline: none;
  color: white;
  background-color: inherit;
}

.on-parle-de-nous .on-parle-de-nousbtn {
  border: none;
  outline: none;
  color: white;
  background-color: inherit;
}

.formulaire-de-contacts .formulaire-de-contactsbtn {
  border: none;
  outline: none;
  color: white;
  background-color: inherit;
}

.accueil .accueilbtn a {
  padding: 14px 16px;
  margin-bottom: 6px;
  font-size: 16px;
}

.VAE .VAEbtn a {
  padding: 14px 16px;
  margin-bottom: 6px;
  font-size: 16px;
}

.on-parle-de-nous .on-parle-de-nousbtn a {
  padding: 14px 16px;
  margin-bottom: 6px;
  font-size: 16px;
}

.formulaire-de-contacts .formulaire-de-contactsbtn a {
  padding: 14px 16px;
  margin-bottom: 6px;
  font-size: 16px;
}

.menu a:hover,
.VAE:hover .VAEbtn {
  background-color: #7FB8D5;
}

.menu a:hover,
.on-parle-de-nous:hover .on-parle-de-nousbtn {
  background-color: #7FB8D5;
}

.menu a:hover,
.formulaire-de-contacts:hover .formulaire-de-contactsbtn {
  background-color: #7FB8D5;
}

.menu a:hover,
.accueil:hover .accueilbtn {
  background-color: #7FB8D5;
}

.accueil-content a:hover {
  background: linear-gradient(to right, #7FB8D5, #333);
  background-color: #333;
}

.accueil:hover .accueil-content {
  display: block;
}

.lycee {
  float: left;
  overflow: hidden;
}

.lycee .lyceebtn {
  font-size: 15px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  min-width: 150px;
}

.menu a:hover,
.lycee:hover .lyceebtn {
  background-color: #7FB8D5;
}

.lycee-content {
  display: none;
  position: absolute;
  background-color: #7FB8D5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.lycee-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  min-width: 150px;
}

.lycee-content a:hover {
  background: linear-gradient(to right, #7FB8D5, #333);
  background-color: #333;
}

.lycee:hover .lycee-content {
  display: block;
}

.formations {
  float: left;
  overflow: hidden;
}

.formations .formationsbtn {
  font-size: 15px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  min-width: 150px;
}

.menu a:hover,
.formations:hover .formationsbtn {
  background-color: #7FB8D5;
}

.formations-content {
  display: none;
  position: absolute;
  background-color: #7FB8D5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.formations-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  min-width: 150px;
}

.formations-content a:hover {
  background: linear-gradient(to right, #7FB8D5, #333);
  background-color: #333;
}

.formations:hover .formations-content {
  display: block;
}
<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="lyceecss.css" />
  <title>Forum de l'orientation</title>
</head>

<body>
  <header>
    <img src="image/lyceelogo.jpg"></a>

  </header>
  <nav>
    <div class="menu">
      <div class="accueil">
        <button class="accueilbtn"><a href="../premierepage.html">accueil</a></button>
      </div>
      <div class="lycee">
        <button class="lyceebtn">Le Lycée</button>
        <div class="lycee-content">
          <a href="#">Le mot du chef d'établissement</a>
          <a href="#">Plan d'accès</a>
          <a href="#">Historique</a>
          <a href="#">Horaires secrétariat</a>
          <a href="#">Organigramme du personnel</a>
          <a href="#">Date des vancances scolaires</a>
          <a href="#">La taxe d'apprentissage</a>
        </div>
      </div>
      <div class="formations">
        <button class="formationsbtn">Formations</button>
        <div class="formations-content">
          <a href="#">3° PREPA PRO</a>
          <a href="#">CAP Employé(e) de commerce Multi-Spécialités</a>
          <a href="#">BAC Pro vente 3 ans</a>
          <a href="#">BAC Pro commerce 3 ans</a>
          <a href="#">BAC Pro Acceuil Relation Client Usager 3 ans</a>
          <a href="#">Bac Pro COMMUNICATION VISUELLE PLURI-MEDIA 3 ans</a>
          <a href="#">BAC Pro PHOTOGRAPHE 3 ans</a>
          <a href="#">Modalités d'inscription</a>
          <a href="#">Résultats</a>
          <a href="#">Stages</a>
        </div>
      </div>
      <div class="visite">
        <button class="visitebtn">visite du lycée</button>
        <div class="visite-content">
          <a href="#">Les lieux de rencontre</a>
          <a href="#">Les ateliers</a>
          <a href="#">Les laboratoires</a>
          <a href="#">Le CDI</a>
          <a href="#">Le gymnase</a>
          <a href="#">Le self</a>
          <a href="#">L'internat</a>
        </div>
      </div>
      <div class="vielycee">
        <button class="vielyceebtn">La vie au Lycée</button>
        <div class="vielycee-content">
          <a href="#">Les Journées Portes Ouvertes</a>
          <a href="#">Voyages</a>
          <a href="#">Les projets/Les expositions</a>
          <a href="#">Les Activités de classe</a>
        </div>
      </div>
      <div class="tempsforts">
        <button class="tempsfortsbtn">Les Temps Forts au Lycée</button>
        <div class="tempsforts-content">
          <a href="#">Le Forum de l'orientation</a>
          <a href="#">OFF 2017</a>
          <a href="#">Design Culinaire 2016</a>
          <a href="#">Les nuits du Design</a>
          <a href="#">La veillé de noël</a>
          <a href="#">Journée rencontre et connaissance</a>
          <a href="#">La Journée St Joseph</a>
          <a href="#">Formation des délégués</a>
          <a href="#">Les Workshops et les Projets</a>
          <a href="#">Soirée Partenaires Entreprises</a>
        </div>
      </div>
      <div class="anciens">
        <button class="anciensbtn">Les anciens élèvess</button>
        <div class="anciens-content">
          <a href="#">Que devenez-vous ?</a>
          <a href="#">Remise des diplômes</a>
          <a href="#">Les 20 ans du Bac Pro Vente</a>
        </div>
      </div>
      <div class="VAE">
        <div class="VAE"><button class="VAEbtn"><a href="#">V.A.E.</a></div></button></div>
        <div class="on-parle-de-nous"><button class="on-parle-de-nousbtn"><a href="#">On parle de nous...</a></button></div>
        <div class="formulaire-de-contacts"><button class="formulaire-de-contactsbtn"><a href="#">Formulaire de contacts"</a></button></div>


      </div>
      <section></section>


      <div id="tempsfortsID">
        <h2>FORUM DE L'ORIENTATION</h2>

        <h3>FORUM DE L'ORIENTATION 14 ET 15 F&Eacute;VRIER 2014</h3>
        <br />


        <!-- Start WOWSlider.com HEAD section -->
        <link rel="stylesheet" type="text/css" href="forum-et-orientation/engine6/style.css" />
        <script type="text/javascript" src="forum-et-orientation/engine6/jquery.js"></script>
        <!-- End WOWSlider.com HEAD section -->

        <!-- Start WOWSlider.com BODY section -->
        <div id="wowslider-container6">
          <div class="ws_images">
            <ul>
              <li><img src="http://via.placeholder.com/350x150" alt="forum_2014" title="forum_2014" id="wows6_0" /></li>
              <li><img src="http://via.placeholder.com/350x150" alt="forum_2014" title="forum_2014" id="wows6_0" /></li>
              <li><img src="http://via.placeholder.com/350x150" alt="forum_2014" title="forum_2014" id="wows6_0" /></li>
              <li><img src="http://via.placeholder.com/350x150" alt="forum_2014" title="forum_2014" id="wows6_0" /></li>
              <li><img src="http://via.placeholder.com/350x150" alt="forum_2014" title="forum_2014" id="wows6_0" /></li>
              <li><img src="http://via.placeholder.com/350x150" alt="forum_2014" title="forum_2014" id="wows6_0" /></li>
              <li><img src="http://via.placeholder.com/350x150" alt="forum_2014" title="forum_2014" id="wows6_0" /></li>
              <li><img src="http://via.placeholder.com/350x150" alt="forum_2014" title="forum_2014" id="wows6_0" /></li>
              <li><img src="http://via.placeholder.com/350x150" alt="forum_2014" title="forum_2014" id="wows6_0" /></li>
              <li><img src="http://via.placeholder.com/350x150" alt="forum_2014" title="forum_2014" id="wows6_0" /></li>
            </ul>
          </div>
          <span class="wsl"><a href="http://wowslider.com">Slideshow Bootstrap</a> by WOWSlider.com v4.7</span>
          <div class="ws_shadow"></div>
        </div>
        <script type="text/javascript" src="forum-et-orientation/engine6/wowslider.js"></script>
        <script type="text/javascript" src="forum-et-orientation/engine6/script.js"></script>
        <!-- End WOWSlider.com BODY section -->
        <br />
        <br />
        <br />
</body>

</html>

我已经调查了两个css但我找不到任何与此问题相关的内容，或者我可能错过了它，我只是改变了位置

1 个答案:

答案 0 :(得分：1)

知道了！只需更改 formtions-content ：

类的z-index 
.formations-content {
  display: none;
  position: absolute;
  background-color: #7FB8D5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}
相关问题
最新问题