hoe dit horizontale menu in IE werkend krijgen?

Door Superman op 01-11-2006 17:36

702 views

Dat oooh zo vervelende IE ook altijd.

Ik heb een mooi menuutje gemaakt, maar in IE krijg ik het niet werkend. Wat moet er veranderd worden?


<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>




<ul class="nav">
<li><strong>a navigation item</strong>
	<ul>
	<li>a navigation list item</li>
	<li>...</li>
	<li>...</li>
	<li>...</li>
	</ul>
</li>
<li><strong>a navigation item</strong>
	<ul>
	<li>another navigation list item</li>
	<li>...</li>
	<li>...</li>
	<li>...</li>
	</ul>
</li>
<li>...</li>
...
</ul>


/*** Nav bar styles ***/

ul.nav,
.nav ul{
/*Remove all spacings from the list items*/
	margin: 0;
	padding: 0;
	cursor: default;
	list-style-type: none;
	display: inline;
}

ul.nav{
	display: table;
}
ul.nav>li{
	display: table-cell;
	position: relative;
	padding: 2px 6px;
}

ul.nav li>ul{
/*Make the sub list items invisible*/
	display: none;
	position: absolute;
	max-width: 40ex;
	margin-left: -6px;
	margin-top: 2px;
}

ul.nav li:hover>ul{
/*When hovered, make them appear*/
	display : block;
}

.nav ul li a{
/*Make the hyperlinks as a block element, sort of a hover effect*/
	display: block;
	padding: 2px 10px;
}

/*** Menu colors (customizable) ***/

ul.nav,
.nav ul,
.nav ul li a{
	background-color: #fff;
	color: #369;
}


ul.nav li:hover,
.nav ul li a:hover{
	background-color: #369;
	color: #fff;
}

ul.nav li:active,
.nav ul li a:active{
	background-color: #036;
	color: #fff;
}

ul.nav,
.nav ul{
	border: 1px solid #369;
}

.nav a{
	text-decoration: none;
}

CB2thephp

01-11-2006 18:42

IE6 en lager ondersteund hover niet voor andere li, het ondersteund alleen a. Je kunt hiervoor een klein javascript bijvoegen om het op te lossen.

Hier heb je die van mij:

(html)


    <div id="menu">
      <ul>
        <li><a class="menu" href="http://test.ehvdames1.nl/index.php">Home</a></li>
        <li onmouseover="this.className='msieFix'" onmouseout="this.className=''" ><a class="menu" href="#">Artikelen</a>
          <br />
          <br />
          <ul>
            <li><a href="http://test.ehvdames1.nl/artikelen/001.php">Waldnet 16-10-2006</a></li>
            <li><a href="http://test.ehvdames1.nl/artikelen/002.php">De Gelderlander 16-10-2006</a></li>
            <li><a href="http://test.ehvdames1.nl/artikelen/003.php">De Stentor 16-10-2006</a></li>
          </ul>
        </li>
      </ul>
    </div>

Voeg de rest van html code maar toe en gebruik doctype strict.

(css)


#menu {
  background-color: rgb(4,25,67);
  color           : #000;
  height          : 31px;
  width           : 100%;
  padding         : 2px 0;
  font-size       : 13px;
}

#menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#menu li {
  float  : left;
  margin : 0.2em 0.2em;
}

#menu li a.menu {
  background-color : rgb(4,25,67);
  height           : 24px;
  line-height      : 24px;
  float            : left;
  width            : 7em;
  display          : block;
  border           : 1px solid rgb(255,141,41);
  color            : rgb(255,141,41);
  text-decoration  : none;
  text-align       : center;
}

li ul { display: none; }

li:hover ul, li.msieFix ul {
  display          : block;
  position         : absolute;
  width            : 12em;
  background-color : rgb(4,25,67);
  color            : rgb(255,141,41);
  border           : 1px solid rgb(255,141,41);
}

Check maar hoe ik het heb gedaan. Je zult de verschillen misschien wel zien. Trouwens het is volledig xhtml1 valid. :D

Getest en werkend in IE5 en hoger(lager weet ik niet), FF alle versie, Opera, Safari, Netscape en nog wat onbekende.

Reageren

Inloggen om te reageren