Hej...
Jeg har prøvet at sætte et par
id på dine
ListItems <li> ala
m1,m2,m3 sådan at der kan refereres til dem. og så har jeg fjernet det mellemrum der var mellem dine menu punkter med
<!-- X --> ¨så er det lidt lettere med pixels regning, men du kan jo bare sætte en border-left på dem. Så jeg tænkte om det var noget lignende:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
Inline elementer-- submenu's
</title>
<body>
<div id="position">
<div class="menu">
<ul>
<li id="m1"><a href="#">menu 1</a> </li><!--
--><li id="m2"><a href="#">menu 2</a>
<ul>
<li><a href="#">undermenu 1</a> </li>
<li><a href="#">undermenu 2</a> </li>
<li><a href="#">undermenu 3</a> </li>
<li><a href="#">undermenu 4</a> </li>
</ul>
</li>
<!--
--><li id="m3"><a href="#">menu 3</a>
<ul >
<li><a href="#">undermenu 1</a> </li>
<li><a href="#">undermenu 2</a> </li>
<li><a href="#">undermenu 3</a> </li>
<li><a href="#">undermenu 4</a> </li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
Css:
<head>
<style type="text/css">
.menu ul {
margin:0px;
padding:0px;
}
.menu ul li {
list-style:none;
width: 90px;
height: auto;
text-align: center;
line-height: 30px;
position:relative;
display: inline-block;
background-color:rgb(0,63,98);
}
.menu a {
color:white;
text-decoration:none;
}
.menu a:hover {
text-decoration:underline;
}
.menu ul li ul {
display:none;
}
.menu ul li ul li {
text-align: left;
float: left;
}
.menu li:hover ul {
background-color:rgb(0,63,98);
height: 30px;
display: block;
}
.menu li li a
{color:#fff;
text-decoration:none;}
.menu li li a:hover
{text-decoration:underline;
}
#m2:hover ul {
width: 838px; padding-left trukket fra width'en på 950px
margin-left: -90px; // bredden på listItems'ene
padding-left: 112px;
}
#m3:hover ul {
width: 748px; padding-left trukket fra width'en på 950px
margin-left: -180px;
padding-left: 202px; m2's padding-left plusset med bredden på dine listItems
}
[/color]
</style>
</head>
Håber det kan bruges :-)
