Positions problemer
Jeg har en topmenu i 3 lag som jeg genererer fra min database, det kører tilsyneladende fint - men når den skal tegne 3. lag får jeg problemer med min positioner - jeg kan godt styre left positionen men med y går det øhhh ikke så godt ;o)Jeg tro måske det er når jeg "bryder" ind i mit CSS i mit loop og ændrer det der - men er ikke så meget hjemme i css - så jeg håber at der er en der kan hjælpe mig her :-)
Smider lige ASP scriptet her:
<!--#include file="db.asp"-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<HEAD>
<TITLE>menutest</TITLE>
<link rel="stylesheet" media="all" type="text/css" href="dropdown.css" />
<style type="text/css">
body, html {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<style type="text/css" media="screen"><!--
#layer1 { height: 0; width: 750px; z-index: 100; position: top; visibility: visible; }
--></style>
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="dropdown_ie.css" />
<![endif]-->
</HEAD>
<body topmargin="0">
<div id="layer1" class="menu">
<ul>
<%
Set myConn = Server.CreateObject("ADODB.Connection")
myConn.Open db
strSQL = "SELECT * FROM menu where hovedmenu = 1 "
Set rs1 = myConn.Execute(strSQL)
While Not rs1.EOF
h_menu=rs1("menuen")
bredde = rs1("bredde")
MenuID = rs1("menuID") %>
<li ><a href="<%=rs1("link")%>" onfocus="blur()" style="width:<%=bredde%>px;"><%=h_menu%></a>
<ul>
<%
strSQL = "Select Max(bredde) AS maxbredde FROM menu where overmenu = '"& MenuID &"' "
Set rs2 = myConn.Execute(strSQL)
if not rs2.eof then bredde = rs2("maxbredde")
xbredde = bredde + 1 * 1
rs2.close
strSQL = "SELECT * FROM menu where overmenu = '"& MenuID &"' "
Set rs2 = myConn.Execute(strSQL)
While Not rs2.EOF
s_menu=rs2("menuen")
menuID2 = rs2("menuID") %>
<li><a href="<%=rs2("link")%>" onfocus="blur()" style="width:<%=bredde%>px; text-align:left;"> <%=s_menu%></a>
<ul>
<%
strSQL = "Select Max(bredde) AS maxbredde FROM menu where undermenu = '"& menuID2 &"' "
Set rs3 = myConn.Execute(strSQL)
if not rs3.eof then subbredde = rs3("maxbredde")
rs3.close
strSQL = "SELECT * FROM menu where undermenu = '"& menuID2 &"' "
Set rs3 = myConn.Execute(strSQL)
While Not rs3.EOF
ss_menu=rs3("menuen") %>
<style type="text/css">
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:<%=xbredde%>px; top:0;}
</style>
<li class="menu"><a href="<%=rs3("link")%>" onfocus="blur()" style="width:<%=subbredde%>px; text-align:left;"> <%=ss_menu%></a></li>
<% rs3.MoveNext
Wend
rs3.close%>
</ul>
</li>
<%
rs2.MoveNext
Wend
rs2.close
%>
</ul>
</li>
<% rs1.MoveNext
Wend
rs1.close
myconn.close
%>
</ul>
</div>
</BODY>
</HTML>
Og det faste CSS her:
.menu {font-family: verdana; width:850px; height:100px; position:relative; font-size:11px; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#fff; height:25px; font-weight: bold; text-align:center; color:#ffffff; border:0px; background:#193441; line-height:25px; font-size:12px; overflow:hidden;}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li a {padding-right:0px;}
.menu ul li ul {display: none;}
.menu ul li ul li a {padding-right:0px;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#3E606F;}
.menu ul li:hover ul {display:block; position:absolute; top:25px; left:0; width:115px; }
.menu ul li:hover ul li a.hide {background:#91aa9d; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#91aa9d; color:#fff;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#91aa9d; color:#fff; border-bottom :1px solid #193441;}
.menu ul li:hover ul li a:hover {background:#d1dbbd; color:#fff; }
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:115px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}
Her kan I se hvordan den opfører sig:
www.meyerweb.dk/demo
