www.webdeveloper.com
Results 1 to 9 of 9

Thread: CSS BG Color

Hybrid View

  1. #1
    Join Date
    Jun 2011
    Posts
    64

    Question CSS BG Color

    Hi,

    I have a CSS navigation menu but when I change the background color on #navMenu li it changes the background colour on the top menu as well as the drop down menus, but I only want to change the BG color on the drop downs. How can I do this?

    Code:
        <div id="navMenu">
    		<ul>
    			<li><a href="../index.html">Home</a>
    				<ul>
    					<li></li>
    					<li></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    
    
    	<div id="navMenu">
    		<ul>
    			<li><a href="http://about.me/thomashochkins">About</a>
    				<ul>
    					<li></li>
    					<li></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    
    
    	<div id="navMenu">
    		<ul>
    			<li><a href="../gallery.html">Gallery</a>
    				<ul>
    					<li><a href="../download.html">Download</a></li>
    					<li><a href="../photos.html">Photos</a></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    
    	<div id="navMenu">
    		<ul>
    			<li><a href="../videos.html">Videos</a>
    				<ul>
    					<li></li>
    					<li></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    
    
    	<div id="navMenu">
    		<ul>
    			<li><a href="../contact.html">Contact</a>
    				<ul>
    					<li></li>
    					<li></li>
    				</ul>
    			</li>
    		</ul>
    	</div>

    Code:
    #navMenu {
    	margin:0;
    	padding:0;
    }
    
    #navMenu ul {
    	margin:0;
    	padding:0;
    	line-height:30px;
    }
    
    #navMenu li {
    	margin:0;
    	padding:0;
    	list-style:none;
    	float:left;
    	position:relative;
    	background-color:#f0eccd;
    }
    
    #navMenu ul li a {
    	text-align:center;
    	font-family:Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	text-decoration:none;
    	width:85px;
    	height:30px;
    	display:block;
    	color:#ff9a29;
    }
    
    #navMenu ul ul {
    	position:absolute;
    	visibility:hidden;
    	top:30px;
    }
    
    #navMenu ul li:hover ul {
    	visibility:visible;
    }
    
    #navMenu li:hover {
    	background-color:#ff9a29;
    }
    
    #navMenu ul li:hover ul li a:hover {
    	background:#ff9a29;
    	color:#FFF;
    }
    
    #navMenu a:hover {
    	color:#FFF;
    }
    
    #navMenu ul li:hover a {
    	color:#fff;
    }
    Thanks
    Thomas

  2. #2
    Join Date
    Apr 2011
    Location
    Missouri
    Posts
    83
    All of your menus are using the same id. Ids by definition are unique.

  3. #3
    Join Date
    Jun 2011
    Posts
    64

    Question Ok

    Ok, so is there a way for me to fix it?


    Thanks
    Thomas

  4. #4
    Join Date
    Apr 2011
    Location
    Missouri
    Posts
    83
    Use a class. class="navmenu" instead of id="navmenu"

    Your CSS will be .navmenu instead of #navmenu.

  5. #5
    Join Date
    Jun 2011
    Posts
    64

    Unhappy Sorry!

    Sorry, I don't really understand! I'm not really very good at CSS.

    Please could you explain in more detail?


    Thanks
    Thomas

  6. #6
    Join Date
    Apr 2011
    Location
    Missouri
    Posts
    83
    Code:
    <div class="navMenu">
    		<ul>
    			<li><a href="../index.html">Home</a>
    				<ul>
    					<li></li>
    					<li></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    
    
    	<div id="navMenu">
    		<ul>
    			<li><a href="http://about.me/thomashochkins">About</a>
    				<ul>
    					<li></li>
    					<li></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    
    
    	<div class="navMenu">
    		<ul>
    			<li><a href="../gallery.html">Gallery</a>
    				<ul>
    					<li><a href="../download.html">Download</a></li>
    					<li><a href="../photos.html">Photos</a></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    
    	<div class="navMenu">
    		<ul>
    			<li><a href="../videos.html">Videos</a>
    				<ul>
    					<li></li>
    					<li></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    
    
    	<div class="navMenu">
    		<ul>
    			<li><a href="../contact.html">Contact</a>
    				<ul>
    					<li></li>
    					<li></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    Code:
    .navMenu {
    	margin:0;
    	padding:0;
    }
    
    .navMenu ul {
    	margin:0;
    	padding:0;
    	line-height:30px;
    }
    
    .navMenu li {
    	margin:0;
    	padding:0;
    	list-style:none;
    	float:left;
    	position:relative;
    	background-color:#f0eccd;
    }
    
    .navMenu ul li a {
    	text-align:center;
    	font-family:Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	text-decoration:none;
    	width:85px;
    	height:30px;
    	display:block;
    	color:#ff9a29;
    }
    
    .navMenu ul ul {
    	position:absolute;
    	visibility:hidden;
    	top:30px;
    }
    
    .navMenu ul li:hover ul {
    	visibility:visible;
    }
    
    .navMenu li:hover {
    	background-color:#ff9a29;
    }
    
    .navMenu ul li:hover ul li a:hover {
    	background:#ff9a29;
    	color:#FFF;
    }
    
    .navMenu a:hover {
    	color:#FFF;
    }
    
    .navMenu ul li:hover a {
    	color:#fff;
    }

  7. #7
    Join Date
    Jun 2011
    Posts
    141
    not 100&#37; on this because i only have basic knowledge of css too but i think what i would do is give the top link (list item) a class of outer for example and then the inner links (list items) a class of outer and then in your css rather than having your background-color on .navmenu li you can have it on .outer or .inner and it should just change one or the other.

    Hope this helps (or it could just all be waffle).

  8. #8
    Join Date
    Jun 2011
    Posts
    64

    Thumbs up Thanks

    Yes, thank you! That did the job perfectly!


    Thanks
    Thomas

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles