1. Forsiden
  2.  » Navigation
  3.  » Dropdown menu artikel

CSS-menu eksempel 9: Navigationsbjælke

Html-kildekoden til denne menu er identisk med kildekoden i de foregående eksempler, og er gengivet i eksempel 1.

Stylesheet'et til denne udformning er vist herunder:

div#navbar {
  float:left;
  background: white;  
  margin:-1px 0 0 0;
  font-size:80%;
  font-family:arial,sans-serif;
  font-weight:bold; }
div#navbar ul { 
  margin:0; padding:0; list-style:none; 
  background: white;
  border-top: 1px solid black; }
div#navbar li { 
  position:relative;
  width:10em; line-height:1em;
  margin:0; padding:0; list-style:none; 
  float:left;
  border-bottom:1px solid black;
  border-right:1px solid black; }
div#navbar ul li a { 
  display:block; 
  text-decoration:none; 
  padding:0.25em 0 0.25em 0.5em; 
  width:9.5em; 
  margin:0; }
div#navbar li:hover {
background-color: #ccf;}
div#navbar li.sub {
  background-image:url(darrow.png);
  background-position:right center;
  background-repeat:no-repeat;}
div#navbar li.sub li.sub:hover {
  background-color: #ccf; /* Forhindre 
                  background-repeat af grafikken  */ }
div#navbar>ul a {
  width:auto;}
div#navbar ul ul {
  position: absolute; 
  top: -1px; 
  display:none; }
div#navbar ul ul li {border-bottom:1px solid black;
  border-left:1px solid black;margin-left:-1px;}
div#navbar li.sub li.sub {
  background-image:url(darrow.png);
  background-position:right center;
  background-repeat:no-repeat;}
div#navbar ul.niveau1 li.sub:hover ul.niveau2 {
  border-top:1px solid black;}
div#navbar ul.niveau1 li.sub:hover ul.niveau2,
div#navbar ul.niveau2 li.sub:hover ul.niveau3 {
  display:block;}
div#navbar ul.niveau2 {
  top:1.5em; left:0;}
div#navbar ul.niveau3 {
  top:-1px; left:10em;
  border-top:1px solid black;}

Bemærk: Navigationsbjælkens overkant tegnes af border-bottom#banner-elementet, der ligger over menuen.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam bibendum tempor nulla. Sed commodo. Aliquam feugiat lorem nec sem. Nullam consequat tristique libero. Suspendisse id erat. Duis ante sem, laoreet nec, nonummy non, posuere at, sapien. Nam porta. Cras sapien tortor, vehicula at, scelerisque quis, consequat at, enim. Fusce quis tortor. Quisque magna. Proin nunc. Phasellus purus metus, tempus a, lobortis in, mollis sed, erat. Nulla facilisi. Curabitur wisi.

Maecenas accumsan libero sit amet libero. Sed velit ligula, vulputate sit amet, commodo non, ultrices vel, velit. Donec vitae risus quis erat semper congue. Nunc ornare faucibus enim.

Aenean pretium elit nec velit. Phasellus commodo, nibh at vulputate dapibus, nisl quam venenatis sem, quis ornare nunc nulla ut libero. Aenean ipsum. Fusce lacinia congue mauris. Maecenas non libero. Nullam eget enim. Integer iaculis arcu dictum ligula. Ut neque ipsum, vestibulum ut, interdum at, aliquam vel, felis.