Just nu i M3-nätverket
Gå till innehåll
Jompan

Meny med rullgardin

Rekommendera Poster

Jompan

Jag jobbar i en PHP-miljö, och försöker skapa en meny, där hover över knappen Styrelse ska visa upp 3 underliggande alternativ, och döljas när jag väljer vidare. Som det är nu lägger sig Alt1-3 i fast horisontell linje efter 'Styrelse'.

(Och nu har jag rört till det hela, så det är svårt att komma vidare.)

 

Min HTML:

<div id="navigation">
<ul id="navlist">
<li><a href="index.php">Hem</a></li>
<li><a href="styrelse.php">Styrelse</a>
<ul id="subnavlist">
     <li><a href="sida1.php">Alt 1</a></li>
     <li><a href="sida2.php">Alt 2</a></li>
     <li><a href="sida3.php">Alt 3</a></li>
</ul>
</li>

<li><a href="lankar.php">Länkar</a></li>
<li><a href="kontakt.php">Kontakt</a></li>
</ul>
</div>

 

CSS:

#navigation { 
   font-family: tahoma, verdana, geneva, sans-serif; 
    letter-spacing: 1px;
    font-size: 15px; 
    padding: 5px;
    display: inline;
    background-color: blue;
}   

 

ul#navlist {
    margin-left: 20px;
    padding-left: 0;
}


ul#navlist li {
    display: none;
    padding: 5px;
    list-style-type: none;
}

 

#navlist a { 
    padding: 5px 10px; 
}

 

#navlist a:link {                      
    color: #0033ff; 
    font-weight: bold;
    background-color: white; 
    border:1px solid #0069d1;
    text-decoration: none;
}

 

#navlist a:visited {
    color: #0033ff; 
    font-weight: bold;
    background-color: white; 
    text-decoration: none;
    border:1px solid #0069d1;
}

#navlist a:hover{
    color: black; 

    text-decoration: none;
}

 

#navlist a:active{
    color: #669900; /* Grön */
    background-color: #ccdae5; /* Gråblå */
    text-decoration: none;
}


ul#subnavlist { display: none; }
ul#subnavlist li { float: none;  }

ul#subnavlist li a {
    margin: 1px 3px;
}

 

ul#navlist li:hover ul#subnavlist {
    display: block;
    position: absolute;
    margin: 0 9px;
    padding-top: 5px;
    padding-bottom: 2px;
    background-color: #DDCDFE;
}    

 

ul#navlist li:hover ul#subnavlist li a {
    display: block;
    border: none;
    padding: 5px;
}
 

Tacksam för hjälp.

// Agneta

 

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
Cluster

Orkade inte städa i din kod men hade en gammal egen liggandes som jag tror gör det du är ute efter:

 

CSS:

#navigation {
  font-size:0.75em;
  width:150px;
  }

#navigation ul {
  margin:0px;
  padding:0px;
  }

#navigation li {
  list-style: none;
  }

ul.top-level {
  background:#666;
  }

ul.top-level li {
  border-bottom: #fff solid;
  border-top: #fff solid;
  border-width: 1px;
  }

#navigation a {
  color: #fff;
  cursor: pointer;
  display:block;
  height:25px;
  line-height: 25px;
  text-indent: 10px;
  text-decoration:none;
  width:100%;
  }

#navigation a:hover {
  text-decoration:underline;
  }

#navigation li:hover {
  background: #f90;
  position: relative;
  }

ul.sub-level {
  display: none;
  }

li:hover .sub-level {
  background: #999;
  border: #fff solid;
  border-width: 1px;
  display: block;
  }

HTML:

<div id="navigation">
  <ul class="top-level">
    <li><a href="index.php">Hem</a></li>
    <li>
      <a href="styrelse.php">Styrelse</a>
      <ul class="sub-level">
         <li><a href="sida1.php">Alt 1</a></li>
         <li><a href="sida2.php">Alt 2</a></li>
         <li><a href="sida3.php">Alt 3</a></li>
      </ul>
    </li>
    <li><a href="lankar.php">Länkar</a></li>
    <li><a href="kontakt.php">Kontakt</a></li>
  </ul>
</div>

 

Du får styla om med färger o.dyl så det passar din layout.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
Jompan

Tack, ungefär så har jag tänkt mig. Men menyn ska vara horisontell för den ligger över content.

 

// Agneta

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
Jompan

Tack så hjärtligt för hjälpen. Nu klarar jag mig bra, tror jag.

// Agneta

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Skapa ett nytt konto på vårt forum. Det är lätt!

Registrera ett nytt konto

Logga in

Redan medlem? Logga in här.

Logga in nu



×
×
  • Skapa nytt...