We Keep Coding

css drop down menu size and image issues

I'm creating a css drop down menu with a image fixed under it. at the moment I'm having trouble getting the image to be the same size as the drop down menu and with getting the menu to be the size of the screen or fill the bar.any help will be greatly appreciated.
heres the css :
#nav{
list-style:none;
font-weight:bold;
margin-bottom:10px;
float:left;
width:100%;
position:relative;
z-index:5;
margin: 0;
padding: 0;
background-color: #333;
}
#nav li{
float:left;
margin-right:10px;
position:relative;
}
#nav a{
display:inline-block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
#nav a:hover {
color:#fff;
background:#6b0c36;
text-decoration:none;
}
#nav ul{
background:#fff;
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
}
#nav ul li{
padding-top:1px;
float:none;
text-align: center;
}
#nav ul a{
white-space:nowrap;
padding: 14px 16px;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
background:#6b0c36;
text-decoration:none;
background-color: blue;
}
#nav li:hover ul a{
text-decoration:none;
}
#nav li:hover ul li a:hover{
background:#333;
}
<ul id="nav">
<li>
HOME
</li>
<li>
ABOUT
<ul>
<li>OUR STORY</li>
<li>OUR COMMITMENT TO YOU</li>
</ul>
</li>
<li>
LOCATIONS
<ul>
<li>AUSTIN, TX</li>
<li>ATLANTA, GA</li>
<li>SEATTLE, WA</li>
<li>PORTLAND, OR</li>
</ul>
</li>
<li>
PRODUCT
<ul>
<li>NEW ARRIVALS</li>
<li>FEATURED</li>
<li>TOP RATED</li>
<li>HIS</li>
<li>HERS</li>
<li>ACCESSORIES</li>
<li>SPRING CATALOG</li>
<li>THE ESSENTIALS</li>
<li>SALES</li>
</ul>
</li>
<li>
BLOG
</li>
<li>
CONTACT
</li>
</ul>
</li>
</ul>
<img class="alignnone size-full wp-image-24" src="https://montaviustech.files.wordpress.com/2016/11/death_to_stock_photography_vibrant-10-of-10.jpg" alt="death_to_stock_photography_vibrant-10-of-10" width="absolute" height="" />

Im not sure if this is what your looking for.
#nav{
list-style:none;
font-weight:bold;
margin-bottom:10px;
float:left;
width:100%;
position:relative;
z-index:5;
margin: 0;
padding: 0;
background-color: #333;
}
#nav li{
float:left;
margin-right:10px;
position:relative;
}
#nav a{
display:inline-block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
#nav a:hover {
color:#fff;
background:#6b0c36;
text-decoration:none;
}
#nav ul{
background:#fff;
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
}
#nav ul li{
padding-top:1px;
float:none;
text-align: center;
}
#nav ul a{
white-space:nowrap;
padding: 14px 16px;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
background:#6b0c36;
text-decoration:none;
background-color: blue;
}
#nav li:hover ul a{
text-decoration:none;
}
#nav li:hover ul li a:hover{
background:#333;
}
<ul id="nav">
<li>
HOME
</li>
<li>
ABOUT
<ul>
<li>OUR STORY</li>
<li>OUR COMMITMENT TO YOU</li>
</ul>
</li>
<li>
LOCATIONS
<ul>
<li>AUSTIN, TX</li>
<li>ATLANTA, GA</li>
<li>SEATTLE, WA</li>
<li>PORTLAND, OR</li>
</ul>
</li>
<li>
PRODUCT
<ul>
<li>NEW ARRIVALS</li>
<li>FEATURED</li>
<li>TOP RATED</li>
<li>HIS</li>
<li>HERS</li>
<li>ACCESSORIES</li>
<li>SPRING CATALOG</li>
<li>THE ESSENTIALS</li>
<li>SALES</li>
</ul>
</li>
<li>
BLOG
</li>
<li>
CONTACT
</li>
</ul>
</li>
</ul>
<img class="alignnone size-full wp-image-24" src="https://montaviustech.files.wordpress.com/2016/11/death_to_stock_photography_vibrant-10-of-10.jpg" alt="death_to_stock_photography_vibrant-10-of-10" width="100%" height="" />
What i did was change the width of the image from absolute to 100%:
<img class="alignnone size-full wp-image-24" src="https://montaviustech.files.wordpress.com/2016/11/death_to_stock_photography_vibrant-10-of-10.jpg" alt="death_to_stock_photography_vibrant-10-of-10" width="absolute" height="" />
to
<img class="alignnone size-full wp-image-24" src="https://montaviustech.files.wordpress.com/2016/11/death_to_stock_photography_vibrant-10-of-10.jpg" alt="death_to_stock_photography_vibrant-10-of-10" width="100%" height="" />

