Hi,
I am new to css. Yesterday,I download a website template and want to modify the original menu to a drop down menu.
HTML code :
<nav class="navigation">
<a href="#">Home</a>
<a href="#?cat=5">Tutorials</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">Web Design</a></li>
</ul>
<a href="#?cat=10">Inspiration</a> <a href="#?cat=11">Freebies</a>
<a href="#" target="_blank">RSS Feed of all articles</a> <a
href="#" target="_blank">JOIN US on TWITTER</a> <a href="#"
target="_blank">JOIN US on FACEBOOK</a> <a
href="#?page_id=5">Contact Us</a> </nav>
where I add the lines:
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">Web Design</a></li>
</ul>
The style.css is as follows:
.navigation {
text-align: left;
display: block;
line-height: 50px;
padding: 5px 0px;
}
.navigation a {
display: inline-block;
margin: 0px 4px;
padding: 0px 6px;
color: #aaa;
line-height: 30px;
font-size: 15px;
text-shadow: 1px 1px 1px #fff;
border: 1px solid #fff;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
box-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.navigation a:hover{
color: #333;
}
.navigation a:hover > ul {
display: block;
position: absolute;
}
.navigation a:active{
background: #fff;
}
.navigation ul {
list-style-type: none;
display: none;
}
.navigation ul li {
float: left
position: relative;
}
where
.navigation a:hover > ul {
display: block;
position: absolute;
}
.navigation ul {
list-style-type: none;
display: none;
}
.navigation ul li {
float: left
position: relative;
}
was added by me.
But the drop down menu doesnt.
I cant figure out what is the problem.
Can someone please advise what is the problem ?
Thanks
Tony