Hi guys, I am new to css and it is very confusing. I am trying to make the vertical menu work, but it does not show up on the right of the button!
body
{
background-image:url('images/bg.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right bottom;
}
/*--- Layout ---*/
#image1{
width:300px;
height:500px;
clear:left;
}
#container{
width:950px;
}
nav{
width:250px;
float:left;
}
#gallery{
width:650px;
height:500px;
float:left;
}
/*---scrollbar---*/
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: white;
}
::-webkit-scrollbar-thumb {
background: -webkit-linear-gradient(left, #65ccff, #d4f1ff);
border: 1px solid #000000;
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4);
}
/*about*/
h5 span {
color: black;
font: 12px/12px Helvetica, Sans-Serif;
letter-spacing: 1px;
background: rgb(255, 255, 255); /* fallback color */
background: rgba(255,255, 255, 0.7);
padding: 0px;
}
.image1 {
position: absolute;
left:230px;
width: 100%; /* for IE 6 */
}
h5 {
position: absolute;
top: 100px;
left: 125px;
width: 100%;
}
/*---Gallery---*/
#gallery a{
display:block;
font-size:20;
background: #ffe4d3;
width:150px;
height:150px;
float:left;
text-align:center;
margin-right:10px;
margin-bottom:10px;
box-shadow: 3px 3px 3px 1px #999
}
/*---Flash---*/
#flash1{
float:left;
top:50px;
left:250px;
clear:left;
position:absolute;
}
#flash2{
float:left;
top:50px;
left:250px;
position:absolute;
}
/*---headings---*/
h1{
color: black;
-webkit-text-fill-color: #00135c;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #89a2ff;
text-align:center;
position:absolute;
top:100px;
left:300px;
clear:left;
}
h2{
color: white;
font-size:20pt;
-webkit-text-fill-color: #87CEEB;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
clear:left;
text-align:center;
}
h3{
color: white;
-webkit-text-fill-color: grey;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #000000;
clear:left;
text-align:center;
}
h6{
text-decoration:none;
color: black;
font-family: helvetica, sans-serif;
font-size:20pt;
clear: left;
position:absolute;
top:50px;
left:300px;
text-align:center;
}
/*--- Navigation ---*/
nav ul{
margin:3px;
padding:50px;
}
nav ul li{
text-align:left;
list-style:none;
display:block;
width:260px;
height:40px;
}
nav a{
display:block;
width:130px;
height:20px;
margin-bottom:20px;
text-align:center;
font-family:helvetica, san-serif;
color:black;
background:#b2e1ff;
text-shadow: 2px 2px #e1f1ff;
text-decoration: none;
}
nav a:visited{
color:black;
}
nav a:hover{
background-color:#a4d4de;
color:black;
}
nav a:active{
color:202020;
}
.first{
border-top-left-radius:10px;
}
.last{
border-top-right-radius:10px;
}
/*---submenu---*/
nav li ul {
position: relative;
width: 10em;
left: -999em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
HTML of page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link href="style.css" rel="stylesheet" media="screen">
<script type="text/javascript">
<!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
</script>
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Home<img src=
"icons/image00.gif"></a></li>
<li><a href="about.html">About<img src=
"icons/image01.gif"></a></li>
<li><a href="gallery.html">Gallery<img src=
"icons/image02.gif"></a>
<ul>
<li><a href="gallery.html">Graphics</a></li>
<li><a href="flash.html">Flash</a></li>
</ul>
</li>
<li><a href="contact.html">ContactMe<img src=
"icons/image03.gif"></a></li>
</ul>
</nav>
<h1>Welcome to Mindy's portfolio page!</h1>
</body>
</html>
please please help me T____________T
PaulOB
December 13, 2013, 3:54pm
2
HI,
I’m not quite sure what you are doing with the different widths for the list and anchors but the following will make the menu show.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link href="style.css" rel="stylesheet" media="screen">
<style type="text/css">
body {
background-image:url('images/bg.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right bottom;
}
/*--- Layout ---*/
#image1 {
width:300px;
height:500px;
clear:left;
}
#container { width:950px; }
nav {
width:250px;
float:left;
}
#gallery {
width:650px;
height:500px;
float:left;
}
/*---scrollbar---*/
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: white;
}
::-webkit-scrollbar-thumb {
background: -webkit-linear-gradient(left, #65ccff, #d4f1ff);
border: 1px solid #000000;
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4);
}
/*about*/
h5 span {
color: black;
font: 12px/12px Helvetica, Sans-Serif;
letter-spacing: 1px;
background: rgb(255, 255, 255); /* fallback color */
background: rgba(255,255, 255, 0.7);
padding: 0px;
}
.image1 {
position: absolute;
left:230px;
width: 100%; /* for IE 6 */
}
h5 {
position: absolute;
top: 100px;
left: 125px;
width: 100%;
}
/*---Gallery---*/
#gallery a {
display:block;
font-size:20;
background: #ffe4d3;
width:150px;
height:150px;
float:left;
text-align:center;
margin-right:10px;
margin-bottom:10px;
box-shadow: 3px 3px 3px 1px #999
}
/*---Flash---*/
#flash1 {
float:left;
top:50px;
left:250px;
clear:left;
position:absolute;
}
#flash2 {
float:left;
top:50px;
left:250px;
position:absolute;
}
/*---headings---*/
h1 {
color: black;
-webkit-text-fill-color: #00135c;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #89a2ff;
text-align:center;
position:absolute;
top:100px;
left:300px;
clear:left;
}
h2 {
color: white;
font-size:20pt;
-webkit-text-fill-color: #87CEEB;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
clear:left;
text-align:center;
}
h3 {
color: white;
-webkit-text-fill-color: grey;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #000000;
clear:left;
text-align:center;
}
h6 {
text-decoration:none;
color: black;
font-family: helvetica, sans-serif;
font-size:20pt;
clear: left;
position:absolute;
top:50px;
left:300px;
text-align:center;
}
/*--- Navigation ---*/
nav ul {
margin:3px;
padding:50px;
list-style:none;
}
nav ul li {
text-align:left;
list-style:none;
display:block;
width:260px;
position:relative;
}
nav a {
display:block;
width:130px;
height:20px;
margin-bottom:20px;
text-align:center;
font-family:helvetica, san-serif;
color:black;
background:#b2e1ff;
text-shadow: 2px 2px #e1f1ff;
text-decoration: none;
}
nav a:visited { color:black; }
nav a:hover {
background-color:#a4d4de;
color:black;
}
nav a:active { color:202020; }
.first { border-top-left-radius:10px; }
.last { border-top-right-radius:10px; }
/*---submenu---*/
nav li ul {
position: absolute;
width: 10em;
left: -999em;
top:0;
margin:0 0 0 131px;
padding:0;
}
nav li:hover { z-index:99 }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */ left: auto; }
</style>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
</script>
</head>
<body>
<nav>
<ul id="nav">
<li><a href="index.html">Home<img src="icons/image00.gif"></a></li>
<li><a href="about.html">About<img src="icons/image01.gif"></a></li>
<li><a href="gallery.html">Gallery<img src="icons/image02.gif"></a>
<ul>
<li><a href="gallery.html">Graphics</a></li>
<li><a href="flash.html">Flash</a></li>
</ul>
</li>
<li><a href="contact.html">ContactMe<img src="icons/image03.gif"></a></li>
</ul>
</nav>
<h1>Welcome to Mindy's portfolio page!</h1>
</body>
</html>
Note that you missed the #nav id from the ul so the hover styles were not applied. The nested ul needs to be absolutely placed (not relative) and the parent list needs position:relative for the stacking context. You then set the top position for the nested list and set a left margin equal to the width of the main menu to make it start at the right side.
That JS is for IE6 support only so you can get rid of it if you aren’t supporting IE6.
felgall
December 13, 2013, 9:53pm
3
If you do want to support IE6 then The JavaScript is best placed in a separate .htc file or if you insist on having it in the page then place it at the bottom and wrap the entire thing in HTML conditional comments.
You don’t need to test for window.attachEvent because IE6 does support that - the browsers that don’t support it don’t need any of that code.
Also you can get rid of the wrapper around the JavaScript.
<!--//--><![CDATA[//><!--
//--><!]]>
That’s only needed if you want to comment out the script when the page is served as XHTML (which IE8 and earlier do not understand).