Menu Icon does not appear and links don't work - html

Im quite new to web design and am having trouble figuring out why my mobile dropdown menu works fine testing on a browser window, but when accessed using a mobile phone the black triangle denoting the 2nd list disappears and none of the links work; nothing happens when I touch them.
I've commented out the 'display:none' on the '#nav ul' selector so you can see how the menu functions, usually this would be uncommented.
Really appreciate any feedback, thanks.
<div id="nav">
<img id="menubtn" src="images/menuIcon.png" alt="Menu button" />
<ul>
<li>Home</li>
<li>Option 1 ▾
<ul>
<li>Option 1.1</li>
<li id="bottomSub">Option 1.2</li>
</ul>
</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li id="bottomNav">Option 6</li>
</ul>
</div>
/*--- All style--- */
body{
background-color:lightblue;
}
#nav{
font-family:sans-serif;
z-index:1;
}
#nav a{
color:black;
}
#nav ul li{
list-style:none;
color:black;
}
#nav li:hover ul{
position:absolute;
visibility:visible;
display:block;
}
#nav a:hover{
color:yellow;
}
#nav ul li a{
text-decoration:none;
}
#nav ul ul{
position:relative;
display:none;
}
/* ----Mobile only---- */
#media screen and (max-width:480px){
#menubtn:hover + ul,#menubtn:focus + ul{
display:block;
}
#nav ul {
position:fixed;
top:95px;
background-color:#E5E5E5;
font-size:0.8em;
margin:0;
padding:0;
width:120px;
z-index:1;
/*display:none;*/
}
#nav ul li{
border-left:1px solid black;
border-right:1px solid black;
border-top:1px solid black;
padding:0;
padding:10px 4px;
}
#nav li:hover ul,#nav li:focus ul{
top:50px;
left:119px;
}
#nav ul ul li{
font-size:1.2em;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
background-color:#E5E5E5;
padding:10px 4px;
width:130px;
}
#bottomSub, #bottomNav{
border-bottom: 1px solid black;
}
}

try by adding <a> tag on parent
<li>Option 1 ▾
<ul>
<li>Option 1.1</li>
<li id="bottomSub">Option 1.2</li>
</ul>
</li>
and display block to <a>
#nav ul li a {
display:block;
}
If you give padding and other style to <a> tag it would be better because :focus doesn't work on li tag.
Not tested but might solve your problem

Related

How do I make menu retain hover state when submenu is active?

What do I need to include in my CSS to get my menu text to stay black when hovering over a submenu?
I've tried systematically going through my current :hover elements, including > when ever possible, and adapting the relevant parts from other codes into the CSS. I've also combed through similar questions in hopes to find applicable code but have not been successful.
#menu {
width: 100%;
position: fixed;
background: #333;
color: #fff;
}
#menu ul.left {
position:relative;
float:left;
margin:0;
padding:0px;
}
#menu ul a {
display:block;
color:#fff;
text-decoration:none;
padding:0 15px;
}
#menu ul a:hover {
display:block;
color: #333;
text-decoration:none;
padding:0 15px;
}
#menu ul li {
list-style-type: none;
position:relative;
float:left;
margin:0;
padding:0px;
}
#menu ul li:hover {
background:#f6f6f6;
color:#333;
}
#menu ul ul {
display:none;
position:absolute;
background: #f6f6f6;
color: #333;
}
#menu ul li:hover > ul {
display:block;
}
<nav id="menu">
<ul class="left">
<li>Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
</ul>
</li>
</ul>
</nav>
Expected results: hovering from Menu 1 to Sub Menu x will keep the #333 colored text on Menu 1.
Actual results: hovering from Menu 1 to Sub Menu x will revert to #f6f6f6 colored text on Menu 1.
Added a element to the #menu ul li:hover in css.
#menu {
width: 100%;
position: fixed;
background: #333;
color: #fff;
}
#menu ul.left {
position:relative;
float:left;
margin:0;
padding:0px;
}
#menu ul a {
display:block;
color:#fff;
text-decoration:none;
padding:0 15px;
}
#menu ul a:hover {
display:block;
color: #333;
text-decoration:none;
padding:0 15px;
}
#menu ul li {
list-style-type: none;
position:relative;
float:left;
margin:0;
padding:0px;
}
#menu ul li:hover a{
background:#f6f6f6;
color:#333;
}
#menu ul ul {
display:none;
position:absolute;
background: #f6f6f6;
color: #333;
}
#menu ul li:hover > ul {
display:block;
}
<nav id="menu">
<ul class="left">
<li>Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
</ul>
</li>
</ul>
</nav>

