My Drop Down Menu is Not WORKING! it works on Jsfiddle but not in real life...lol. I'm very new to all fo this. I hope this isn't a stupid question. I tried to find solutions but have not seen one that works the way I want this to.
<!DOCTYPE html>
<html>
<head>
<title>Home - Joe </title>
<link rel="stylesheet" type="text/css" href="home.css"/>
<script src="Home.js" type="text/javascript"></script>
</head>
<body>
<div id="header">
<ul id="nav">
<li> Home </li> <!-- menu-->
<li> Music </li>
<ul class="dropdown">
<li>Albums</li> <!-- drop down list-->
<li>Downloads</li>
<li>Videos </li>
</ul>
<li> Portfolio </li>
<ul class="dropdown">
<li>Photography</li>
<li>Designs</li>
<li>Webpages </li>
</ul>
<li> About </li>
<ul class="dropdown">
<li>Biography</li>
<li>Interests</li>
<li>Goals </li>
</ul>
<li> Contact </li>
</ul>
</div>
<div id="ContentLeft">
</div>
<div id="ContentBottom">
</div>
</body>
</html>
CSS:
body {
color: #666;
text-align: left;
margin: 0px;
font-family: Roboto;
font-weight: lighter;
}
#header {
width:100%;
height:20px;
background:#333;
border-bottom:1px solid #000;
padding: 5px 5px 5px 0px;
}
.dropdown{
display:none;
list-style-type:none;
background:#333;
}
#nav {
list-style-type: none;
margin-top: 0px;
margin-left:-30px;
background:#333;
float:left;
}
#nav li {
padding:0px 10px 0px 10px;
float:left;
}
#nav li a {
color: #666;
text-decoration: none;
}
#nav li a:hover {
color: #CCC;
}
#nav li:hover ul{
display:block;
position: absolute;
margin: 0px 0px 0px -10px;
padding:0;
text-align: left;
}
#nav li:hover li{
float:none;
background:#333;
}
#nav li a:active {
color: #FFF;
}
http://jsfiddle.net/WwuRK/ <--- I want it to work Like this.
You need to wrap <ul> in the <li>. In your current example, you are doing the following:
<body>
<div id="header">
<ul id="nav">
<li> Home </li> <!-- menu-->
<li> Music </li>
^----------- remove
<ul class="dropdown">
<li>Albums</li> <!-- drop down list-->
<li>Downloads</li>
<li>Videos </li>
</ul>
</li> <-------- add removed </li> here
<li> Portfolio </li>
^----------- remove
Remove the tags and add them after the ul.dropdown.
Here is a demo of your current code (DOES NOT WORK):
http://jsfiddle.net/dirtyd77/WwuRK/4/
Here is an updated version of your code:
<div id="header">
<ul id="nav">
<li> Home </li> <!-- menu-->
<li> Music
<ul class="dropdown">
<li>Albums</li> <!-- drop down list-->
<li>Downloads</li>
<li>Videos </li>
</ul>
</li>
<li> Portfolio </li>
<ul class="dropdown">
<li>Photography</li>
<li>Designs</li>
<li>Webpages </li>
</ul>
<li> About
<ul class="dropdown">
<li>Biography</li>
<li>Interests</li>
<li>Goals </li>
</ul>
</li>
<li> Contact </li>
</ul>
</div>
<div id="ContentLeft"></div>
<div id="ContentBottom"></div>
Working demo of the edited code: http://jsfiddle.net/dirtyd77/WwuRK/6/
Hope this helps and let me know if you have any questions.
Related
I have a dynamic mega menu that shows the first tier of submenus but I'm trying to make it so that the second tier show up when an element in the 1st tier is hovered over. currently both tiers and showing up taking up a lot of space.
I found a post on here saying to use this layout:
.child{ display:none; }
.parent:hover .child{ display:block; }
It's kind of tricky with the css I have:
child = .new-menu .dropdown-submenu .dropdown-menu.burt
parent = .dropdown-menu.burt .new-menu .dropdown-submenu > a
I tried this but it's not working:
.new-menu .dropdown-submenu .dropdown-menu.burt{
display: none;
}
.dropdown-menu.burt .new-menu .dropdown-submenu > a:hover .new-menu .dropdown-submenu .dropdown-menu.burt {
display: block;
}
Targeting these specific elements seems tricky and the only way I could get them specifically was the mess I have above. Maybe I can target these elements a better way, or another way of making this work?
Update
Here is the html structure, it's kind trick, it's from Americommerce and it uses 'Merge Codes' that supply the dynamic data
This is the main structure:
<ul class="nav navbar-nav">
<ac:layoutarea id="Item">
<ac:visibilityarea id="phDDLink">
<li class="dropdown">
$$TEXT$$
<ac:visibilityarea id="phSubMenu">
<ul class="dropdown-menu mm2">
<div class="row"> $$SUBMENU$$</div>
</ul>
</ac:visibilityarea>
</li>
</ac:visibilityarea>
<ac:visibilityarea id="phNoDDLink">
<li>
$$TEXT$$
</li>
</ac:visibilityarea>
</ac:layoutarea>
</ul>
This is the structure of the sub-menus:
<ac:layoutarea id="SubItem">
<ac:visibilityarea id="phDDLink">
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<li class="dropdown-submenu">
$$TEXT$$
<ac:visibilityarea id="phSubMenu">
<ul class="dropdown-menu burt" id="">$$SUBMENU$$</ul>
</ac:visibilityarea>
</li>
</div>
</ac:visibilityarea>
<ac:visibilityarea id="phNoDDLink">
<li class="greg">
$$TEXT$$
</li>
</ac:visibilityarea>
</ac:layoutarea>
Update 2
HTML from inspector
<ul class="dropdown-menu mm2">
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<li class="dropdown-submenu"> <a class="sub-link" href="/store/c/software.aspx" target="">Software</a>
<ul class="dropdown-menu burt">
<div class="new-menu">
<li class="dropdown-submenu"> Products
<ul class="dropdown-menu burt">
<li class="greg"> Product 1 </li>
</ul>
</li>
</div>
</ul>
</li>
</div>
</ul>
Update 3
I added a class to the first <a> and then added this css:
.new-menu .dropdown-submenu .dropdown-menu.burt {
display: none;
}
.sub-link:hover .new-menu .dropdown-submenu .dropdown-menu.burt {
display: block;
}
It hides the elements but showing them on hover still doesn't work
.sub-link{
display: block;
}
.new-menu{
display: none;
}
.greg
{
display: none;
}
<li class="dropdown-submenu"> <a class="sub-link" href="/store/c/software.aspx" target="">Software</a>
<ul class="dropdown-menu burt">
<div class="new-menu">
<li class="dropdown-submenu">
<a href="/office-2019.aspx" target="">
Products
</a>
<ul class="dropdown-menu burt">
<li class="greg">
<a href="/product1.aspx" target="">Product 1
</a>
</li>
</ul>
</li>
</div>
</ul>
</li>
Your HTML structure is not clear so I tried to create my own and try to recreate your problem
have a look
.new-menu{
display: none;
}
.dropdown-submenu{
display: none;
}
.dropdown-menu{
display: none;
}
.mainParent:hover .new-menu{
display: block;
}
.mainParent:hover .dropdown-submenu{
display: block;
}
.mainParent:hover .dropdown-menu{
display: block;
}
<a class="mainParent">
Link
<div class="new-menu">
<div class="dropdown-submenu">
<div class="dropdown-menu burt">
Application Menu
</div>
</div>
</div>
</a>
If each element having a property to hide, then each element class have to make visible on parent element hover.
If you are facing some kind of nested DOM CSS problem, you can see this running code snippet
.sub-link{
display: block;
}
.new-menu{
display: none;
}
.greg
{
display: none;
}
.dropdown-submenu:hover a{
color: red !important;
}
.dropdown-submenu:hover .burt{
display: block;
color: red !important;
}
.dropdown-submenu:hover .new-menu{
display: block;
color: red !important;
}
.new-menu:hover .burt{
display: block;
}
.new-menu:hover .greg{
display: block;
}
.new-menu:hover a{
display: block;
color: black !important;
}
<li class="dropdown-submenu"> <a class="sub-link" href="/store/c/software.aspx" target="">Software</a>
<ul class="dropdown-menu burt">
<div class="new-menu">
<li class="dropdown-submenu">
<a href="/office-2019.aspx" target="">
Products
</a>
<ul class="dropdown-menu burt">
<li class="greg">
<a href="/product1.aspx" target="">Product 1
</a>
</li>
</ul>
</li>
</div>
</ul>
</li>
You can always add another class for your child elements and to your parent element.
<html>
<head>
<style>
.f-red {color:red;}
.childEl{
display:none;
}
#parentEl {padding: 5px; border-style: solid;}
#parentEl:hover > .childEl {display:block}
</style>
</head>
<body>
<div id="parentEl">
<h1 class="childEl f-red">Child</h1>
</div>
</body>
</html>
How do I center an unordered list that is divided with an image inside?
I want to achieve that the unordered list is one row, centered and also the image inside is centered so that the image divides the rest of the list in two halves (topnav-left and topnav-right).
My HTML:
<ul class="nav">
<div class="topnav-left">
<li class="">
<a class="toggle-nav" data-no-turbolink="true" href="Women">Women</a>
</li>
<li class="">
<a class="toggle-nav" data-no-turbolink="true" href="Men">Men</a>
</li>
<li class="">
Stores
</li>
<li class="">
Lifestyle
</li>
</div>
<div class="nile-logo" style="">
<li>
<img alt="Logo" src="http://img.logospectrum.com/dec/dummy-logo.jpg">
</li>
</div>
<div class="topnav-right">
<li class="">
<a class="toggle-account-nav" data-no-turbolink="true" href="/de/account">My Account</a>
</li>
<li>
<div class="cart">
<a href="/de/cart">
Warenkorb
</a> </div>
</li>
<li>
<a html="{:class=>"open-wishlist"}" href="/de/wishlist">WUNSCHLISTE</a>
</li>
<li class="language">
<a class="language" href="/en/pages/imprint">EN</a>
<a class="language" href="/fr/pages/imprint">FR</a>
</li>
</div>
</ul>
My CSS:
ul.nav { text-align: center; }
ul.nav li { display: inline-block; }
Here a codepen: demo
Try to use display:flex; add this to add this,
ul {display:flex;justify-content: space-around;list-style-type: none;}
ul.nav li { flex:1; text-align: center; } /* Edit from comment by Paulie_D
Working DEMO
You mean like this?:
http://codepen.io/anon/pen/pENYLZ
ul.nav li {
display: block;
}
Or like this?:
http://codepen.io/anon/pen/mAOoKN
ul.nav {
margin: 0 auto;
width: 200px;
position: relative;
}
ul.nav li {
display: block;
}
I want to create a dropdown menu :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simply Styled jQuery Dropdown</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection"/>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dropdownPlain.js"></script>
</head>
<body>
<div>
<ul class="dropdown">
<li class="menuppal">Administration
<ul>
<li>Artificial Turf</li>
<li>
Batting Cages
<ul>
<li>Indoor</li>
<li>Outdoor</li>
</ul>
</li>
<li>Benches & Bleachers</li>
<li>Communication Devices</li>
<li>Dugouts</li>
<li>Fencing & Windscreen</li>
<li>Floor Protectors</li>
<li>Foul Poles</li>
<li>Netting</li>
<li>Outdoor Furniture</li>
<li>Outdoor Signs</li>
<li>Padding</li>
<li>Scoreboards</li>
<li>Shade Structures</li>
<li> - VIEW ALL - </li>
</ul>
</li>
<li class="menuppal">Structure
<ul>
<li>All-in-One Team Cart</li>
<li>Air & Electrical Reels</li>
<li>Field Drags</li>
<li>
Field Marking Equipment
<ul>
<li>Batter's Box Templates</li>
<li>Dryline Markers</li>
<li>Field Paint</li>
<li>Field Sprayers</li>
<li>Stencils</li>
</ul>
</li>
<li>
Field Tarps
<ul>
<li>Area Tarps</li>
<li>Growth Covers / Protectors</li>
<li>Infield Tarps</li>
<li>Tarp Accessories</li>
</ul>
</li>
<li>Hand Tools</li>
<li>
Irrigation, Hoses, Nozzles
<ul>
<li>Hoses & Hose Reels</li>
<li>Irrigation</li>
<li>Nozzles</li>
</ul>
</li>
<li>Layout Tools</li>
<li>Moisture Removal</li>
<li>Mound Fortification</li>
<li>Mowers & Stripers</li>
<li>Soil Management</li>
<li>Soil Amendments</li>
<li>Spreaders & Sweepers</li>
<li> - VIEW ALL - </li>
</ul>
</li>
<li class="menuppal">Exercice
<ul>
<li>
Baseball - Softball
<ul>
<li>Base Accessories</li>
<li>Bases & Home Plates</li>
<li>Game Accessories</li>
<li>Pitching Rubbers</li>
</ul>
</li>
<li>
Batting Practice Equipment
<ul>
<li>Backstops</li>
<li>Infield Screens</li>
<li>Jugs Pitching Machines</li>
<li>Turf Mats</li>
<li>Turf Protectors</li>
<li>Replacement Accessories</li>
</ul>
</li>
<li>
Batting Cages
<ul>
<li>Indoor</li>
<li>Outdoor</li>
</ul>
</li>
<li>
Portable Mounds
<ul>
<li>Batting Practice Mounds</li>
<li>Game Mounds</li>
<li>Practice Mounds</li>
</ul>
</li>
<li>
Football
<ul>
<li>First Down Markers</li>
<li>Football Accessories</li>
<li>Football Goalposts</li>
</ul>
</li>
<li>
Soccer
<ul>
<li>Soccer Goals</li>
<li>Soccer Accessories</li>
</ul>
</li>
<li> - VIEW ALL - </li>
</ul>
</li>
<li class="menuppal">Contribuables et biens
<ul>
<li>Ladders & Sticks</li>
<li>Hurdles</li>
<li>Training Accessories</li>
<li>Smart-Cart Training System</li>
<li>Smart-Hurdle Collection</li>
<li> - VIEW ALL - </li>
</ul>
</li>
<li class="menuppal">Recettes
<ul>
<li>Field Design</li>
<li>Turf Management</li>
<li>Training</li>
<li> - VIEW ALL - </li>
</ul>
</li>
<li class="menuppal">Edition
<ul>
<li>Field Design</li>
<li>Turf Management</li>
<li>Training</li>
<li> - VIEW ALL - </li>
</ul>
</li>
<li class="menuppal">Outils
<ul>
<li>Field Design</li>
<li>Turf Management</li>
<li>Training</li>
<li> - VIEW ALL - </li>
</ul>
</li>
</ul>
</div>
</body>
</html>
The css is :
* {
margin: 0;
padding: 0;
}
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
a {
text-decoration: none;
font-size: 11px;
font-weight: 100;
width: 100%;
}
ul {
list-style: none;
}
/*
LEVEL ONE : MAIN MENU
*/
ul.dropdown {
position: relative;
}
ul.dropdown li.menuppal {
float: left;
zoom: 1;
background: #000 url(../images/menuLight.png) repeat-x top left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-left: 1px solid #222;
}
ul.dropdown li.menuppal a {
display: block;
padding: 4px 8px;
color: #000000;
}
/* Doesn't work in IE */
ul.dropdown li.menuppal:hover {
background: #ccc url('../images/menuDark.png') repeat-x 50% 50%;
position: relative;
}
/*
FIN LEVEL ONE
*/
/*
LEVEL TWO
*/
ul.dropdown ul {
width: 220px;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
background-color: #40617C;
}
ul.dropdown ul li {
float: none;
}
/* IE 6 & 7 Needs Inline Block */
ul.dropdown li.menuppal ul li a {
border-right: none;
color: #FFF;
display: inline-block;
}
ul.dropdown li.menuppal ul li a:hover {
background: #07243a;
}
ul.dropdown li.menuppal ul li a:visited {
word-break: break-all;
}
/*
FIN LEVEL TWO
*/
At runtime there is an extra width at the right of the menu when I pass the mouse over it :
So how to remove this extra ?
You have both width and padding set, so give box-sizing:
a {
text-decoration: none;
font-size: 11px;
font-weight: 100;
width: 100%;
box-sizing: border-box;
}
You have the following styles:
a {
text-decoration: none;
font-size: 11px;
font-weight: 100;
width: 100%;
}
ul.dropdown li.menuppal ul li a {
border-right: none;
color: #FFF;
display: inline-block;
}
ul.dropdown li.menuppal a {
display: block;
padding: 4px 8px;
color: #000000;
}
As you have padding and width:100% it will make your anchor extend beyond 100%. The following will fix it:
ul.dropdown li.menuppal a {
box-sizing:border-box;
}
More information about box-sizing
I want to keep my login and sign up to the right of my webpage. I've tried using float unsuccessfully: how do I implement this?
Here is the html page:
<link href="navigation.css" rel="stylesheet" type="text/css" />
<nav style="position:relative; top:1.5em;">
<ul>
<li>
Home
</li>
</ul>
<ul>
<li>
form
</li>
</ul>
<ul>
<li>
Profile
</li>
</ul>
<ul style="">
<li>
login
</li>
</ul>
<ul>
<li>
Sign up
</li>
</ul>
</nav>
I want to use inline css to float or put my login and sign up to the right without changing my nav alignment.
First off, it is not neccessary to create a <ul> for each navigation item. Instead use logical groupings of the nav items. If a, b and c belong together then use a single <ul> for all those items.
I believe you are attempting to do something like this:
<nav class="cf">
<ul class="left">
<li>Home</li>
<li>Form</li>
<li>Profile</li>
</ul>
<ul class="right">
<li>Login</li>
<li>Sign Up</li>
</ul>
</nav>
// http://nicolasgallagher.com/micro-clearfix-hack/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
ul {
margin: 0;
padding: 5px;
}
ul li {
list-style: none;
float: left;
margin: 0 5px;
padding: 3px 8px;
}
.left {
float: left;
background-color: skyblue;
}
.right {
float: right;
background-color: yellow;
}
jsFiddle: http://jsfiddle.net/yddn822v/1/
<ul style="float:right">
<li>login</li>
</ul>
<ul style="float:right">
<li>Sign up</li>
</ul>
this worked for me thnx for help
I add a new class to ul and try to style it with margin: 0 auto and text-align: center but doesn't work..
<section class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Venue</li>
<li>Schedule</li>
<li class="dropdown">
Artists <span class="caret"></span>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li>All Artists</li>
<li class="divider"></li>
<li>1st</li>
<li>2nd</li>
<li>3rd</li>
</ul>
</li>
<li>Register</li>
</ul>
</section>
Here's the fiddle with center bootstrap nav items...
jsfiddle
You just need to add following css.
.navbar {
text-align:center;
}
Like this
demo
css
.nav{
background-color:red;
width:300px;
margin:0 auto;
text-align:center;
}
.nav ul {
list-style-type:none;
}
.nav ul li{
}