I downloaded a template for a website but it just has a basic menu, I need to add a dropdown.
Not sure what code you need, so let me know if I need to post more.
Here is the coding for the menu, I added a div class of "nav" based on a tutorial. So if I should do something entirely different let me know
<div class="menu">
<div class="nav">
<ul>
<li><span>Home</span></li>
<li><span>About us</span></li>
<li><span>2014 Chefs</span></li>
<li><span>Fund the Mission</span></li>
<li><span>Sponsors</span>
<ul>
<li><span>2014Sponsors</span></li>
</ul>
</li>
<li><span>Ambassador Family</span></li>
<li><span>Photos</span></li>
<li><span>Contact Us</span></li>
</ul></div>
</div>
Then this is the CSS coding, I figured most of it would be copied to my .nav so it has the same properties.
.menu { padding:0; margin:0; width:949px; height:58px; background:url(images/menu_bg.gif) top no-repeat;}
.menu ul { float:right; padding:0; margin:7px 30px 0 0; list-style:none; border:0;}
.menu ul li { float:left; margin:0; padding:0;}
.menu ul li a { float:left; margin:0 1px 0 0; padding:15px 0; color:#c8c8c8; font:normal 11px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a span { padding:15px; margin:0; background:none;}
.menu ul li a:hover { color:#60b6ff; background:url(images/r_menu2.gif) no-repeat right;}
.menu ul li a:hover span { color:#60b6ff; background:url(images/l_menu.gif) no-repeat left;}
.menu ul li a.active { color:#60b6ff; background:url(images/r_menu.gif) no-repeat right;}
.menu ul li a.active span { color:#60b6ff; background:url(images/l_menu.gif) no-repeat left;}
.nav ul ul{
display: none;}
.nav ul li: hover> ul{
display: block;}
.nav ul li{
position: relative;
display: inline-block;
float:left;
padding:0;
margin:0px;;
list-style:none;
border:0;}
nav ul:after {
content: ""; clear: both; display: block;}
.nav ul li a { float:left; margin:0 1px 0 0; padding:15px 0; display:block; color:#c8c8c8; font:normal 11px Arial, Helvetica, sans-serif; text-decoration:none;}
.nav ul li a span { padding:15px; margin:0; background:none;}
.nav ul li a:hover { color:#60b6ff; background:url(images/r_menu2.gif) no-repeat right;}
.nav ul li a:hover span { color:#60b6ff; background:url(images/l_menu.gif) no-repeat left;}
.nav ul li a.active { color:#60b6ff; background:url(images/r_menu.gif) no-repeat right;}
.nav ul li a.active span { color:#60b6ff; background:url(images/l_menu.gif) no-repeat left;}
Related
I'm currently working on my website and I have an existing navigation bar. The problem is that I have too much information to share on one page. That's why I'd like to implement a dropdown menu in the existing navigation bar. I've tried many many things but it all seems to screw up my lay-out of the css or it completely deletes the navigation bar.
I got an exisiting code for a dropdown menu but I simply am not able to blend it with the existing css code. I got this code from the internet, it is not my property.
My HTML:
<div id="menu">
<ul>
<li class="current_page_item">Home</li>
<li>Onze service</li>
<li>Ons team</li>
<li>Prijzen</li>
<li>Contact</li>
</ul>
</div>
My CSS:
#menu
{
position: absolute;
right: 0;
top: 1em;
}
#menu ul
{
display: inline-block;
}
#menu li
{
display: block;
float: left;
text-align: center;
line-height: 60px;
}
#menu li a, #menu li span
{
display: inline-block;
margin-left: 1px;
padding: 0em 1.5em;
letter-spacing: 0.10em;
text-decoration: none;
font-size: 1.0em;
text-transform: uppercase;
outline: 0;
color: #212121;
background: #ECECEC;
}
#menu li:hover a, #menu li.active a, #menu li.active span
{
}
#menu .current_page_item a
{
background: #E24E2A;
color: #FFF;
}
#menu .icon
{
}
Drop down menu:
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
Thanks in advance!
Your navigation wrapper is menu whereas in the CSS from online it is primary_nav_wrap, so swap instances of these to menu.
In the html itself nested unordered list elements is used for the drop-downs, so add these under the list element where you need a drop-down.
Html:
<div id="menu">
<ul>
<li class="current_page_item">Home<ul>
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
</ul>
<li>Onze service</li>
<li>Ons team</li>
<li>Prijzen</li>
<li>Contact</li>
</ul>
</div>
CSS:
#menu ul {
display:inline-block;
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#menu li {
display:block;
float:left;
text-align:center;
line-height:60px
}
#menu li a,#menu li span {
display:inline-block;
margin-left:1px;
padding:0 1.5em;
letter-spacing:.1em;
text-decoration:none;
font-size:1em;
text-transform:uppercase;
outline:0;
color:#212121;
background:#ECECEC
}
#menu .current_page_item a {
background:#E24E2A;
color:#FFF
}
#menu {
margin-top:15px
}
#menu ul a {
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#menu ul li {
position:relative;
float:left;
margin:0;
padding:0
}
#menu ul li.current-menu-item {
background:#ddd
}
#menu ul li:hover {
background:#f6f6f6
}
#menu ul ul {
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#menu ul ul li {
float:none;
width:200px
}
#menu ul ul a {
line-height:120%;
padding:10px 15px
}
#menu ul ul ul {
top:0;
left:100%
}
#menu ul li:hover > ul {
display:block
}
Here is a jsfiddle of the code merged:
https://jsfiddle.net/o51pp5s6/
Some how my drop down menu keeps jumping to the right instead of dropping down right underneath it's parent.
I've tried positioning it but that doesn't work since the position changes when the browserwindow changes size.
How do I get my drop down menu centered underneath the parent?
Html:
<div id="topnav">
<ul>
<li>CONTACT</li>
<li>BLOG</li>
<li>OVER ONS</li>
<li>GEDRAGSBEINVLOEDING</li>
<li>ONZE DIENSTEN
<ul>
<li class="topmargin">ONDERZOEK</li>
<li>ADVIES</li>
<li>LEZINGEN</li>
</ul>
</li>
<li>HOME</li>
</ul>
</div>
</div>
CSS:
#topnav { z-index:3;
padding-top:76px; }
#topnav ul li { list-style-type:none;
display:inline;
float:right;
}
#topnav ul li a { font-family:Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
text-decoration:none;
padding-left:15px;
}
#topnav ul li a:link { color:#00aeef; }
#topnav ul li a:visited { color:#00aeef; }
#topnav ul li a:active { color:#f26532; }
#topnav ul li a:hover { color:#f26532; }
#topnav ul li a:focus { color:#f26532; }
#topnav li ul { position:absolute;
left:-999em;
list-style-type:none;
}
#topnav li ul li { border-top:0px;
clear:both;}
#topnav li:hover ul { left:auto; }
#topnav li:hover ul li { float:none;
display:block;
width:100%;
}
#topnav ul li ul li { text-align:center;
padding:10px 12px 10px 0px;
border-top:#FFF solid;
background-color:#00aeef;
width:120px;
}
.topmargin { margin-top:5px; }
#topnav li ul li a { font-family:Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
text-decoration:none;
padding-left:14px;
}
#topnav li ul li a:link { color:#FFF; }
#topnav li ul li a:visited { color:#FFF; }
#topnav li ul li a:active { color:#FFF; }
#topnav li ul li a:hover { color:#f26532; }
#topnav li ul li a:focus { color:#FFF; }
Change #topnav id to this
#topnav{
z-index:3;
padding-top:76px;
width:800px;
and add the folling id#topnav ul{
float:left;
}
#topnav li:hover ul
{left:80px;}
You can add this in or change your css
#topnav li:hover ul {
left: auto;
margin-left: -30px;
}
or
#topnav li ul {
left: auto;
list-style-type: none;
position: absolute;
padding: 0px;
}
Your nested ul tag seems to have some unnecessary padding applied by the user-agent stylesheet.
Try using:
#topnav li ul {padding: 0px;}
This way the padding of only the nested ul element will be affected.
I have written a code for a Nav bar. I have menu, sub menu and sub-sub menus. Menu and Sub-menus are working fine. The sub-sub menus are not working. They are expanding vertically instead of horizontally.
The html code is:
<div id="topbar">
<div class="wrapper">
<div id="topnav">
<ul>
<li class="active">Home</li>
<li>Products
<ul>
<li>Laptop & Notebooks
<ul>
<li>Acer</li>
<li>Apple</li>
</ul>
</li>
<li>Smartphone & Tablets</li>
<li>Desktop</li>
<li>Accessories
<ul>
<li>RAM</li>
<li>Casing</li>
<li>Ups & IPS</li>
</ul>
</li>
<li>Brand PC</li>
<li>Clone PC</li>
<li>Camera</li>
</ul>
</li>
<li>IT Solutions
<ul>
<li>Web Developmnet & Hosting</li>
<li>Mobile Application Development
<ul>
<li>Android Platform</li>
<li>Windows Platform</li>
</ul>
</li>
<li>Software Developement</li>
</ul>
<li>Portfolio</li>
<li>Contact Us</li>
</li>
</ul>
</div>
</div>
and the CSS is here :
#topnav{
display:block;
float:left;
width:660px;
margin:0;
padding:0;
list-style:none;
font-size:13px;
font-weight:normal;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#000000;
}
#topnav ul, #topnav li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#topnav li a:link, #topnav li a:visited, #topnav li a:hover{
display:block;
margin:0;
padding:15px 20px;
color:#FFFFFF;
background-color:#000000;
}
#topnav ul ul li a:link, #topnav ul ul li a:visited{
border:none;
}
#topnav li.last a{
margin-right:0;
}
#topnav li a:hover, #topnav ul li.active a{
color:#FFFFFF;
background-color:#059BD8;
}
#topnav li li a:link, #topnav li li a:visited{
width:150px;
float:none;
margin:0;
padding:7px 10px;
font-size:12px;
font-weight:normal;
color:#FFFFFF;
background-color:#000000;
}
#topnav li li a:hover{
color:#FFFFFF;
background-color:#059BD8;
}
#topnav li ul{
background:#FFFFFF;
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
border-left:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
}
#topnav li ul a{width:140px;}
#topnav li ul ul{margin:-32px 0 0 0;}
#topnav li:hover ul ul{left:-999em;}
#topnav li:hover ul, #topnav li li:hover ul{left:auto;}
#topnav li:hover{position:static;}
#topnav li.last a{margin-right:0;}
/* ----------------------------------------------Column Navigation-------------------------------------*/
#column .subnav{display:block; width:250px; padding:25px; background-color:#F9F9F9; margin-bottom:30px;}
#column .subnav h2{
margin:0 0 20px 0;
padding:0 0 14px 0;
font-size:20px;
font-weight:normal;
font-family:Georgia, "Times New Roman", Times, serif;
color:#666666;
background-color:#F9F9F9;
line-height:normal;
border-bottom:1px dotted #666666;
}
#column .subnav ul{
margin:0;
padding:0;
list-style:none;
}
#column .subnav li{
margin:0 0 3px 0;
padding:0;
}
#column .subnav ul ul, #column .subnav ul ul ul, #column .subnav ul ul ul ul, #column .subnav ul ul ul ul ul{border-top:none; padding-top:0;}
#column .subnav a{
display:block;
margin:0;
padding:5px 10px 5px 20px;
color:#777777;
background:url("../images/blue_file.gif") no-repeat 10px center #F9F9F9;
text-decoration:none;
border-bottom:1px dotted #666666;
}
#column .subnav a:hover{color:#059BD8; background-color:#F9F9F9;}
#column .subnav ul ul a, #column .subnav ul ul ul a, #column .subnav ul ul ul ul a, #column .subnav ul ul ul ul ul a{background:url("../images/black_file.gif") no-repeat #F9F9F9;}
#column .subnav ul ul a{padding-left:40px; background-position:30px center;}
#column .subnav ul ul ul a{padding-left:50px; background-position:40px center;}
#column .subnav ul ul ul ul a{padding-left:60px; background-position:50px center;}
#column .subnav ul ul ul ul ul a{padding-left:70px; background-position:60px center;}
Jsfiddle link: http://jsfiddle.net/98TRb/
Try adding this to your CSS:
#topnav ul ul li:hover ul {left:170px}
See it in action: http://jsfiddle.net/98TRb/1/
#topnav li ul ul li {display:inline-block; margin-left:40px; background-position:40px; text-align:center; border: 1px red solid; background-color: silver;}
Feel free to experiment with this. I changed colors so it would stand out for you.
What css do I need to centrally align the top level nav in my nav bar? I've been playing around with it for ages but can't get it sorted.
HTML Code
<ul id="nav">
<li class="level0 nav-1 first level-top parent">
<a href="#" class="level-top" > <span>Women</span></a>
<ul class="level0">
<li class="level1 nav-1-1 first"><a href="#" ><span>Tops</span></a></li>
<li class="level1 nav-1-2 last"><a href="#" ><span>Accessories</span></a>/li>
</ul>
</li>
<li class="level0 nav-2 level-top">
<a href="#" class="level-top" ><span>Men</span></a>
</li>
<li class="level0 nav-3 level-top">
<a href="#" class="level-top" ><span>Accessories</span></a>
</li>
</ul>
CSS Code
/********** < Navigation */
.nav-container {
background-color: #FFF;
border-color: #444;
border-top-style: solid;
border-bottom-style: solid;
border-width: 2px; width: 100%; margin:10px 0 0 0; height: 28px;position: relative;
}
.nav-container select { margin: 18px 0; }
.nav-container select { width: 100% }
#nav { float: left;
font-size: 15px;
margin: 0;
width: 100%;
}
/* All Levels */ /* Style consistent throughout all nav levels */
#nav li { position:relative;text-align:center; }
#nav li.over { z-index:998; }
#nav a,
#nav a:hover { display:block; text-decoration:none; text-transform:uppercase; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }
/* 0 Level */
#nav li {
float: left;
padding: 4px 12px;
}
#nav li.active a { color: #999999; }
#nav a { color: #555555;
float: left;
font-weight: bold;
padding-right: 11px; font-family:Arial, Helvetica, sans-serif; }
#nav li.over a,
#nav a:hover { color: #999999; }
/* 1st Level */
#nav ul li,
#nav ul li.active,
#nav ul li.over { float:none; border:none; background:none; margin:0; padding:0; padding-bottom:1px; text-transform:none; }
#nav ul li.parent { }
#nav ul li.last { padding-bottom:0; }
#nav ul li.active { margin:0; border:0; background:none; }
#nav ul a,
#nav ul a:hover { float:none; padding:0; background:none; }
#nav ul li a { font-weight:normal !important; }
/* 2nd Level */
#nav ul,
#nav div { position:absolute; width:15em; top:30px; left:-10000px; border:1px solid #bbb; padding:3px 8px; background:#fcfcfc; }
#nav div ul { position:static; width:auto; border:none; padding:0; }
/* 3rd+ Level */
#nav ul ul,
#nav ul div { top:5px; }
#nav ul li a { padding:3px 0; color:#444 !important; }
#nav ul li a:hover { padding:3px 0;}
/* Show menu */
#nav li ul.shown-sub,
#nav li div.shown-sub { left:-1px; z-index:999; }
#nav li .shown-sub ul.shown-sub,
#nav li .shown-sub li div.shown-sub { left:100px; }
.flex-direction-nav {display:none;}
/********** Navigation > */
EDIT
I was able to center the top level by changing to this code...
/* 0 Level */
#nav li { float: none; display:inline-block; }
But this made my second nav level items buch up together on one line?
change the css to this,
#nav {
font-size: 15px;
margin: 0 auto;
width:310px;
}
give #nav a fixed width and remove the float:left;
ul {text-align: center; width:100%}
ul li {display: inline-block; float: none;}
You should write your css like this.. I mean ul should be in full width and text-align:center property, its li should have display: inline-block property and it should not float to left or right;
It is not happening because ul has 100% width.
If you want ul to be in center, then its parent element must have fixed width and text-align:center.
Here is the fiddle.
I have a dropdown bar -
<div class="buttonContainer">
<ul>
<li>
<a class="menu1one" href="">Dashboard</a>
</li>
</ul>
<ul>
<li>
<div class="noLink">Tasks</div>
<ul>
<li>View</li>
<li>Edit</li>
<!--[if lte IE 6]></a><![endif]-->
</ul>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li>
<div class="noLink">Dictionaries</div>
<ul>
<li>Needs</li>
<li>Activities</li>
</ul>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li>
<div class="noLink">Admin</div>
<ul>
<li>User Accounts</li>
</ul>
<!--[if lte IE 6]></a><![endif]-->
</li>
</ul>
</div>
CSS -
/*dropdown menu*/
.menu { float:left; width:100%; font-family: arial; border-top:1px solid #4c597f; background-color: #1079b5; min-width:950px; }
.menu .buttonContainer { padding:0 0 0 200px; }
.menu ul { padding:0; margin:0; list-style-type:none; }
.menu ul li { margin:0; float:left; position:relative; background-color:#153d71; }
.menu ul li a, .menu ul li a:visited { float:left; display:block; text-decoration:none; color:#ddf; padding:0px 16px; line-height:25px; height:30px; }
.menu ul li a:hover { background-color:#9fc1ed; color: #153d71;}
.noLink { display:block; color:#ddf; padding:0px 16px; line-height:25px; height:30px; }
.menu ul li:hover { width:auto; }
.menu ul li ul { display: none; }
/* specific to non IE browsers */
.menu ul li:hover ul { display:block; position:absolute; top:30px; left:0; width:154px; border-bottom:1px solid #000; }
.menu ul li:hover ul.endstop { left:-92px; }
.menu ul li:hover ul li ul { display: none; }
.menu ul li:hover ul li a { display:block; background:#1079b5; color:#000; height:auto; line-height:15px; padding:4px 16px; width:120px; border:1px solid #000; border-bottom:0; }
.menu ul li:hover ul li a.drop { background:#ccd no-repeat 3px 8px; }
.menu ul li:hover ul li a:hover { background-color: #153d71; color: #FFFFFF; }
.menu ul li:hover ul li a:hover.drop { background: #ccd no-repeat 3px 8px; }
.menu ul li:hover ul li:hover ul { display:block; position:absolute; left:153px; top:-1px; }
.menu ul li:hover ul li:hover ul.left { left:-153px; }
/* IE6 */
.menu ul li a:hover ul { display:block; position:absolute; top:30px; t\op:33px; background:#153d71; left:0; border-bottom:1px solid #000; }
.menu ul li a:hover ul.endstop { left: -92px; }
.menu ul li a:hover ul li a { display:block; background:#153d71; color:#000; height:1px; line-height:15px; padding:4px 16px; width:154px; w\idth:120px; border:1px solid #000; border-bottom:0; }
.menu ul li a:hover ul li a.drop { background:#ccd url('') no-repeat 3px 8px; padding-bottom:4px; }
.menu ul li a:hover ul li a ul { visibility:hidden; position:absolute; height:0; width:0; }
.menu ul li a:hover ul li a:hover { color:#000; background: #ccd url('') no-repeat 3px 8px; }
.menu ul li a:hover ul li a:hover.drop { background: #ccd url('') no-repeat 3px 8px; }
.menu ul li a:hover ul li a:hover ul { visibility:visible; position:absolute; top:0; color:#000; left:153px; }
.menu ul li a:hover ul li a:hover ul.left { left:-153px; }
The dropdown menu is working well or showing up on hover in IE7 but not responding in Firefox.
Could anybody help me with this please?? I tried position : relative for inner li a:hover and it shows the menu but extends the whole div till its end. What is to be changed here?
Also, i don't want to use javascript/jquery for this.
-thanks
EDITED - I have found the solution to get it to work. I added 'position: absolute;' attribute to the .menu{} in the css. That made it work... Thanks.
I just tested on IE7 its working fine to me
http://jsfiddle.net/vcN5g/
I have found the solution to get it to work. I added 'position: absolute;' attribute to the .menu{} in the css. That made it work... Thanks.