Help - Search - Members - Calendar
Full Version: dropdown menu problem
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
MindyT
Hi, I'm working on mediaservicesunlimited.com/bixler/homepage.php and I'm not understanding why the background color of the dropdown menu stops right after the word. I have played with the width of the list but it's not helping. if I could get some guidance, I would really appreciate it!


CODE

function headerInfo() {
return <<<HEREDOC
<header>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a>
            <ul>
                   <li class="submenu"><a href="#">Agents </a></li>
                <li class="submenu"><a href="#">Locations</a></li>                
            </ul>
      <li><!--end of about us menu list -->  
        <li><a href="#">Services</a></li>              
        <li><a href="quote.php" tabindex="4" accesskey="Q">Get A Quote</a></li>
        <li><a href="#">Contact</a>
            <ul>
                <li class="submenu"><a href="pay-my-bill.php">Pay My Bill</a></li>
                <li class="submenu"><a href="contact.php">Cotasct Us</a></li>    
           </ul>
  
</nav>  
    <figure id="logo">
           <img src="assets/bixlerlogo.png" width="304" height="88" alt=""/>
    </figure>
    <h3>Service Beyond The Contract </h3>
</header>
HEREDOC;
}


CODE

    nav {
        background-color:#000000;
        padding-top:2%;
        width:40%;
        height:27px;
        margin-top:2%;
        margin-left:auto;
        margin-right:auto;
        padding-left:3%;
    }
    nav a {
        color:red;
    }
        
    nav ul {
        list-style-type:none;
    }
    nav > ul > li {
        background-color:#000000;
        position:relative;
    }
    nav > ul li a {
        background-color:#000000;
    }
    
    nav li {
        
        float:left;
        margin-right:3%;
    }
    nav > ul > li > ul {
        display:none;
        position:absolute;
    }
    nav > ul > li:hover > ul {
        display:block;
    }
    nav ul ul li {
        display:block;
        width:60px;
    }
Christian J
The submenus are transparent, it's the background of the links you see.
MindyT
So what do I need to do?
Christian J
Give the submenu UL or LI a background.
MindyT
That did it, thanks so much for the help!

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.