The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> css dropdownmenu
MindyT
post Jun 2 2016, 12:05 PM
Post #1


Advanced Member
****

Group: Members
Posts: 165
Joined: 12-November 13
Member No.: 19,963
Hi, I'm trying to do a dropdown menu with CSS. The dropdown menu appears whether the mouse is over the menu or not. if someone could help me figure out what 's wrong, I would really appreciate it.

CODE

<php
require_once('functions.php');
?>  
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel = "stylesheet" href = "Bixler.css">
<style type="text/css">
    nav {
        padding-top:2%;
        width:30%;
        height:27px;
        margin-left:auto;
        margin-right:auto;
    }
    nav ul {
        list-style-type:none;
    }
    nav > ul li a {
        padding:50px;  
    }
    
    nav li {
        float:left;
    }
    nav > ul > li > ul {
        display:none;
        position:absolute;
    }
    nav > ul > li:hover > ul {
        display:block;
    }
    #logo {
        width:304px;
        margin-left:auto;
        margin-right:auto;
    }
    h3 {
        color:red;
        text-align:center;
    }
    #contactInfo {
        float:left;
    }
    #servicesList, #eocialMedia {
        float:right;
        width: 33%;
    }
    article {
        float:left;
        width:35%;
        height:45%;
        margin-left:10%;
        background-color:#FFFFFF;
    }
    aside {  
        float:right;    
        width:30%;
        height:35%;
        margin-right:10%;     
        background-color:#FFFFFF;    
    }
    footer {
        background-color:#000000;
        overflow:auto;
        color:#C4C4C4;
          clear:both;
    }
</style>
</head>
<body>
<header>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
            <ul>
                   <li><a href="#">Agents</a></li>
                <li><a href="#">Locations</a></li>                
            </ul>
        <li><a href="#">Services</a></li>              
        <li><a href="services.php" tabindex="3" accesskey="S">Services</a></li>
        <li><a href="quote.php" tabindex="4" accesskey="Q">Get A Quote</a></li>
        <li><a href="contact.php" tabindex="5" accesskey="C">Contact</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>
<article>

</article>
<aside>

</aside>
<footer>
    <div id="contactInfo">
        Bixler Insurance <br/>
        1043 South 13th St. <br />
        Decatur, IN 46733<br />
        Phone: (260)-724-3438
    </div>
    <div id="eocialMedia">
        social media icons
    </div>    
    <div id="servicesList">
        list of services
    </div>
</footer>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.js"></script>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 2 2016, 03:28 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6
You use a child selector but the last UL isn't a child of LI because you have nested the lists wrong.

QUOTE
CODE

      <li><a href="#">About Us</a></li>
            <ul>
                   <li><a href="#">Agents</a></li>
                <li><a href="#">Locations</a></li>                
            </ul>
        <li><a href="#">Services</a></li>


Your nested UL is directly inside the outer UL. The selector doesn't match and it's bad HTML. In a list, the only thing that can be directly contained in UL is LI. Så you must put your nested UL inside a LI, probably the last one.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jun 2 2016, 04:04 PM
Post #3


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Just have a look at the HTML code used at, the following links to see how to code a nested list.

http://css.maxdesign.com.au/listamatic2/vertical02.htm
http://meyerweb.com/eric/css/edge/menus/demo.html (inspect the sub menus in the top left menu)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MindyT
post Jun 2 2016, 08:08 PM
Post #4


Advanced Member
****

Group: Members
Posts: 165
Joined: 12-November 13
Member No.: 19,963
ah I see the problem now! Thanks so much for the help!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MindyT
post Jun 2 2016, 09:14 PM
Post #5


Advanced Member
****

Group: Members
Posts: 165
Joined: 12-November 13
Member No.: 19,963
I am so sorry, but one more question. The dropdown menu is kind of working, but submenu is going horizontally not vertically. I thought if I put

CODE

    nav ul ul li {
        display:block;
        width:60px;
    }
that was what was needed, but evidently not. Could I get some help please?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 3 2016, 10:56 AM
Post #6


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(MindyT @ Jun 3 2016, 04:14 AM) *

submenu is going horizontally not vertically. I thought if I put

CODE

    nav ul ul li {
        display:block;
        width:60px;
    }
that was what was needed, but evidently not.

Maybe it's because the LIs are already floated:

CODE
    nav li {
        float:left;
    }

Try set a width on the inner UL instead (and perhaps remove the LI float):

CODE
nav ul ul {
        display:block;
        width:60px;
    }

(Though I don't know exactly what your current HTML structure looks like.)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MindyT
post Jun 3 2016, 12:37 PM
Post #7


Advanced Member
****

Group: Members
Posts: 165
Joined: 12-November 13
Member No.: 19,963
I already have the width set and that didn't help. Removing float didn't help either.

here is the css code
CODE

* {
    margin:0;
    padding:0;
}
body {
    Height:100%;
    width:100%;
    background-color:#cccb99;
}

    nav {
        background-color:#000000;
        padding-top:2%;
        width:34%;
        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 {

    }
    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;
    }
    #logo {
        width:304px;
        margin-left:auto;
        margin-right:auto;
        margin-top:2%;
        margin-bottom:2%
    }
    h3 {
        color:#763c3c;
        text-align:center;
        margin-bottom:2%;
    }
    #contactInfo {
        float:left;
    }
    #servicesList, #eocialMedia {
        float:right;
        width: 33%;
    }
    article {
        float:left;
        width:35%;
        height:45%;
        margin-left:10%;
        margin-bottom:6%;
        background-color:#FFFFFF;
    }
    aside {  
        float:right;    
        width:30%;
        height:35%;
        margin-right:10%;     
        background-color:#FFFFFF;    
    }
    footer {
        background-color:#000000;
        overflow:auto;
        Width:100%;
        padding-left:10%;
        padding-top:2%;
        padding-bottom:2%;
        color:#C4C4C4;
          clear:both;
    }


html code
[code]
<php
require_once('functions.php');
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel = "stylesheet" href = "Bixler.css">
<style type="text/css">

</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">Agents</a></li>
<li><a href="#">Locations</a></li>
</ul>
<li><!--end of about us menu list -->
<li><a href="#">Services</a></li>
<li><a href="services.php" tabindex="3" accesskey="S">Services</a></li>
<li><a href="quote.php" tabindex="4" accesskey="Q">Get A Quote</a></li>
<li><a href="contact.php" tabindex="5" accesskey="C">Contact</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>
<article>

</article>
<aside>

</aside>
<footer>
<div id="contactInfo">
Bixler Insurance <br/>
1043 South 13th St. <br />
Decatur, IN 46733<br />
Phone: (260)-724-3438
</div>
<div id="eocialMedia">
social media icons
</div>
<div id="servicesList">
list of services
</div>
</footer>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jun 4 2016, 07:15 AM
Post #8


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
I tested your last HTML and CSS code and the dropdown menu items are going vertically, despite the float they inherit from the outer LIs.

Though I'd put the background-color to the inner LI and add some padding to add some space.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 4 2016, 07:26 AM
Post #9


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(MindyT @ Jun 3 2016, 07:37 PM) *

I already have the width set

Not on the UL element.

QUOTE
and that didn't help. Removing float didn't help either.

I get a vertical submenu even without those changes, just like Frederiek.

QUOTE
<li><!--end of about us menu list -->

That should be an </li> end tag.

Also, using a percentage width for the NAV menu may cause problems in different window sizes.

BTW, hover menus work very poorly in touch screen browsers. This is because tapping a link on a touch screen fires both a hover and a click (try it so see what I mean).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

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

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 26th April 2024 - 10:23 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC