Can anyone tell me what's wrong with my code below? I'm trying to make the menu show the list when hover over each link, but it's not working for some reason. I have already tried .menu ul ul: hover {visibility: visible; } and it didn't work.
Check my code and thank you in advance.
.menu {
width: 100%;
height: 50px;
background-color: #222;
font-family: 'Arial';
}
.menu ul {
list-style: none;
position: relative;
}
.menu ul li {
width: 150px;
float: left;
}
.menu a {
padding: 15px;
display: block;
text-decoration: none;
text-align: center;
background-color: #222;
color: #fff;
}
.menu ul ul {
position: absolute;
visibility: hidden;
}
.menu ul li ul:hover {
visibility: visible;
}
.menu a:hover {
background-color: #f4f4f4;
color: #fff;
}
<nav class="menu">
<ul>
<li>test1</li>
<li>test2</li>
<ul>
<li>test3</li>
<li>test4</li>
</ul>
<li>test5</li>
<ul>
<li>test6</li>
<li>test7</li>
<li>test8</li>
</ul>
<li>test9</li>
</ul>
</nav>
I have slightly modified your code. Sub-nav UL are now nested within the required LI. When you hover over "test2" nav it will show the sub-nav.
The CSS line below was modified too. Instead of using :hover on the sub-nav UL the code will now target the LI with the sub-nav and display the required one.
.menu ul li ul:hover {
to
.menu ul li:hover > ul {
*{
margin:0;
padding:0;
}
.menu{
width:100%;
height:50px;
background-color:#222;
font-family:'Arial';
}
.menu ul{
list-style:none;
position:relative;
}
.menu ul li{
width:150px;
float:left;
}
.menu a{
padding:15px;
display:block;
text-decoration:none;
text-align:center;
background-color:#222;
color:#fff;
}
.menu ul ul{
position:absolute;
visibility:hidden;
}
/*CSS modified here: when you hover over LI with sub-nav, it will display the UL in it.*/
.menu ul li:hover > ul{
visibility:visible;
border:1px solid #ff0000;
}
.menu a:hover{
background-color:#f4f4f4;
color:#fff;
}
<body>
<nav class="menu">
<ul>
<li>test1</li>
<li>test2
<!-- nested UL in LI -->
<ul>
<li>test3</li>
<li>test4</li>
</ul>
</li>
<li>test5
<!-- nested UL in LI -->
<ul>
<li>test6</li>
<li>test7</li>
<li>test8</li>
</ul>
</li>
<li>test9</li>
</ul>
</nav>
</body>
</html>
Related
Hi There can anyone help me i try to create a dropdown submenu but it doesn't work for me.
I dont know how to reate a nice menu.
example:
When i hover over "massages" then the menu must come down and show the submenu.
css here
.menu{
width:821px;
height:42px;
margin:0px;
background:url(images/menu.gif) no-repeat left;
}
.menu ul{
list-style:none;
padding:0 0 0 15px;
margin:0px;
}
.menu ul li{
display:inline;
}
.menu ul li ul{
display:inline;
}
.menu ul li a{
float:left;
height:42px;
border:none;
padding:0 15px 0 15px;
text-decoration:none;
color:#fff;
line-height:42px;
font-size:14px;
}
.menu ul li.aktivni-active a{
float:left;
height:42px;
border:none;
padding:0 15px 0 15px;
text-decoration:none;
line-height:42px;
font-size:14px;
Html:
<div class="menu">
<ul>
<li class="aktivni-active">Home</li>
<li>Massages</li>
<ul>
<li>Aanbiedingen</li>
</ul>
<li>Aanbiedingen</li>
<li>Prijzen</li>
<li>Agenda</li>
<li>Contact</li>
</ul>
</div>
Can anyone explane me how to create a dorpdown submenu on "Massages"
Thnx
Check with the below link.
Fiddle
/* Menu Dropdown */
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
color: #fff;
background: #666;
padding: 5px;
display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 30px;
left: 0;
}
ul#menu li ul.sub-menu a {
width:150px;
}
ul#menu li:hover ul.sub-menu {
display:block;
}
/* Top Nav Background Hover */
ul#menu li a:hover {
background:#000;
}
ul#menu li ul li a:hover {
background:#999;
}
/* 3rd level nav */
ul#menu li ul.sub-menu li ul {
display:none;
position: absolute;
top: 0px;
left: 115px;
width: 100px;
}
/* show the 3rd level when the second is hover */
ul#menu li ul.sub-menu li:hover ul {
display:block;
}
/* Menu Dropdown */
You should change your markup, as far as I know submenu should be part of list item it refers to
<ul>
<li class="simple-item">item</li>
<li class="submenu">item
<ul class="submenu-goes-inside-li">
<li class="simple-item">item</li>
<li class="simple-item">item</li>
<li class="simple-item">item</li>
</ul>
</li>
</ul
In your case submenu is separated from list items.
Using the same structure you have just add class to the drop menu,
set ul inside the dropMenu to display none, then to display on however. You can use css3 or jquery to make it have a nice animation or toggle.
<div class="menu">
<ul>
<li class="aktivni-active">Home</li>
<li class="dropMenu">Massages</li>
<ul>
<li>Aanbiedingen</li>
</ul>
<li>Aanbiedingen</li>
<li>Prijzen</li>
<li>Agenda</li>
<li>Contact</li>
</ul>
</div>
CSS
.menu ul{
display:none
}
.menu:hover ul{
display:block;
}
if you want some better just use jquery http://api.jquery.com/toggle/
I´m trying to make a submenu on hover for hours, read about ten tutorials or more and finally don't get it working.
I want it to show "Zimmer", "Reservierung" and "Preise" in a vertical menu if I hover "Hotel" and so on.
This is my code:
a {
text-decoration: none;}
nav {
height: 50px;
clear: both;}
nav ul {
padding: 5px 0px;
text-align: center;}
nav li {
margin: 0px;
display: inline;
padding: 0px;}
nav li a {
font-size: 18px;
color: #775923;
padding: 0px 20px;
margin: 0px;}
nav li a:hover, nav li a.current {
color: #775923;
padding: 0px 20px 14px 20px;
-webkit-padding-after: 15px;
box-shadow: 0 4px #b1d130;}
nav ul ul{
display: none;}
nav ul li:hover ul {
display: block;}
<nav>
<ul>
<li>Willkommen</li>
<li>Hotel</li>
<ul>
<li>Zimmer</li>
<li>Reservierung</li>
<li>Preise</li>
</ul>
<li>Restaurant</li>
<ul>
<li>Speisekarte</li>
<li>Anlässe</li>
</ul>
<li>Anfahrt</li>
<li>Kontakt</li>
<ul>
<li>Team</li>
<li>Über Uns</li>
</ul>
</ul>
</nav>
Link: http://jsfiddle.net/AuJeF/445/
Hope you can help.
Thank you
You have the problem on your markup,
change as following-
<li>Hotel
<ul>
<li>Zimmer</li>
<li>Reservierung</li>
<li>Preise</li>
</ul>
</li>
(this is a simple dropdown menu)
<nav>
<ul>
<li>Willkommen</li>
<li>Hotel
<ul>
<li>Zimmer</li>
<li>Reservierung</li>
<li>Preise</li>
</ul>
</li>
<li>Restaurant<ul>
<li>Speisekarte</li>
<li>Anlässe</li>
</ul>
</li>
</ul>
</nav>
css
nav
{
margin-top:15px
}
nav ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
nav 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
}
nav ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
nav ul li.current-menu-item
{
background:#ddd
}
nav ul li:hover
{
background:#f6f6f6
}
nav ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
nav ul ul li
{
float:none;
width:200px
}
nav ul ul a
{
line-height:120%;
padding:10px 15px
}
nav ul ul ul
{
top:0;
left:100%
}
nav ul li:hover > ul
{
display:block
}
jsfiddle
the mistake in you html. ul > ul mast be insite li. But not outsideю
<li>Hotel
<ul>
<li>Zimmer</li>
<li>Reservierung</li>
<li>Preise</li>
</ul>
</li>
You're writing style - if ul inside li then ul display block. But inside li no ul it after him.
Will validator error, because tag ul inside >ul that's not true, there can be only >li
Think, I help U
I'm trying to create a CSS dropdown menu but have run into an issue where some style elements remain and some do not. In my codepen example you'll notice that when you hover over "Competencies" the background changes to a dark blue and the the text to white but when you move to the next list item, the text changes back to the original dark blue color. I'd like for it to remain white. I've tried removing the color attribute from nav ul li a.
nav ul li a {
display: block; padding: 1em 2em;
color: #003c7d; text-decoration: none;
font-size:1.15em;
}
nav ul li a:hover {
color:#fff;
}
http://codepen.io/anon/pen/aDBeK
just add code in css: (please run code in full screen)
nav li:hover > a, nav li a.active {
color:#FFFFFF;
}
body {
font-size:14px;
font-family: Arial;
line-height: 1.5;
}
main {
width:100%;
}
header {
margin-bottom:10px;
width:80%;
vertical-align:middle;
/*box-shadow: 0px 5px 3px rgba(0,0,0,0.25);*/
}
select {
margin-top:10px;
font-size:1em;
}
nav ul {
background: background: rgba(255, 255, 255, 0.1);
vertical-align: middle;
padding: 0 0.625em;
/*margin-left:1.25em;*/
list-style: none;
position: relative;
display: inline-table;
}
nav ul ul {
display:none;
}
nav ul ul li {
float:none;
position:relative;
color:#fff;
}
nav ul li:hover > ul {
display:block;
background:#fff;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
nav ul li a {
display: block; padding: 1em 2em;
color: #003c7d; text-decoration: none;
font-size:1.15em;
}
nav ul li a:hover {
color:#fff;
}
nav li:hover > a, nav li a.active {
color:#FFFFFF;
}
nav ul li a:active{
color:#fff;
}
nav ul li:hover {
background: #003c7d;
}
li {
float:left;
vertical-align:middle;
}
<nav>
<ul>
<li>MS-1</li>
<li>MS-2</li>
<li>MS-3</li>
<li>MS-4</li>
<li style="font-weight:bold">Competencies
<ul>
<li>Physician as Healer [A]
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul>
<li>Physician as Scientist [B]
<ul>
<li>B1</li>
<li>B2</li>
<li>B3</li>
</ul>
<li>Physician as Advocate [C]
<ul>
<li>C1</li>
<li>C2</li>
<li>C3</li>
</ul>
<li>Physician as Educator [D]
<ul>
<li>D1</li>
<li>D2</li>
<li>D3</li>
</ul>
<li>Physician as Colleague [E]
<ul>
<li>E1</li>
<li>E2</li>
<li>E3</li>
</ul>
<li>Physician as Role Model [F]
<ul>
<li>F1</li>
<li>F2</li>
<li>F3</li>
</ul>
<li>Physician as Life-long Learner [G]
<ul>
<li>G1</li>
<li>G2</li>
<li>G3</li>
</ul>
</ul>
</li>
</ul>
</nav>
I have an existing HTML menu which I need to add further navigation to. I have added in the extra <ul> and <li> tags which I believe are in the correct place. I also have some CSS but ti appears to mess up the links on the nav bar.
Here is an image of what it currently looks like:
http://gyazo.com/b45d1a07de57e617715b74ced91b942b
This is what it like before I added the code for the dropdown menu:
http://gyazo.com/d3dcd6b866187a650f83842beeb0be0d
HTML
<!--TOP NAV BAR SECTION-->
<div id="nav_bar">
<ul>
<li>HOME</li>
<li>STATUS</li>
<li>INFO</li>
<li>GAMEMODES
<ul>
<li>GAMEMODE - SURVIVAL</li>
<li>GAMEMODE - PURE-PVP</li> `enter code here`
<li>GAMEMODE - GAMESWORLD</li>
</ul>
</li>
<li>RULES</li>
<li>VOTE</li>
</ul>
</div>
CSS
#nav_bar {
background-color:#a22b2f;
padding-top:10px;
height:35px;
box-shadow: 0px 2px 10px;
}
#nav_bar ul {
margin:-15px;
margin-left:110px;
}
#nav_bar ul li {
display:inline;
}
#nav_bar ul li ul {
opacity:0;
}
#nav_bar ul li:hover ul {
opacity:1;
}
#nav_bar a:link {
text-decoration: none;
}
#nav_bar a:visited {
color:#ffffff;
}
#nav_bar a:hover {
background:#8c1b1f;
padding-bottom:12px;
padding-top:16px;
padding-left:10px;
padding-right:10px;
}
I had to completely remove your CSS with the exception of the styles which you had applied to #nav_bar and cleaned up your HTML structure as well by removing all the  's.
#nav_bar {
background-color: #a22b2f;
padding: 10px;
box-shadow: 0px 2px 10px;
}
#nav_bar ul {
text-align: center;
padding-left: 0px;
}
#nav_bar ul li {
display: inline-block;
}
#nav_bar ul li a {
color: white;
font-family: Arial;
text-decoration: none;
font-weight: bold;
padding: 15px;
}
#nav_bar ul li ul {
display: none;
}
#nav_bar ul li:hover ul {
display: block;
position: absolute;
padding: 0px;
background: white;
padding: 10px;
border: 1px solid black;
}
#nav_bar ul li:hover ul li {
display: block;
}
#nav_bar ul li:hover ul li a {
color: black;
}
<div id="nav_bar">
<ul>
<li>HOME
</li>
<li>STATUS
</li>
<li>INFO
</li>
<li>GAMEMODES
<ul>
<li>GAMEMODE - SURVIVAL
</li>
<li>GAMEMODE - PURE-PVP
</li>
<li>GAMEMODE - GAMESWORLD
</li>
</ul>
</li>
<li>RULES
</li>
<li>VOTE
</li>
</ul>
</div>
You can style it further as per your needs.
http://i.stack.imgur.com/OP0kc.jpg
the navigation menu i have created using the CSS and Html code is not working correctly.
The alignment of the navigation menu is not perfect i want in this way : http://i.stack.imgur.com/h4oPK.jpg
I want to convert this to CSS..
Please help
<style>
/* Targeting both first and second level menus */
#nav li {
list-style:none;
float: left;
position: relative;
}
#nav li a {
display: block;
padding: 8px 12px;
text-decoration: none;
}
#nav li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Targeting the first level menu */
#nav {
top:150px;
min-width:850px;
background:#fff;
opacity:0.5;
display: block;
height: 34px;
z-index: 100;
position: absolute;
}
#nav > li > a {
}
/* Targeting the second level menu */
#nav li ul {
color: #333;
display: none;
position: absolute;
width:850px;
}
#nav li ul li {
display: inline;
}
#nav li ul li a {
background: #fff;
border: none;
line-height: 34px;
margin: 0;
padding: 0 8px 0 10px;
}
#nav li ul li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Third level menu */
#nav li ul li ul{
top: 0;
}
ul.child {
background-color:#FFF;
}
/* A class of current will be added via jQuery */
#nav li.current > a {
background: #f7f7f7;
float:left;
}
/* CSS fallback */
#nav li:hover > ul.child {
left:0;
top:34px;
display:inline;
position:absolute;
text-align:left;
}
#nav li:hover > ul.grandchild {
display:block;
}
</style>
<ul id="nav">
<li>Home</li>
<li>
Products
<ul class="child">
<li>Hard Drives</li>
<li>Monitors</li>
<li>Speakers
<ul class="child">
<li>10 watt</li>
<li>20 watt</li>
<li>30 watt</li>
</ul>
</li>
<li>Random Equipment</li>
</ul>
</li>
<li>
Services
<ul class="child">
<li>Repairs</li>
<li>Installations</li>
<li>Setups</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
Fixed. I think this is what you want http://dabblet.com/gist/2792978
Simply remove position: relative from #nav li and give it to #nav.