HI guys hope your all well. I'm in the final stages of getting my website created.
I wanted a simple HTML/CSS dropdown menu I have found this, from this website Click Here
I have followed it to the letter
This is my code so far (HTML code)
<html>
<head>
<title>Nav</title>
</head>
<body>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="historyofweb.php">History of the Website </a></li>
<li><a href="research_into_dis.php">Information About Dysaculia</a>
<ul>
<li><a href="what_is_dyscaculia.php">What is Dyscaculia?</a>
<li><a href="causes_of_dyscaculia.php">Underlying causes of Dyscaculia</a>
<li><a href="dyscaculia_neglected.php">Why has Dyscaculia been neglected?</a>
<li><a href="other_names_for_dyscaculia.php">By what names are Dyscaculia are reconfigured by the public?</a>
<li><a href="warning_signs.php">What are the warning signs of Dyscaculia?</a>
<li><a href="identifying_dis.php">Identifying Dyscaculia</a>
<li><a href="gove_definition.php">How does the UK Government and DfES class Dyscaculia as?</a>
</ul>
</li>
<li><a href="questionniare_analysis.php">Results of Questionniares that were given out to help develope this website</a>
<ul>
<li><a href="onlinetests.php">Do Online Tests Help you</a></li>
<li><a href="maths_topic.php">Maths Topic</a></li>
<li><a href="How_ would_ you_ like_ to_ access_ a_ new_ piece _of_ Mathematical _software.php">How would you like to access a new Peice of new software?</a>
<li><a href="interact_with_software.php">Do you think its important to interact with a peice of software/a>
<li><a href="useful_of_new_software.php">Would you find it useful with the devekioment of a new peice of maths software?</a>
<li><a href="use_of_other_software.php">Have you ever had the use of any Mathematical software</a>
<li><a href="when_learnning.php">When Learning how do you prefer to learn?</a>
<li><a href="bbcbitesize.php">What Features of the BBC Bitesize website do you find useful?</a>
</li>
</ul>
</li>
<li><a href="fractions_intro.php">Fractions Introduction</a>
<ul>
<li><a href="fractions_adding.php">Fractions:Adding</a></li>
<li><a href="fractions_subtracting.php">Fractions:Subtracting</a></li>
<li><a href="fractions_multiplication.php">Fractions:Multiplication</a></li>
<li><a href="division_fractions.php">Fractions:Fractions</a></li>
</ul>
</li>
</li>
<li><a href="start.php">End of Module Quiz</a></li>
</ul>
<li><a href="profile.php">Personal Profile</a>
<ul>
<li><a href="changepassword.php">Change Password</a></li>
<li><a href="update.php">Update Details</a></li>
</ul>
</li>
<li><a href="#">Logout</a></li>
</ul>
</nav>
</body>
</html>
This is the CSS code that I'm trying to put into my website CSS code
av ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
This is the CSS code I have for the website, do i need to replace this or get rid of it? I'm just a little confused about this bit
.wrapper {width: 980px; margin: 0 auto;}
.header:after {content:"";height:0;display:block;visibility:hidden;clear:both;}
.header {background: #ff8400; border-bottom: 5px solid #f16702;}
.header .branding-title {float: left; margin: 0 0 0 12px; font: 0/0 serif; text-shadow: none; color: transparent; width:122px;height:77px;background:url(../img/branding-title.png) 0 14px no-repeat;padding: 14px 0;}
.header .branding-title a {display: block; height: 77px; width: 122px;}
.header .nav {float: right; top: 0; right: 0; margin: 0; position: relative; left: 15px; z-index: 99999999;}
.header .nav li {display: inline-block; margin: 0; list-style: none;}
.header .nav li.cart {margin-left: 64px; border: 0 solid #f16702; border-width: 0 8px;}
.header .nav li a {
color: white;
text-decoration: none;
display: block;
line-height: 95px;
padding: 10px 0 0;
margin: 0 0 0 50px;
width: 90px;
text-align: right;
background: url('../img/nav-sprite.png') no-repeat 0px 105px;
text-transform: uppercase;
white-space: nowrap;
}
.header .nav li.on a {text-decoration: underline;}
.header .nav li a:hover, .header .nav li a:active {color: #FFE200;}
.header .nav li.shirts a {background-position: 0px 0px;}
.header .nav li.contact a {background-position: 0px -105px;}
.header .nav li.cart a {
width: 122px;
font-size: 0/95px serif;
text-shadow: none;
color: transparent;
background-position: 16px -216px;
margin: 0;
}
When I run my index page (this is to make sure its working) all I'm getting is a bulleted list and now how it should look like!
Sorry to be such a pain can anyone give me a hint as to where I'm going wrong
Any help would be much appreicated
Rich