Creating a navigation similar to image below

I'm trying to create a navigation menu similar to the picture attached but I'm having trouble with the CSS. I have a basic nested unordered list but I can't figure out how to styles it to look as close as possible to the specifications. Any help/links would be appreciated.
nav {
border-bottom:1px solid #ccc;
}
nav ul {
list-style:none;
padding:0.35em;
margin:0 0.5em;
}
nav li {
border-right:1px solid black;
display:inline-block;
padding:0.15em 0.25em;
position:relative;
}
nav li:first-child {
border-left:1px solid black;
}
nav ul ul {
background:white;
border:1px solid #ccc;
box-shadow:2px 2px 4px rgba(0,0,0,0.5);
display:none;
left:-0.25em;
min-width:200px;
padding:0.5em;
position:absolute;
top:1.5em;
}
nav li:hover {
font-weight:bold;
}
nav li:hover ul {
font-weight:normal;
}
nav li:hover ul {
display:block;
}
nav li li {
border:none !important;
display:block;
margin:0;
padding:0;
white-space:nowrap;
}
<nav>
<ul>
<li>Item 1
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</nav>

Make dropdown child 100% of container

I have a dropdown inside a black container of 600px and i would like to have the red childrens show in a width of 100% of container instead of 100% of page width as it happens now. I need this to be in % because the website is responsive.
Please take a look at Jsfiddle Demo
<div id="navcontainer">
<ul>
<li style="display: inline;float: left;">
Filters
<ul style="text-align:left">
<li>Brand</li>
<li>Model</li>
<li>Color</li>
<li>Features</li>
</ul>
</li>
<li style="display: inline;float: right;">
Sort by
<ul style="text-align:right">
<li>Newest</li>
<li>Oldest</li>
<li>Cheapest</li>
</ul>
</li>
</ul>
</div>
add position:relative; for - #navcontainer ul
#navcontainer {
background:#222;
margin: 0 auto;
width: 600px;
}
#navcontainer ul {
text-align:center;
margin:0;
padding:0;
list-style:none;
width:100%;
position:relative;
}
#navcontainer ul li {
display:inline;
/*position:relative;*/
}
#navcontainer ul li a {
display:inline-block;
color:#fff;
font-size:20px;
padding:20px 30px;
}
#navcontainer ul li a:hover {
background:#999;
}
#navcontainer ul ul {
position:absolute;
left:0;
top:100%;
z-index:10;
width:100%;
display:none;
background:red;
}
#navcontainer ul ul li {
float:none;
}
#navcontainer ul ul li a {
text-align:left;
}
#navcontainer ul li:hover ul {
display:block;
}
<div id="navcontainer">
<ul>
<li>
Eggs
<ul>
<li>sub menu</li>
<li>sub menu</li>
<li>sub menu</li>
<li>sub menu</li>
</ul>
</li>
</ul>
</div>
you can use position attribute for many diffrent uses but there you need to hava a contained sub menu and you cant use position:absolute; for parent element
you can use it for child elements and here you do it for both of theme .
change this line to solve your problem .
#navcontainer ul ul {
position:relative;
}
sorry for my bad language skils .
The above description and view the demo you away into a problem solved
You should add the parent element the following characteristics :
#navcontainer {
background: rgb(34, 34, 34) none repeat scroll 0 0;
border: 1px solid;
height: 65px;
margin: 0 auto;
position: relative;
text-align: center;
width: 600px;
}

Overlapping Border on Dropdown Menu