Just set the width of the image to 100%. That will align menu-bar and image.

How to expand and collapse a responsive mobile menu

I have created a responsive menu, all that is left is to make it toggle. I am unsure as how to show the menu when the word menu is pressed. By default the menu is collapsed, then when the menu button is pressed it expands and when the button is pressed again it collapases.
Could someone please help me out as I am new and unsure about this. I have uploaded my project onto jsfiddle. link
http://jsfiddle.net/bLbdavqu/2/
HTML:
<div id="nav"><!--nav-->
<div id="pull">
Menu
</div>
<ul>
<li>Home</li>
<li class="active">About Gnosis
<ul>
<li>What is Gnosis</li>
<li>Origins of Gnosis</li>
<li>Foundations</li>
</ul>
</li>
<li>Articles</li>
<li>FAQ</li>
<li>Courses</li>
<li>Centres</li>
<li>International</li>
</ul>
</div><!--/nav-->
CSS:
body {
background:brown;
}
#pull {
display:none;
float:left;
height:auto;
width:100%;
}
#pull img {
float:right;
}
#nav{
float:left;
height:155px;
width:63%;
background:url(../images/top-banner.png) no-repeat;
background-position:bottom;
background-size:100%;
position:relative;
}
#nav ul {
height:auto;
width:100%;
list-style-type:none;
position:absolute;
bottom:0;
*zoom:1;
}
#nav ul li {
float:left;
padding-left:20px;
position:relative;
}
#nav ul li a {
font-family:Trajan-Pro;
font-size:0.9em;
color:#fff;
text-decoration:none;
}
#nav ul li a:hover {
color:#d2aa76;
border-bottom:2px solid #d2aa76;
padding-bottom:5px;
}
#nav ul li:hover > a {
color:#d2aa76;
border-bottom:2px solid #d2aa76;
padding-bottom:5px;
}
/*1st level sub-menu */
#nav ul ul {
display:none;
}
#nav ul li:hover > ul {
height:auto;
width:180px;
display:block;
}
#nav ul ul li:hover > a {
color:#d2aa76;
border-bottom:none;
}
#nav ul ul {
padding:0;
position:absolute;
top:100%;
padding-top:15px;
}
#nav ul ul li {
float:none;
position:relative;
padding:7px 0px;
border-top:1px solid #000;
background: #423d33;
background: linear-gradient(top, #423d33 0%, #4a4843 40%);
background: -moz-linear-gradient(top, #423d33 0%, #4a4843 40%);
background: -webkit-linear-gradient(top, #423d33 0%,#4a4843 40%);
-webkit-box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
-moz-box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
transition: all 300ms cubic-bezier(0.175,0.885,0.32,1.275) 0;
}
#nav ul ul li a {
font-size:0.8em;
padding-left:15px;
}
#nav ul ul li a:hover {
border-bottom:none;
}
#media screen and (max-width: 1900px) {
#logo {
height:95px;
width:100%;
background:none;
}
#logo h1 {
top:0;
margin:0;
padding-top:10px;
}
#header-container {
height:auto;
}
#pull {
display:block;
}
#nav {
height:100%;
width:100%;
background:none;
margin:0;
padding:0;
clear:both;
}
#nav ul {
height:100%;
position:static;
margin:0;
padding:0;
display:block;
}
#nav ul > li {
float: none;
}
#nav ul li {
padding-left:0px;
}
#nav ul li a {
display:block;
padding: 9px 9px;
position: relative;
z-index:100;
}
#nav ul ul {
position:relative;
top:0;
bottom:0;
margin:0;
padding:0;
}
#nav ul li:hover > ul {
height:auto;
width:100%;
}
#nav ul ul li {
border-top:none;
background: #615f5b;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
#nav ul ul li a {
display: block;
padding-left:30px;
position: relative;
z-index: 100;
}
#nav ul > li.hover > ul , .nav li li.hover ul {
position: static;
}
}

