SitePoint Sponsor

User Tag List

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

    Help with a quick CSS problem please?

    Hi, I'm just learning CSS and I'm having an issue with my dropdown menu if you hover over the "Games" tab. I am trying to remove the black border under handheld gaming, but keep the ones under PC and Console. I've tried creating a separate div and removing the border, but it doesn't seem to overwrite the CSS code in the header. What do I need to do? Any help would be appreciated. Here is the code you can copy and paste.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title> Assignment 4 - NavBar 2 </title>
    <style type="text/css">
    
    body{
    background-color:#39F;
    }
    
    #container{
    width:800px;
    padding:0px;
    margin:20px auto;
    }
    
    #links {
    margin:0px;
    margin-bottom:50px;
    width:800px;
    padding:0px;
    
    }
    
    #links li {
    list-style:none;
    float:left;
    background-color:#FF0;
    width:160px;
    position:relative;
    margin:0px;
    
    }
    
    #links li a {
    display:block;
    color:#F00;
    font-size:20px;
    font-weight:bold;
    text-align:center;
    text-decoration:none;
    line-height:40px;
    border:5px solid #333;
    border-bottom:0px;
    border-top:0px;
    border-right:0px;
    }
    
    #links2 li a{
    border-left:none;
    }
    
    #links li:hover{
    background:#6FF;
    }
    
    #links li ul{
    display:none;
    list-style:none;
    position:absolute;
    top:40px;
    left:3px;
    list-style:none;
    padding:0px;
    }
    
    #links li:hover ul{
    display:block;
    }
    
    #links li ul li a{
    height:25px;
    line-height:25px;
    text-align:center;
    color:#F00;
    font-size:12pt;
    font-weight:bold;
    text-decoration:none;
    border-bottom:3px solid #000;
    border-left:0px;
    }
    
    
    
    </style>
    </head>
    <body>
    <div id="container">
    <ul id="links">
    <div id="links2">
    <li> <a href="#"> Home </a> </li>
    </div>
    <li> <a href="#"> Games </a>
    <ul>
    <li> <a href="#"> PC Gaming </a> </li>
    <li> <a href="#"> Console Gaming </a> </li>
    <li> <a href="#"> Handheld Gaming </a> </li>
    </ul>
    </li>
    <li> <a href="#"> Forums </a> </li>
    <li> <a href="#"> Advertising </a> </li>
    <li> <a href="#"> Contact </a> </li>
    </ul>
    
    </div>
    
    
    </body>
    </html>
    thank you
    Last edited by ralph.m; Sep 19, 2013 at 03:30. Reason: added tags, removed links

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    You can add this to your styles:

    Code:
    #links li ul li:last-child a {
    border-bottom: none;
    }


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
  •