3 {{ upvoteCount | shortNum }}
3 {{ upvoteCount | shortNum }}

CSS Drop Down Menu For Mobile

by jbearnolimits
2 replies
  • WEB DESIGN
    • |
I have a test page where I am building a new template. I am trying to have a drop down menu since it is a mobile friendly site and I am working with that part first. But for some reason I can't seem to get my drop down links to show up when I hover over the menu.

Here is the CSS I am using for the menu. Is it something with the CSS that I have wrong?

Code:
 #HeaderMobileNav  { 
background-color: #333;
float : right; 
width : 100%; 
max-width : 149px; 
height : 32px; 
} 
 #HeaderMobileNav ul  { 
color: #ccc;
display: block;
text-decoration: none;
list-style-type: none;
margin: 0;
position: relative;
} 
 #HeaderMobileNav ul li  { 
display: inline-block;
} 
 #HeaderMobileNav ul li:hover  { 
background-color: #333;
} 
 #HeaderMobileNav ul li a  { 
color: #ccc;
display: block;
text-decoration: none;
} 
 #HeaderMobileNav ul li a:hover  { 
color: #ccc;
display: block;
text-decoration: none;
} 
 #HeaderMobileNav ul li:hover ul  { 
display: block;
} 
 #HeaderMobileNav ul ul  { 
display: none;
position: absolute;
background-color: #333;
} 
 #HeaderMobileNav ul ul li  { 
display: block;
}
#css #drop #menu #mobile
  • Profile picture of the author jbearnolimits
    Template 1 is the test page. Ignore the larger screen size css. I was just testing something. The size I am trying to work on is 400px and less. I just don't know if I have the css wrong, the html of the navigation list wrong, or if maybe I have something preventing the links from dropping down.
    Signature
    http://onthelineministries.com
    {{ DiscussionBoard.errors[9927668].message }}
  • Profile picture of the author jbearnolimits
    Ok, I have just tested the page in another browser. It works in them. But in my ie 10 it doesn't work. Anyone know how I can fix this browser issue?
    Signature
    http://onthelineministries.com
    {{ DiscussionBoard.errors[9928509].message }}

Trending Topics