Beskrivelse af opgaven:
Jeg har brug for hjælp til at få en menu til altid at være synlig øverst på alle sider.
Nedenfor er html og CSS som det er nu og som skal forbedres:
<!DOCTYPE html>
<html>
<head>
<title>forbedret men</title>
<meta name="viewport" content="width=device-width" />
<style>
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
width: 900px;
margin: 10px auto;
border: 1px #222222;
background-color: #004a87;
border-radius: 6px;
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
/* border-right: 1px solid #222; */
/* border-right: 1px #222; */
box-shadow: 1px 0 0 #444;
position: relative;
}
#menu a {
float: left;
padding: 12px 30px;
color: #fff;
text-transform: uppercase;
font: 10px Verdana, Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background: #444;
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
border-radius: 3px;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
/* -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3); */
}
#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
/* -moz-box-shadow: none; */
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color: #0186ba;
/* background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba); */
}
#menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px
Dine nødvendige færdigheder:
html
avanseret CSS
Oprettet:
20-04-2016 - kl. 08.54
Afregningsform:
Fast pris
Anslået budget (ekskl. moms):
500 kr. - 5.000 kr.
Kategori:
Desktop & Webudvikling -
CSS
Deadline for bud:
30-04-2016