Jump to content

CSS Menu Problem


andrew6607

Recommended Posts

Hello,

I am currently trying to design my website with a dropdown menu. But, i am running into a slight problem with the allignment. I want the menu to allign to the center, but i can't get it to do that for some reason. I'm sure it will be a simple fix. Any help is welcome!

 

Code is Below:

style.css

@charset "utf-8";
/* CSS Document */
html body{
margin:0;
padding:0;
vertical-align:middle;
background-color:#CCC;
}
#header{
margin:auto;
width:800px;
}
#navMenu{
margin:0;
padding:0;
}
#navMenu ul{
margin:0;
padding:0;
line-height:30px;
}
#navMenu li{
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:url(redBG.png);
}
#navMenu ul li a{
text-align:center;
font-family:"MS Serif", "New York", serif;
text-decoration:none;
height:30px;
width:100px;
display:block;
color:#FFF;
}
#navMenu ul ul{
position:absolute;
visibility:hidden;
top:30px;
}
#navMenu ul li:hover ul{
visibility:visible;
background:#000;
}
#navMenu li:hover{
background:url(redBGOver.png);
color:#FFF;
}
#navMenu ul li:hover ul li a:hover{
background:#CCC;
color:#000;	
}
#navMenu a:hover{
color:#000;	
}
#navMenu ul li:hover ul li a{
background:#000;
border:1px solid #FFF;
}

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Andrew Erhardt - Blog and Portfolio</title>
</head>

<body>
<div id="header">
<img src="images/header.png" />
</div>
<div id="navMenu">
<ul>
        	<li><a href="#">Home</a>
            	<ul>
                </ul><!-- End Inner UL Tag -->
            </li><!-- End Main LI Tag -->
            <li><a href="#">About Me</a>
            	<ul>
                </ul><!-- End Inner UL Tag -->
            </li><!-- End Main LI Tag -->
             <li><a href="#">Portfolio</a>
            	<ul>
                <li><a href="#">Websites</a></li>
                <li><a href="#">Photos</a></li>
                <li><a href="#">Programs</a></li>
                </ul><!-- End Inner UL Tag -->
            </li><!-- End Main LI Tag -->
            <li><a href="#">Live Show</a>
            	<ul>
                <li><a href="#">Show Page</a></li>
                <li><a href="#">Pre-Recorded</a></li>
                <li><a href="#">Chat Rules</a></li>
                </ul><!-- End Inner UL Tag -->
            </li><!-- End Main LI Tag -->
        </ul><!-- End Main UL Tag -->
</div>
</body>
</html>

A screenshot of the website i'm working on, is attached, to help give you a better idea of what i'm trying to explain.

 

 

 

[attachment deleted by admin]

Link to comment
https://forums.phpfreaks.com/topic/214846-css-menu-problem/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.