You can use javascript to change the attribute:
I made a jsfiddle: http://jsfiddle.net/bLbdavqu/3/
function show(){
var show = document.getElementById('the_menu');
show.setAttribute('style','display:inline');
}
You can wrap it inside a div to make it easier and then change the display from none to inline. Question: do you want to give users the change to hide the menu when they click again on menu?
Or, if you are ready to use jquery, just use toggle:
$(document).ready(function(){
$('button').click(function () {
$("#toggle").toggle();
});});
http://jsfiddle.net/bLbdavqu/5/

<div id="nav"><!--nav-->
<div id="pull">
Menu
</div><br/><br/>
<div id="the_menu">
<ul>
<li>Home</li>
<li class="active">About Gnosis
<ul>
<li>What is Gnosis</li>
<li>Origins of Gnosis</li>
<li>Foundations</li>
</ul>
</li>
<li>Articles</li>
<li>FAQ</li>
<li>Courses</li>
<li>Centres</li>
<li>International</li>
</ul>
</div><!--/nav-->
</div>
Script
<script>
function show(ValueToggle){
if(ValueToggle==1){
$('#the_menu').show();
$('#pulls').attr('onClick','show(0)');
} else {
$('#the_menu').hide();
$('#pulls').attr('onClick','show(1)');
}
}
</script>

You can use JQuery to toggle Menu http://jsfiddle.net/bLbdavqu/8/
Just Change the CSS of the ul.
Hide List- $( "#mylist" ).css("display","none");
Show List- $( "#mylist" ).css("display","block");

I think you want to show the menu items("Home","About Gnosis",etc) on click of link "menu" and
again hide these items on click of link "menu" . I made a jsfiddle for you http://jsfiddle.net/Tushar490/kL1dgvmr/6/
<div id="nav"><!--nav-->
<div id="pull">
Menu
</div>
<div id="bs-example-navbar-collapse-2">
<ul>
<li>Home</li>
<li class="active">About Gnosis
<ul>
<li>What is Gnosis</li>
<li>Origins of Gnosis</li>
<li>Foundations</li>
</ul>
</li>
<li>Articles</li>
<li>FAQ</li>
<li>Courses</li>
<li>Centres</li>
<li>International</li>
</ul>
</div>
</div><!--/nav-->
Script :-
$(document).ready(function () {
$("#pull").on('click',function () {
$("#bs-example-navbar-collapse-2").toggle();
});
});
In CSS you just need to remove "float:left;" from "#pull" .
Hope this would help to you !!

here is the solution please see the code at
$(document).ready(function(){
$('#test').hide();$('#pull').click(function () {$("#test").toggle();});});
http://jsfiddle.net/bLbdavqu/12/
the updation of your requirements.

centering links in a drop down javascript menu

I have a drop down menu that has sub menus, the entire menu spans the whole width of the browser, right now the links are all positioned to the left of the screen. What I would like is my links to be all in the center of the screen, with the orange background still spanning the entire width of the browser.
Here is the code:
inside the head goes the javascript and the css, and the rest in the body:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#menu li").hover(function(){
$(this).children(":hidden").slideDown();
},function(){
$(this).parent().find("ul").slideUp();
});
});
</script>
<style>
#menu{
height: 30px;
background-color:#F90;
}
#menu li li:hover{
background-color:yellow;
cursor:pointer;
}
#menu ul, #menu li{
list-style-type:none;
padding:0;
margin:0;
}
#menu li{
float:left;
width:120px;
list-style-type:none;
line-height:30px;
text-align:center;
}
#menu li ul{
position:absolute;
background-color:#f90;
display:none;
}
#menu li li{
float:none;
padding:2px;
}
#menu a{
color:#000;
text-decoration:none;
}
</style>
<div id="menu">
<ul>
<li>Home</li>
<li>Info
<ul>
<li>example</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
<li>Portfolio
<ul>
<li>Submenu1</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
</ul>
</div>

Add margin: auto and display: table:
css
#menu{
height: 30px;
background-color:#F90;
width:100%;
}
#menu li li:hover{
background-color:yellow;
cursor:pointer;
}
#menu ul, #menu li{
list-style-type:none;
padding:0;
margin:auto;/*Add this*/
display: table;/*Add this*/
}
#menu li{
float:left;
width:120px;
list-style-type:none;
line-height:30px;
text-align:center;
}
#menu li ul{
position:absolute;
background-color:#f90;
display:none;
}
#menu li li{
float:none;
padding:2px;
}
#menu a{
color:#000;
text-decoration:none;
}
fiddle

expanding the width of drop down menu

