I have the following menu:
<ul id="nav-mobile" class="right">
<li><img src="images/ic_icon1.png"/>
<a class="white-text" href='#'><span>Links</span></a>
<ul id="quicklinkdrop" class="dropdown-content">
<li>Home</li>
<li>Access</li>
<li>Zone</li>
</ul>
</li>
<li><img src="images/ic_icon2.png"/>
<a class="white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
and I use CSS to style it:
#nav-mobile{
margin-top: 0px;
}
#nav-mobile li {
display: inline-block;
margin: 0 2.5em 1.5em 1.5em;
font-family: Roboto, Helvetica, Arial, sans-serif;
}
#nav-mobile li a{
text-decoration: none;
position: relative;
}
#nav-mobile li img{
position: relative;
top: .4em;
}
#nav-mobile li .dropdown-content {
display: none;
position: absolute;
color: #188CCC;
background-color: white;
z-index: 1;
box-shadow: 0px 8px 25px 0px rgba(28, 24, 28, 0.65);
max-width: 180px;
}
#nav-mobile li:hover .dropdown-content{
display: block;
}
#nav-mobile li .dropdown-content li:hover {
background-color: #CCCCCC;
}
#nav-mobile li .dropdown-content li a {
display: none;}
#nav-mobile li:hover .dropdown-content li a {
display: block;
}
For the most part everything works as desired. Only when the user hovers over Home, Access, and Zone menu items, only the word itself gets highlighted, not the entire row. how can that be accomplished with CSS?
You can use the following solution (with many changes on the CSS code):
#nav-mobile{
margin-top: 0px;
}
#nav-mobile li {
display: inline-block;
margin: 0 2.5em 1.5em 1.5em;
font-family: Roboto, Helvetica, Arial, sans-serif;
}
#nav-mobile li a{
text-decoration: none;
position: relative;
}
#nav-mobile li img{
position: relative;
top: 0.4em;
}
#nav-mobile li .dropdown-content {
display: none;
position: absolute;
color: #188CCC;
background-color: white;
z-index: 1;
box-shadow: 0px 8px 25px 0px rgba(28, 24, 28, 0.65);
max-width: 180px;
}
#nav-mobile li:hover .dropdown-content{
display: block;
padding:0;
margin:0;
}
#nav-mobile li .dropdown-content li {
margin:0;
width:100%;
}
#nav-mobile li .dropdown-content li a {
display: block;
margin:0;
padding: 0.75em 2.5em 0.75em 1.5em;
font-family: Roboto, Helvetica, Arial, sans-serif;
}
#nav-mobile li .dropdown-content li:hover {
background-color: #CCCCCC;
}
<ul id="nav-mobile" class="right">
<li>
<img src="images/ic_icon1.png"/>
<a class="white-text" href='#'><span>Links</span></a>
<ul id="quicklinkdrop" class="dropdown-content">
<li>Home</li>
<li>Access</li>
<li>Zone</li>
</ul>
</li>
<li>
<img src="images/ic_icon2.png"/>
<a class="white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
An improved example (reduced CSS code):
ul#nav-mobile, ul#nav-mobile ul {
color:#188ccc;
list-style-type:none;
margin:0;
padding:0;
}
ul#nav-mobile li {
display:inline-block;
margin:0;
}
ul#nav-mobile li a, ul#nav-mobile li a:link {
display:inline-block;
font-family:Roboto, Helvetica, Arial, sans-serif;
margin:0;
padding:0.75em 2.5em 0.75em 0.5em;
position:relative;
text-decoration:none;
}
ul#nav-mobile li ul.dropdown-content {
box-shadow:0px 8px 25px 0px rgba(28, 24, 28, 0.65);
display:none;
max-width:180px;
position:absolute;
z-index:1;
}
ul#nav-mobile li:hover ul.dropdown-content {
display:block;
}
ul#nav-mobile li:hover ul.dropdown-content li,
ul#nav-mobile li:hover ul.dropdown-content li a {
width:100%;
}
ul#nav-mobile li:hover ul.dropdown-content li:hover {
background:#ccc;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul id="nav-mobile" class="right">
<li>
<i class="fa fa-stack-overflow" aria-hidden="true"></i>
<a class="white-text" href='#'><span>Links</span></a>
<ul id="quicklinkdrop" class="dropdown-content">
<li>Home</li>
<li>Access</li>
<li>Zone</li>
</ul>
</li>
<li>
<i class="fa fa-stack-overflow" aria-hidden="true"></i>
<a class="white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
Give list items 100% width and no margin left, adjust padding of <a> tag accordingly:
#nav-mobile li .dropdown-content li {
width: 100%;
margin-left: 0;
}
#nav-mobile li:hover .dropdown-content li a {
padding-left: 10px;
}
http://jsfiddle.net/w6he4pgt/
#nav-mobile{
margin-top: 0px;
}
#nav-mobile > li {
display: inline-block;
margin: 0 2.5em 1.5em 1.5em;
font-family: Roboto, Helvetica, Arial, sans-serif;
}
#nav-mobile li a{
text-decoration: none;
position: relative;
}
#nav-mobile li img{
position: relative;
top: .4em;
}
#nav-mobile li .dropdown-content {
display: none;
position: absolute;
color: #188CCC;
background-color: white;
z-index: 1;
box-shadow: 0px 8px 25px 0px rgba(28, 24, 28, 0.65);
max-width: 180px;
width: 100%;
padding-left: 0px;
list-style: none;
}
#nav-mobile li:hover .dropdown-content{
display: block;
}
#nav-mobile li:hover .dropdown-content li a{
display: block;
padding: 0.75em 2.5em 0.75em 1.5em;
}
#nav-mobile li .dropdown-content li:hover a{
background-color: #CCCCCC;
}
<ul id="nav-mobile" class="right">
<li><img src="images/ic_icon1.png"/>
<a class="white-text" href='#'><span>Links</span></a>
<ul id="quicklinkdrop" class="dropdown-content">
<li>Home</li>
<li>Access</li>
<li>Zone</li>
</ul>
</li>
<li><img src="images/ic_icon2.png"/>
<a class="white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
Hope this will help you
Related
I don't know how to change the code to handle arbitrary nested items? I have no clue how to this to apply for multiple levels. The following works just for 2 levels. But if i add a 3. level it fails. I think this can be done cleverly without writing manually each level?
I want that it can be adjusted to arbitrary many childs and it should be work with hover and clicks.
Thank you very much.
.nav ul {
list-style: none;
text-align: center;
padding: 0;
margin: 0;
}
.nav ul li {
font-family: 'Roboto', sans-serif;
border-bottom: none;
height: 86px;
line-height: 86px;
font-size: 14px;
display: inline-block;
float:left;
margin: 0 auto;
}
.nav ul li a {
text-decoration: none;
color:#000000;
display: block;
transition: .3s background-color;
padding:0 24px;
}
.nav ul li a:hover {
background-color: #5c89c7;
color:#FFFFFF;
}
.nav a {
border-bottom:none;
}
.nav li ul {
position:absolute;
display:none;
width:inherit;
text-align:left;
}
.nav li:hover ul {
display:block;
}
.nav ul li ul li {
display: block;
float:left; /* newly added */
height:auto; /* newly added */
line-height:34px; /* newly added */
}
<div class="nav"> <!-- Start of Nav Bar -->
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>SERVICES
<ul>
<li>PROGRAMS</li>
<li>EVENTS</li>
</ul>
</li>
<li>RESOURCES</li>
<li>GET INVOLVED</li>
<li>CONTACT US
<ul>
<li>AAAA</li>
<li>BBB</li>
<li>CCCC
<ul>
<li>OOOO</li>
<li>BBBB</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Is this something you wanted? I just added a > in .nav li:hover ul.
See comments in code below. ZZZZ, XXXX, and YYYY are added by me.
.nav ul {
list-style: none;
text-align: center;
padding: 0;
margin: 0;
}
.nav ul li {
font-family: 'Roboto', sans-serif;
border-bottom: none;
height: 86px;
line-height: 86px;
font-size: 14px;
display: inline-block;
float:left;
margin: 0 auto;
padding: 0.5rem;
}
.nav ul li a {
text-decoration: none;
color:#000000;
display: block;
transition: .3s background-color;
padding:0 24px;
}
.nav ul li a:hover {
background-color: #5c89c7;
color:#FFFFFF;
}
.nav a {
border-bottom:none;
}
.nav li ul {
position:absolute;
display:none;
width:inherit;
text-align:left;
}
/*.nav li:hover ul { OLD CODE
display:block;
}*/
.nav li:hover > ul { /* ADDED the charcter '>' */
display:block;
}
.nav ul li ul li {
display: block;
float:left;
height:auto;
line-height:34px;
}
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>SERVICES
<ul>
<li>PROGRAMS</li>
<li>EVENTS</li>
</ul>
</li>
<li>RESOURCES</li>
<li>GET INVOLVED</li>
<li>CONTACT US
<ul>
<li>AAAA</li>
<li>BBB</li>
<li>CCCC
<ul>
<li>OOOO</li>
<li>ZZZZ
<ul> <!-- ADDED -->
<li>XXXX</li>
<li>YYYY</li>
</ul>
</ul>
</li>
</ul>
</li>
</ul>
</div>
You can use flex-inline and > for this approach of making menus.
.nav ul {
list-style: none;
text-align: center;
padding: 0;
margin: 0;
}
.nav ul li {
font-family: 'Roboto', sans-serif;
border-bottom: none;
height: 86px;
line-height: 86px;
font-size: 14px;
display: inline-block;
float:left;
margin: 0 auto;
}
.nav ul li a {
text-decoration: none;
color:#000000;
display: block;
transition: .3s background-color;
padding:0 24px;
}
.nav ul li a:hover {
background-color: #5c89c7;
color:#FFFFFF;
}
.nav a {
border-bottom:none;
}
.nav li ul {
position:absolute;
display:none;
width:inherit;
text-align:left;
}
.nav li:hover > ul {
display: inline-flex !important;
}
.nav ul li ul li {
/*display: block;*/
float:left;
height:auto;
line-height:34px;
}
<div class="nav"> <!-- Start of Nav Bar -->
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>SERVICES
<ul>
<li>PROGRAMS</li>
<li>EVENTS</li>
</ul>
</li>
<li>RESOURCES</li>
<li>GET INVOLVED</li>
<li>CONTACT US
<ul>
<li>AAAA</li>
<li>BBB</li>
<li>CCCC
<ul>
<li>OOOO</li>
<li>BBBB</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
I think what you're looking for is a multi-level dropdown. This is easier to do with separate classes rather than all one class (nav). I rewrote it for the sake of organization, but the design tweaks are really up to you! When running this snippet, make sure to use full screen because StackOverflow's snippet will distort the display a little bit.
.menu1 li {
list-style: none;
text-align: center;
position: relative;
float: left;
height: 30px;
width: 150px;
background-color: white;
}
.menu1 li:hover {
background-color: #5c89c7;
}
.menu1 li:hover>ul {
display: inline;
}
.menu1 a {
border-bottom: none;
font-family: Roboto, sans-serif;
color: black;
text-decoration: none;
padding: 0 0 0 10px;
display: block;
line-height: 30px;
}
.menu1 a:hover {
color: white;
}
.menu2 {
position: absolute;
top: 30px;
left: 0;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.menu2>li {
position: relative;
height: 30px;
background: #999999;
}
.menu2>li:hover {
background: #CCCCCC;
}
.menu3 {
position: absolute;
top: 0;
right: -150px;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.menu3>li {
height: 30px;
background: #999999;
}
.menu3>li:hover {
background: #CCCCCC;
}
<ul class="menu1">
<li>HOME</li>
<li>ABOUT</li>
<li>
SERVICES
<ul class="menu2">
<li>PROGRAMS</li>
<li>EVENTS</li>
</ul>
</li>
<li>RESOURCES</li>
<li>GET INVOLVED</li>
<li>
CONTACT US
<ul class="menu2">
<li>AAAA</li>
<li>BBB</li>
<li>CCCC
<ul class="menu3">
<li>OOOO</li>
<li>BBBB</li>
</ul>
</li>
</ul>
</li>
I am creating some websites and I am always using the same dropdown method for them. However i am stuck with my dropdown menu. When I hover on it it always replaces my main navigation and well lets say that not so customer friendly.
The problem probably lies within the position values I give in my css code but I fail to find how to make the right values for my needs.
So in proper words, my navigation is fine till you hover over one with a dropdown menu then it replaces himself.
I included a JSFIDDLE to show you what i mean. There is a dropdown menu under the second link in the main navigation.
HTML:
<div id="header">
<div class="blueborder">
</div>
<section class="nav">
<div class="row">
<ul class="main-nav" id="drop-nav">
<li class="home-active">Home</li>
<li> / </li>
<div class="dropdown">
<li>Over Ons</li>
<div class="dropdown-content">
<li>Betuigenissen</li>
</div>
</div>
<li> / </li>
<li>Schilderwerken</li>
<li> / </li>
<li>Behangwerken</li>
<li> / </li>
<li>Raamdecoratie</li>
<li> / </li>
<li>Realisaties</li>
<li> / </li>
<li>Contacteer ons</li>
</ul>
</div>
</section>
</div>
CSS:
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
text-align: center;
display: none;
position: inherit;
background-color: #2C2A26;
margin-top: 40px;
color: #000;
list-style: none;
width: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 998;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content li a {
color: #000;
border-bottom: 0px solid #ed5d00;
}
.dropdown-content li {
padding: 10px 10px;
}
.dropdown-content li a:hover {
color: #fff;
padding-bottom: 0px;
border-bottom: 0px solid #ed5d00;
}
/* Main Navi */
.main-nav {
float: left;
list-style: none;
margin-top: 0px;
padding-top: 0px;
color: #000;
font-size: 110%;
font-weight: 600;
font-family: 'Source Sans Pro', sans-serif;
}
.main-nav li {
display: inline-block;
margin-left: 1px;
color: #fff;
}
.main-nav li a {
padding: 8px 0;
color: #000;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border: 0;
}
.main-nav li a:hover,
.main-nav li a:active {
color: #8dcee6;
}
Change to position: absolute; on the .dropdown-content and remove the top-margin, works for me:
CSS:
.dropdown-content {
text-align: center;
display: none;
position: inherit;
background-color: #2C2A26;
color: #000;
list-style: none;
width: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 998;
}
.dropdown:hover .dropdown-content {
display: block;
position: absolute;
}
https://jsfiddle.net/r3gra7ta/2/
i think Your Navigation is a little bit confused.
One of simplest method is to set the submenu within the OVER ONS
<li name="OVER ONS" ><li SUBITEM1 ></li><li SUBITEM2 ></li></li>
Here a Basic Example .
#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
}
<h1>LOGO</h1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">HOME</li>
<li>OVERONS
<ul>
<li>Betuigenissen</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
</ul>
</li>
<li>Schilderwerken</li>
<li>Behangwerken</li>
<li>Raamdecoratie</li>
<li>Realisaties</li>
<li>Contacteer ons</li>
</ul>
</nav>
just change the postion to "fixed" and remove margin-top in dropdown-content then it will work fine.
.dropdown-content {
text-align: center;
display: none;
position: inherit;
background-color: #2C2A26;
color: #000;
list-style: none;
width: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 998;
}
So we have to create our own webpage using css and html in IT class and I decided that I wanted my navigation menu a little bit shorter than I had at the beginning but now I can't figure out how to change the css so that when I hover over my navigation menu the hover isn't all over the place like it is now.
Can someone help me out please.?
#nav {
height:28px;
background-color:#222;
position: fixed;
top: 92px;
left: 0;
margin-bottom:0;
box-shadow: 10px 2px 5px #888;
blur: 3px;
spread: 2px;
}
#nav_wrapper {
width: 1185px;
height:28px;
margin-left: 260px;
text-align: left;
margin-top:-10px;
}
#nav ul{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li{
font-family:arial;
font-size: 15px;
display: inline-block;
}
#nav ul li:hover{
background-color: #333;
}
#nav ul li img{
width: 8px;
height:8px;
vertical-align:middle;
padding-left: 10px;
}
#nav ul li a,visited{
color: #ccc;
display:block;
padding: 15px;
text-decoration:none;
}
#nav ul li a:hover{
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul{
display: block;
}
#nav ul ul{
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -1px;
min-width: 80px;
padding:0px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a,visited{
color: #ccc;
}
#nav ul ul li a:hover{
color: #099;
}
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>
<a href="home.html">
<img src="pictures/home.png" alt="" style="width:18px;height:18px;vertical-align:middle;padding-right:11px;"/>
</a>
</li>
<li>HTML <img src="pictures/arrow.png" alt="" />
<ul>
<li>Intro</li>
<li>Basic</li>
<li>Tags</li>
<li>Links</li>
<li>Classes</li>
<li>Intro</li>
<li>Intro</li>
<li>Intro</li>
</ul>
</li>
<li>CSS <img src="pictures/arrow.png" alt="" />
<ul>
<li>Intro</li>
<li>Basics</li>
<li>Intro</li>
<li>Intro</li>
<li>Intro</li>
<li>Intro</li>
</ul>
</li>
</ul>
</div>
</div>
I would suppose this is what you want? (remove negative margin in #nav_wrapper and reduce padding in #nav ul li a)
#nav {
height:28px;
background-color:#222;
position: fixed;
top: 92px;
left: 0;
margin-bottom:0;
box-shadow: 10px 2px 5px #888;
blur: 3px;
spread: 2px;
}
#nav_wrapper {
width: 1185px;
height:28px;
margin-left: 260px;
text-align: left;
}
#nav ul{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li{
font-family:arial;
font-size: 15px;
display: inline-block;
}
#nav ul li:hover{
background-color: #333;
}
#nav ul li img{
width: 8px;
height:8px;
vertical-align:middle;
padding-left: 10px;
}
#nav ul li a,
#nav ul li a.visited{
color: #ccc;
display:block;
padding: 4px;
text-decoration:none;
}
#nav ul li a:hover{
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul{
display: block;
}
#nav ul ul{
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -1px;
min-width: 80px;
padding:0px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a,visited{
color: #ccc;
}
#nav ul ul li a:hover{
color: #099;
}
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>
<a href="home.html">
<img src="pictures/home.png" alt="" style="width:18px;height:18px;vertical-align:middle;padding-right:11px;"/>
</a>
</li>
<li>HTML <img src="pictures/arrow.png" alt="" />
<ul>
<li>Intro</li>
<li>Basic</li>
<li>Tags</li>
<li>Links</li>
<li>Classes</li>
<li>Intro</li>
<li>Intro</li>
<li>Intro</li>
</ul>
</li>
<li>CSS <img src="pictures/arrow.png" alt="" />
<ul>
<li>Intro</li>
<li>Basics</li>
<li>Intro</li>
<li>Intro</li>
<li>Intro</li>
<li>Intro</li>
</ul>
</li>
</ul>
</div>
</div>
This is my HTML5 for nav bar. However, the submenu will not hide and the menu will not display horizontally. Home, American and Foreign and the topmenu options and speed,usability and price are submeny. However Foriegn is displaying below and not next to American. Thank you in advance.
<nav>
<ul class="topmenu">
<li> Home</li>
<li>American</li>
<ul class="submenu">
<li> Speed</li>
<li> Price</li>
<li> Usability</li>
</ul>
<li>Foreign</li>
<ul class="submenu">
<li> Speed</li>
<li> Price</li>
<li> Usability</li>
</ul>
</ul>
</nav>
CSS
nav{
position: relative;
background-color: #00baff;
width: 50%;
margin-left: auto;
margin-right: auto;
}
.topmenu li{
position: relative;
list-style-type: none;
font-size: 20px;
display: inline-block;
margin-right: 30px;
color: white;
}
.topmenu li a{
padding: 5px;
}
.topmenu a:link{
text-decoration: none;
color: #ffffff;
}
.topmenu a:visited{
text-decoration: none;
color: white;
}
.topmenu a:hover{
background-color: #ffffff;
}
.topmenu li .submenu li{
display: none;
list-style-type: none;
}
.topmenu li:hover .submenu li{
display: block;
position: relative;
}
Fiddle
SOLVED:
CSS:
nav{
position: relative;
background-color: #00baff;
width: 50%;
margin-left: auto;
margin-right: auto;
}
/* This is your main UL resize to fit */
.topmenu{
width: 100%;
height: 150px;
}
/* I used > li to target all elements of .topmenu */
.topmenu > li{
font-size: 20px;
margin-right: 10px;
color: white;
list-style:none;
display:inline;
float: left;
}
.topmenu > li a{
padding: 5px;
}
.topmenu a:link{
text-decoration: none;
color: #ffffff;
}
.topmenu a:visited{
text-decoration: none;
color: white;
}
.topmenu a:hover{
background-color: #ffffff;
}
/* new code
What this does is it targets all child UL elements on li:hover
if they have them they will become VISIBLE if not nothing happens */
.topmenu > li:hover >ul{
visibility:visible;
}
/* your two sub menus set to hidden */
.american-submenu{
visibility:hidden;
}
.foreign-submenu{
visibility:hidden;
}
HTML
<nav>
<ul class="topmenu">
<li> Home</li>
<li>American
<ul class="american-submenu">
<li> Speed</li>
<li> Price</li>
<li> Usability</li>
</ul>
</li>
<li>Foreign
<ul class="foreign-submenu">
<li> Speed</li>
<li> Price</li>
<li> Usability</li>
</ul>
</li>
</ul>
</nav>
HMTL
<nav>
<ul class="topmenu">
<li> Home</li>
<li>American
<ul>
<li> Speed</li>
<li> Price</li>
<li> Usability</li>
</ul>
</li>
<li>Foreign
<ul>
<li> Speed</li>
<li> Price</li>
<li> Usability</li>
</ul>
</li>
</ul>
</nav>
CSS
nav{
position: relative;
background-color: #00baff;
width:100%;
}
.topmenu ul {
list-style:none;
}
.topmenu li {
float:left;
position:relative;
list-style-type: none;
font-size: 20px;
display: inline-block;
background-color: #00baff;
color: white;
text-align:center;
padding:5px;
}
.topmenu li ul {
display:none;
position:absolute;
text-decoration:none;
}
.topmenu li:hover ul{
display:block;
background-color: #00baff;
color:white;
height:auto;
width:8em;
}
.topmenu li ul li{
clear:both;
border-style:none;}
.topmenu li a{
padding: 5px;
}
.topmenu a:link{
text-decoration: none;
color: #ffffff;
}
.topmenu a:visited{
text-decoration: none;
color: white;
}
.topmenu a:hover{
background-color:white ;
color:#00baff;
}
Fiddle Demo
Hi I am having trouble getting my vertical submenu to align directly under the parent horizontal menu. I only want the submenus to appear when they are hovered over. I have probably over complicated the entire CSS for myself. Any help would we very much appreciated
Here is the HTML code
<div id="nav_bar">
<ul>
<li>Home </li>
<li> About Us </li>
<li> Training
<ul>
<li> Funded Training</li>
<li> Traineeships</li>
<li> Fee for Service</li>
<li> Enterprise Specific Skill Sets</li>
<li> RPL Assessment</li>
<li> International Training</li>
</ul>
</li>
<li>
Employers
<ul>
<li> Existing Workers</li>
<li> New Workers</li>
</ul>
</li>
<li>Contact Us </li>
<li>Links</li>
</ul>
</div>
Here is the CSS
#nav_bar {
font-family: Verdana, Helvetica, Arial, sans-serif, serif;
font-size:1.2em;
font-weight:bold;
float: left;
height: 28px;
width: 689px;
margin-top: 40px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 10px;}
#nav_bar ul {
list-style-type:none;
margin:0px;
padding:0px;
overflow:hidden;}
#nav_bar li a:link, #nav_bar li a:visited {
float:left;
color: #000;
text-decoration: none;
display:block;
width: 106px;
text-align:center;
padding: 4px;
}
#nav_bar li a:hover, #nav_bar li a:active {
color: #FFF;
background-color: #184B8D;
}
#nav_bar li ul {
display: none;
position:absolute;
}
#nav_bar li ul a:link, #nav_bar li ul a:visited {
color:#000;
text-decoration:none;
display:inline-block;
width:auto;
text-align:center;
padding:4px;
}
#nav_bar li ul a:hover, #nav_bar li ul a:active {
display:block;
position: absolute;
}
#nav_bar li:hover ul {
display:block;
clear:both;
}
hey i can give example that i make refer this :)
add a class to the sub menu and apply style as follows
wish you good luck (Y)
<h2>Dropdown menu example</h2>
<nav class="cf">
<nav class="cf">
<ul class="topmenu">
<li>Home</li>
<li>Products
<ul class="submenu">
<li>Laptops</li>
<li>Tablets</li>
<li>Smartphones</li>
<li>Accessories</li>
</ul>
</li>
<li>Blog
<ul class="submenu">
<li>Recent articles</li>
<li>Archives</li>
<li>Hall of fame</li>
</ul>
</li>
<li>About</li>
<li>Contact
<ul class="submenu">
<li>Customer service</li>
<li>Register</li>
<li>Technical support</li>
</ul>
</li>
</ul>
</nav>
</nav>
CSS
/*micro-clearfix by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/*/
/* For modern browsers */
.cf:before, .cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
/*horizontal menu styles*/
nav {
background: #916A31;
height: 2.3em;
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
ul {
background: #D5973C;
height: 2em;
width: 100%;
}
li {
position: relative;
}
li a {
display: block;
line-height: 2em;
padding: 0 1em;
color: white;
text-decoration: none;
}
li a:hover, .topmenu li:hover > a {
background: #916A31;
height: 2em;
padding-top: .3em;
position: relative;
top: -.3em;
border-radius: .3em .3em 0 0;
}
.current, a:hover.current, .topmenu li:hover a.current {
background: #AD9B7F;
color: #eee;
padding-top: .3em;
border-radius: .3em .3em 0 0;
position: relative;
top: -.3em;
border-bottom: .3em solid #917F63;
cursor: default;
}
/*dropdown menu styles*/
ul.submenu {
float: none;
background: #916A31;
width: auto;
height: auto;
position: absolute;
top: 2em;
left: -9000em;
max-height: 0;
-moz-transition:max-height 0.5s ease-in-out;
-webkit-transition:max-height 0.5s ease-in-out;
-o-transition:max-height 0.5s ease-in-out;
transition:max-height 0.5s ease-in-out;
overflow: hidden;
}
ul.submenu li {
float: none;
}
.topmenu li:hover ul {
left: 0;
max-height: 10em;
}
ul.submenu li a {
border-bottom: 1px solid white;
padding: .2em 1em;
white-space: nowrap;
}
ul.submenu li:last-child a {
border-bottom: none;
}
ul.submenu li a:hover {
background: #D5973C;
height: 2em;
padding-top: .2em;
top: 0;
border-radius: 0;
}