Horisontal

Når vi laver en ul om til en menu giver vi den egenskaben: display: block – og blok elementer stakkes jo ovenpå hinanden – men vi har jo lært at vi kan få disse elementer ltil at lægge sig på en linie vha. float:left.

nav li a {
	float: left;
	display: block;
  }

Eksempel på horisontal menu med clear fix:

nav {margin-left: 20px;
background: #231B71;
}
 
nav ul, nav li {
              margin: 0;
              padding: 0;
}
 
nav ul li {
          list-style-type: none;
}
 
nav ul li a {
 
           text-decoration: none;
           display: block;
           float: left;
           padding: 0.2em 0.7em 0.2em 0.7em;
           background-color: gray;
           border-right: 1px solid whitesmoke;
           line-height: 20px;
           color: whitesmoke;
           font-family: verdana;
           font-weight: bold;
           letter-spacing: .15em;
}
 
nav ul li a:hover {
	color:gray;
	background-color: whitesmoke;
}
 
 
 
/*********clearfix from Niclas Gallagher.com*************/
 
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
 
.cf:after {
    clear: both;
}
 
/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

Leave a Reply