how to increase the width of drop down menu...
when you hover over the services link a drop down menu pop up appears....
in this pop up i have included the text fields so i need to increase the width of the drop down menu....
i tried increasing the width of sub class all form fields becomes inline but not working....
providing my code below....
http://jsfiddle.net/3VBQ6/1/embedded/result/
<ul class="sub">
<li><a href="#nogo23"><span class='label'>Name</span>
<span><input type="text" name="lastname" /></span></a>
</li>
<li>Company <span><input type="text" name="lastname" /></span>
</li>
<li>Email <span><input type="text" name="lastname" /></span>
</li>
<li><input type="submit" value="Submit" />
</li>
</ul>

try to change the ul and li width to auto and add a min-width:90px
like this:
#nav li:hover ul.sub {
left:1px;
top:38px;
background: #bbd37e;
padding:3px;
border:1px solid #5c731e;
white-space:nowrap;
width: auto;
min-width:90px;
height:auto;
z-index:300;
}
#nav li:hover ul.sub li {
display:block;
height:20px;
position:relative;
float:left;
width: auto;
min-width:90px;
font-weight:normal;
}
#nav li:hover ul.sub li a {
display:block;
font-size:11px;
height:18px;
width: auto;
min-width:90px;
line-height:18px;
text-indent:5px;
color:#000;
text-decoration:none;
border:1px solid #bbd37e;
}
Also I added some styles for the input fields
#nav li:hover ul.sub li a input {
font-size:11px;
height:18px;
width: auto;
min-width:90px;
line-height:18px;
color:#000;
text-decoration:none;
}

You've got hard coded widths for all the submenus which you do not need.
If you remove all the widths and the float:left; item from 'ul.sub li' which is not needed
You can target that specific menu item by adding a class to it you can adjust just that item via CSS.
#nav li:hover ul.sub.frm { width: 155px; }
.frm a .label { display: inline-block; width: 60px; }
.frm a input[type="text"] { width: 80px; }
UPDATED FIDDLE

how to center dropdown menu when position is absolute for dropdown menu

