The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> dropdown menu problem
MindyT
post Aug 12 2016, 09:15 PM
Post #1


Advanced Member
****

Group: Members
Posts: 165
Joined: 12-November 13
Member No.: 19,963



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;
    }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 13 2016, 06:55 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7



The submenus are transparent, it's the background of the links you see.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MindyT
post Aug 13 2016, 01:25 PM
Post #3


Advanced Member
****

Group: Members
Posts: 165
Joined: 12-November 13
Member No.: 19,963



So what do I need to do?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 13 2016, 02:08 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7



Give the submenu UL or LI a background.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MindyT
post Aug 13 2016, 08:00 PM
Post #5


Advanced Member
****

Group: Members
Posts: 165
Joined: 12-November 13
Member No.: 19,963



That did it, thanks so much for the help!

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 25th April 2024 - 12:24 PM