Currently having a go at designing my first website and am a bit stuck at the moment.
I've got a drop down menu which I can't get to horizontally align in the middle of my page, sauce:
https://www.servage.net/blog/2009/03/20/create-a-cool-css-based-drop-down-menu/
my altered CSS:
and my HTML:
The issue seems to be caused by the float left element used to control the dropdown menu position in the CSS but even with a bit more help from google i'm struggling to get it to align correctly.
I've tried various revisions of a <div> container and using a defined width for the top-level <ul> element (this causes the dropdown menu to change its width too)but nothing works quite right
Hoping someone on here will be able to point me in the right direction
I've got a drop down menu which I can't get to horizontally align in the middle of my page, sauce:
https://www.servage.net/blog/2009/03/20/create-a-cool-css-based-drop-down-menu/
my altered CSS:
Code:
ul {
font-family: arial, arial;
font-size: 1em;
margin: auto;
padding: 0;
list-style: none;
text-align: center;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
background: rgb(128,128,128);
margin-left: 0px;
white-space: nowrap;
}
ul li a:hover { background: rgba(128,128,128, 0.5); }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 0.6em;
}
li:hover a { background: rgba(128,128,128, 0.5)}
li:hover li a:hover { background: rgba(128,128,128, 0.25)}and my HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
<title>photography</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<ul>
<li><a href="">home</a></li>
<li><a href="">photography</a>
<ul>
<li><a href="">editorial</a></li>
<li><a href="">commercial</a></li>
<li><a href="">product</a></li>
</ul>
</li>
<li><a href="">about</a> </li>
<li><a href="">contact</a> </li>
</ul>
<br>
</body>
<html>The issue seems to be caused by the float left element used to control the dropdown menu position in the CSS but even with a bit more help from google i'm struggling to get it to align correctly.
I've tried various revisions of a <div> container and using a defined width for the top-level <ul> element (this causes the dropdown menu to change its width too)but nothing works quite right
Hoping someone on here will be able to point me in the right direction