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

Meny med rullgardin


Jompan

Rekommendera Poster

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

 

 

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

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.

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...