SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with display:none and display:block on hover

    Hello everyone.
    I am a new starter in web design/development, trying to master html/css now.
    I came across one problem that I dont know how to solve, I am sure I've done mistake somewhere, but have no idea where.
    Trying to make nested list on hover, done few times before, everything worked fine, now not sure where I've done mistake, I'm sure it is a simple fix, just please show me where guys

    Here is the code:
    HTML
    Code:
    <div id="navigation">
    		<ul>
    			<li><a href="">Pirmasis</a></li>
    				
    				<ul class="sublist">
    					<li>Vienetas</li>
    					<li>Dvejetas</li>
    					<li>Trejetas</li>
    					<li>Ketvertas</li>
    					<li>Penketas</li>
    				</ul>
    				
    				<ul class="sublist">
    					<li>Vienuolika</li>
    					<li>Dvylika</li>
    					<li>Trylika</li>
    					<li>Keturiolika</li>
    				</ul>
    				
    				<div id="subdiv">
    					<h4>SKAICIUS</h4>
    				</div>
    			<li><a href="">Antrasis</a></li>
                            ...few other <li> ...
                  </ul>
    CSS
    Code:
    body { font-family: sans-serif; width: 800px; }
    
    #header {
    	background-color: grey;
    	width: 100%;
    	height: 100px;
    	}
    	
    #navigation {
    	background-color: grey;
    	width: 100%;
    	height: 100px;
    	}
    	
    #navigation > ul {
    	padding: 0;
    	margin: 0;
    	list-style: none;
    	}
    	
    #navigation > ul > li {
    	display: inline;
    	}
    	
    #navigation li a {	
    	text-decoration: none;
    	padding: 5px 15px;
    	margin-left: 10px;
    	margin-top: 20px;
    	border: 1px solid blue;
    	color: black;
    	background-color: white;
    	float: left;
    	}
    .sublist, #subdiv {
    	display: none;
    	}
    #navigation li a:hover { 
    	background-color: blue; 
    	color: white;
    	}
    
    
    	
    #navigation li a:hover  .sublist { 
    	background-color: red;
    	display: block; }
    Last edited by ralph.m; Feb 25, 2013 at 06:02. Reason: code tags

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Hi MrPaulius. Welcome to the forums.

    Yeah, your code is a bit of a mess. Give this a try:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    	
    <style media="all">
    
    .wrapper {width: 800px; margin: 0 auto;}
    
    #navigation {
    	background-color: grey;
    	padding: 0;
    	margin: 0;
    	list-style: none;
    }
    
    #navigation:after {
    	content:"";
    	display:table;
    	clear:both;
    }
    
    #navigation > li {
    	float: left;
    	position: relative;
    	margin-left: 10px;
    	margin-top: 20px;
    }
    
    #navigation li a {	
    	text-decoration: none;
    	padding: 5px 15px;
    	border: 1px solid blue;
    	color: black;
    	background-color: white;
    	display: block;
    }
    
    #navigation li a:hover { 
    	background-color: blue; 
    	color: white;
    }
    
    #navigation li ul {
    	position: absolute;
    	left: -9999px;
    	background: red;
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    
    #navigation li:hover ul {
    	left: 0;
    }
    </style>
    	
    </head>
    <body>
    <div class="wrapper">
    	<ul id="navigation">
    		<li><a href="">Pirmasis</a>
    			<ul>
    				<li><a href="#">Vienetas</a></li>
    				<li><a href="#">Dvejetas</a></li>
    				<li><a href="#">Trejetas</a></li>
    				<li><a href="#">Ketvertas</a></li>
    				<li><a href="#">Penketas</a></li>
    			</ul>
    		</li>
    		<li><a href="">Pirmasis</a>
    			<ul>
    				<li><a href="#">Vienuolika</a></li>
    				<li><a href="#">Dvylika</a></li>
    				<li><a href="#">Trylika</a></li>
    				<li><a href="#">Keturiolika</a></li>
    			</ul>
    		</li>
    	</ul>
    </div>
    </body>
    </html>


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
  •