I am trying to place a black border below the dropdown menu, then having the "selected" page which is currently the "Home" page being underlined using a orange border. I am trying to overlap the orange border on the black border.
http://jsfiddle.net/46z5su4u/
Edited
Some people seems to be confused, I want to put the orange line on top of the black line.
http://jsfiddle.net/46z5su4u/2/
Any advices?
HTML:
<h1>Drop Down Menu</h1>
<header>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li class="dir">Sub Menu 1</li>
<li class="dir">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?
</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
CSS:
header
{
border-bottom:4px solid #3a3a3a;
}
#primary_nav_wrap
{
margin-top:15px;
margin-bottom:-4px;
position:relative;
}
#primary_nav_wrap ul
{
list-style:none;
float:left;
margin:0;
padding:0;
}
#primary_nav_wrap ul a
{
display:block;
text-decoration:none;
line-height:32px;
padding:0 15px;
font-family:"Open Sans","Lucida Grande",Tahoma,"Trebuchet MS",Verdana,Arial,sans-serif;
font-size:1.1em;
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
}
#primary_nav_wrap ul li.current-menu-item
{
border-bottom:4px solid #ff7500;
font-weight:700;
}
#primary_nav_wrap ul li.current-menu-item a
{
color:#333;
}
#primary_nav_wrap ul li a:hover
{
color: #ff7500;
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#f8f8f8;
padding: 0 12px;
box-shadow: 0 2px 2px #ccc;
}
#primary_nav_wrap ul ul li
{
float:none;
width:150px;
border-bottom: solid 1px #f2f2f2;
border-top: solid 1px #fff;
}
#primary_nav_wrap ul ul li:after
{
content: "";
}
nav ul ul li:last-child a
{
border-bottom: none;
}
nav ul ul li:first-child a
{
border-top: none;
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 6px;
}
#primary_nav_wrap ul li:hover > ul
{
display:block;
}
you may need a lower boarder when you move?
#primary_nav_wrap ul li a:hover
{
color: #ff7500;
border-top: 4px solid #ff7500;/*add*/
}
Try this http://jsfiddle.net/46z5su4u/1/
this is all i have added
#primary_nav_wrap ul li ul li {
border-bottom:1px solid orange;
}
Fixed
http://codepen.io/anon/pen/bfgvo
Added to html
<div class="clearBoth"></div>
<div id="top_blackline"></div>
Added to css
.clearBoth
{
clear:both;
}
#top_blackline
{
margin-top:-4px;
width: 100%;
border-bottom:4px solid #3a3a3a;
}
Just set the dark border on the first-level <li>s instead of <header>.
So the updated css code will look like this:
header {
position: absolute; /* removed border */
}
/* add the following rule */
#primary_nav_wrap > ul > li {
border-bottom:4px solid #3a3a3a;
}
which sets the dark border on first-level <li>s only using the direct child selector >, more on this selector here.
a preview of the code above is here.

How to get a vertical submenu instead a horizontal one?

I developed a submenu with CSS & jQuery and my intention was that it was vertical submenu but I´m getting a horizontal menu.
I already tried to "play" with display in CSS but its not working, like #menu ul li ul li a {display: inline-block;}.
Anyone there knows the trick to put this submenu vertical?
My jsfiddle with full example:
http://jsfiddle.net/jcak/9EcnL/7/
My html:
<section id="menu-container">
<nav id="menu">
<ul>
<li>Home
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>Procuts
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
</section>
My css:
#menu ul li ul li {display: none;}
#menu-container
{
background:green;
width:100%;
height:46px;
float:left;
z-index:7;
}
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
display: inline-block;
float:left;
height:46px;
position: relative;
line-height:46px;
font-weight:300;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
#menu ul li a:hover
{
color:#fff;
}
#menu ul li ul {
position: absolute;
left: 0;
-webkit-padding-start: 0;
width: 300px;
}
#menu ul li ul li
{
color:#fff;
}
By default, a ul will be vertical.
The float:left is what is making this whole menu be horizontal instead.
Have a go at removing that and seeing how the menu behaves.
Working Fiddle
#menu ul li
{
display: inline-block;
height:46px;
position: relative;
line-height:46px;
font-weight:300;
}