SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Threaded View

  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    0 Post(s)
    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:
    <div id="navigation">
    			<li><a href="">Pirmasis</a></li>
    				<ul class="sublist">
    				<ul class="sublist">
    				<div id="subdiv">
    			<li><a href="">Antrasis</a></li>
                            ...few other <li> ...
    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

Tags for this Thread


Posting Permissions

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