my dropdown menu has position absolute and I want to center my dropdown menu to its respective li.I dont want to set margin statically because it will affect to other menu as well.
HTML
<div class="top_nav">
<!--naviagation top Begins-->
<ul>
<li id="active">
<img src="images/home.png" />home
<!-- <div class="DDmenu" id="hmedd" style="display:none">
<ul>
<li>Dummy1</li>
<li>Dummy2</li>
<li>Dummy3</li>
</ul>
</div>-->
<div class="clear"></div>
<div class="current_menu"></div>
</li>
<li id="abt" onmouseover="showmenu('abtdd');" onmouseout="hidemenu('abtdd');" >
about us
<div class="DDmenu" id="abtdd" style="display:none">
<ul>
<li>Dummy1</li>
<li>Dummy2</li>
<li>Dummy3</li>
</ul>
</div>
</li>
<li id="invent" onmouseover="showmenu('inventdd');" onmouseout="hidemenu('inventdd');">
inventions
<div class="DDmenu" id="inventdd" style="display:none">
<ul>
<li>Dummy Invent1</li>
<li>Dummy Invent2</li>
<li>Dummy Invent3</li>
</ul>
</div>
</li>
<li id="archi" onmouseover="showmenu('archidd');" onmouseout="hidemenu('archidd');">
architectural
<div class="DDmenu" id="archidd" style="display:none">
<ul>
<li>Dummy Architecture1</li>
<li>Dummy Architecture2</li>
<li>Dummy Architecture3</li>
</ul>
</div>
</li>
<li id="artli" onmouseover="showmenu('artlidd');" onmouseout="hidemenu('artlidd');">
art pieces
<div class="DDmenu" id="artlidd" style="display:none">
<ul>
<li>Dummy art1</li>
<li>Dummy art2</li>
<li>Dummy art3</li>
</ul>
</div>
</li>
<li id="caravanli" onmouseover="showmenu('caravanlidd');" onmouseout="hidemenu('caravanlidd');">
caravan
<div class="DDmenu" id="caravanlidd" style="display:none">
<ul>
<li>Dummy caravan1</li>
<li>Dummy caravan2</li>
<li>Dummy caravan3</li>
</ul>
</div>
</li>
<li id="tab">
tables
</li>
</ul>
<!--naviagation top Ends-->
</div>
CSS:
.top_nav
{
width:100%;
height:30px;
/*margin-left:130px;*/
}
.top_nav ul
{
padding:0;
margin:0 0 0 68px;
}
.top_nav ul li#active
{
float:left;
position:relative;
padding:5px 0 0 0;
background: #c2cca2;
margin:0 8px;
color:#000;
list-style:none;
}
.top_nav ul li
{
float:left;
position:relative;
padding:12px 0 7px 35px; /*added padding top+5 to add space between bg and text*/
margin:0 8px;
list-style:none;
}
.top_nav ul li a
{
text-decoration:none;
text-transform:capitalize;
color:#fff;
font-size:14px;
font-weight:bold;
padding-right:6px;
vertical-align:baseline;
}
.top_nav ul li:hover a{color:#000;}
.top_nav ul li ul li a{color:#FFF!important;}
.top_nav ul li ul li:hover a{color:#000!important;}
.top_nav ul li a#active
{
text-decoration:none;
text-transform:capitalize;
color:#000;
font-size:14px;
font-weight:bold;
padding-right:6px;
vertical-align:baseline;
}
/*.top_nav ul li:hover
{
/*background:#c2cca2;
background:url(../images/menu_bg.png) left top repeat-y;
}*/
.top_nav ul li#abt
{
background:#c2cca2;
}
.top_nav ul li#invent
{
background:#c2cca2;
height:19px;
}
.top_nav ul li#archi
{
background:#c2cca2;
height:19px;
}
.top_nav ul li#artli
{
background:url(../images/art.png) 5px 5px no-repeat;
height:19px;
}
.top_nav ul li#caravanli
{
background:#c2cca2;
height:19px;
}
.top_nav ul li#tab
{
background:#c2cca2;
height:19px;
}
.top_nav ul li#abt:hover
{
background:#c2cca2;
color:#000 !important;
height:19px;
}
.top_nav ul li#abt:hover>a:hover{color:inherit;}
.top_nav ul li:hover
{
color:#000;
}
.top_nav ul li#invent:hover
{
background:#c2cca2;
color:#000;
}
.top_nav ul li#archi:hover
{
background:#c2cca2;
color:#000;
}
.top_nav ul li#artli:hover
{
background:#c2cca2;
color:#000;
}
.top_nav ul li#caravanli:hover
{
background:#c2cca2;
color:#000;
}
.top_nav ul li#tab:hover
{
/*background:#c2cca2;*/
background:#c2cca2;
color:#000;
}
/*.top_nav ul li a:hover
{
background:#c2cca2;
padding:16px 6px 2px 0;
padding:16px 6px 0 0\0/;
}*/
.top_nav ul li img
{
/*float:left;
position:relative;*/
padding:0 4px 0 5px;
}
JS
function showmenu(idm)
{
document.getElementById(idm).style.display='';
}
function hidemenu(idmn)
{
document.getElementById(idmn).style.display='none';
}
any suggestion would be appreciated.

hi i have a suggestion for you why not you use a navigation code without javascript try this
let me know if you have any issue or you want to use only javascript navigation
go this below link
http://jsfiddle.net/sarfarazdesigner/pNAkf/
or u can copy this code
css code :
*{margin:0; padding:0}
body{font-family:Arial, Helvetica, sans-serif; font-size:14px; background:#f7f7f7;}
#wrapper{width:980px; margin:50px auto;}
#nav{list-style:none; background:#333; height:30px; line-height:30px;}
ul#nav > li{
float:left;
border-right:1px solid #ccc;
position:relative;
}
ul#nav li a{
padding:0 15px;
display:block;
text-decoration:none;
color:#fff;
}
#nav li a:hover{
background:#ccc;
}
ul.subnavi{
list-style:none;
position: absolute;
left: 0;
background: #fff;
display:none;
}
ul.subnavi li{
display:block;
width:120px;
float:none;
}
ul#nav li ul.subnavi li a{
color:#333;
}
ul#nav li ul.subnavi li a:hover {
background:#333;
color:#fff;
}
#nav li:hover ul{
display:block;
}
html code is:
<div id="wrapper">
<ul id="nav">
<li>Home</li>
<li>Services
<ul class="subnavi">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Products</li>
<li>FaQs</li>
<li>Contact
<ul class="subnavi">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Blog</li>
</ul>
</div>

your css for .top_nav ul affects all the ul in the topnav class
try adding this to your css
.DDmenu
{
background: none repeat scroll 0 0 #DDDDDD; // just to show your result
display: none;
margin-left: -24px;
position: absolute;
}