SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dropdown menu dont work ?

    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 :
    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:
    Code:
    <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:
    Code:
    .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
    Code:
    .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
    Last edited by Paul O'B; Aug 8, 2013 at 09:52. Reason: code tags added

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,823
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You need a proper list structure for this to work as you need to action the change when you hover on a list element and then can target the nested ul. In your example you are saying "a:hover ul" and a ul can never be inside an anchor element.

    You need a rough structure like this:

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .navigation {
    	text-align: left;
    	display: block;
    	line-height: 50px;
    	padding: 5px 0px;
    }
    .navigation ul {
    	list-style-type: none;
    	margin:0;
    	padding:0;
    	width:100%;
    }
    .navigation ul:after{
    	content:".";
    	clear:both;
    	display:block;
    	visibility:hidden;
    	height:0;	
    }
    .navigation li {
    	position: relative;
    	float:left;
    	vertical-align:middle;
    }
    .navigation a {
    	float:left;
    	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 li:hover > a { color: #333; }
    .navigation li:hover{z-index:9}
    .navigation a:active { background: #fff; }
    .navigation li > ul {
    	margin-left:-999em;/* hide it*/
    	position: absolute;
    	top:100%;
    	padding:5px 0 0;
    	left:0;
    	width:150px;/* best to set a width*/
    }
    .navigation li:hover > ul { margin-left:0;/* show it*/ }
    .navigation li li a,.navigation li li{
    	display:block;
    	float:none;
    }
    
    </style>
    </head>
    
    <body>
    <nav class="navigation">
    		<ul>
    				<li><a href="#">Home</a></li>
    				<li><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>
    				</li>
    				<li><a href="#?cat=10">Inspiration</a> <a href="#?cat=11">Freebies</a></li>
    				<li><a href="#" target="_blank">RSS Feed of all articles</a></li>
    				<li><a href="#" target="_blank">JOIN US on TWITTER</a>
    				<li><a href="#"target="_blank">JOIN US on FACEBOOK</a></li>
    				<li><a href="#?page_id=5">Contact Us</a></li>
    		</ul>
    </nav>
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thank very much.
    Originally,I suspect the problem is in "a:hover ul" & search internet for hint. But I cant find anything.

    Best Regards,
    Tony

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,823
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by tonyliu View Post
    Hi Paul,

    Thank very much.
    Originally,I suspect the problem is in "a:hover ul" & search internet for hint. But I cant find anything.
    Tony
    When you say a:hover ul you would have needed to have the ul nested inside the anchor for that to work

    <a href=#">Some link
    <ul><li><a href="#">Another link</a></li></ul>
    </a>

    Although html5 allows you to wrap anchors around block elements (ughhh!) you can't then nest another anchor inside an anchor as anchors can only have one destination.

    What you need to do is that when hovering the parent list element you can then show the nested ul.

    Code:
    <ul>
    		<li><a href="#">Home</a></li>
    		<li><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>
    		</li>
    </ul>
    I hope that explains it a little better.

  5. #5
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Understand,thanks.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •