Hello there people i'm a css newbie who is trying to master the art of "css" and "responsivess". Here is my code, what i'm trying to is to make both mobile-custom-sub-left and mobile-custom-sub-left-right to open the .mobile-custom-sub-menu li > ul when you hover over them.
<div class="mobile-custom-sub-left">Categories</div>
<div class="mobile-custom-sub-left-right">All
<ul class="mobile-custom-sub-menu">
<li>
<ul>
<li>Restaurant</li>
<li>Bars</li>
<li>Food</li>
<li>Wineries</li>
<li>Shops</li>
<li>Spa & Beauty</li>
<li>Adventures</li>
<li>Experiences</li>
<li>Hotels</li>
<li>Art</li>
</ul>
</li>
</ul>
</div>
The CSS that's working!
.mobile-custom-sub-left-right:hover .mobile-custom-sub-menu li > ul{
display:block;
}
And the css i'm trying to make it work
.mobile-custom-sub-left:hover div.mobile-custom-sub-left-right ul.mobile-custom-sub-menu li ul{
display:block!important;
}
EDIT FIDDLE DEMO: http://jsfiddle.net/spk063/BCwFX/2/
.mobile-custom-sub-left:hover, .mobile-custom-sub-left-right:hover, .mobile-custom-sub-menu li ul{
display:block;
}
and u should change ur HTML to
<ul>
<li>Restaurant</li>
<li>Bars</li>
<li>Food</li>
<li>Wineries</li>
<li>Shops</li>
<li>Spa & Beauty</li>
<li>Adventures</li>
<li>Experiences</li>
<li>Hotels</li>
<li>Art</li>
</ul>
<html>
<style>
p
{
margin-left:100px; text-align:justify;
font-size:20px;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav{
margin-left:400px;}
nav ul {
position: relative;
display: inline-table;
}
nav ul:after
{
content: ""; clear: both; display: block;
}
nav ul li
{
float: left;
}
nav ul li:hover {
background: #4b545f;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: relative; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul ul {
position: relative; left: 100%; top:0;
}
</style>
<nav>
<ul>
<li>Home</li>
<li>Restaurant
<ul>
<li>Coconut</li>
<li>Rava </li>
</li>
</ul>
</li>
<li>Sweets
</li>
<li>Exclusive</li>
</ul>
</nav>
</html>
http://jsfiddle.net/tZ9Uu/
Related
This is the side menu:
/*Set the parent <li>’s CSS position property to ‘relative’.*/
ul {
list-style: none;
padding: 0;
margin: 0;
background: #1bc2a2;
float: right;
}
ul li {
display: block;
position: relative;
margin-left: -200px;
background: #1bc2a2;
}
/*The CSS to hide the sub menus.*/
li ul {
margin-top: -50px;
display:none;
}
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover {
background: #2c3e50;
}
/*Displays the dropdown menu on hover.*/
li:hover > ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
}
li:hover a {
background: #1bc2a2;
}
li:hover li a:hover {
background: #2c3e50;
}
.main.navigation li ul li {
border-top: 0;
}
/*Displays second level dropdown menus to the right of the first level dropdown menu.
*/
ul ul ul {
margin-left: -120px;
top: 0;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>oldal.menu</title>
<link rel="stylesheet"
type="text/css"
href="side.menu2.css"
</head>
<body>
<div id="menu">
<ul>
<li><a>Közérdekű adatok</a></li>
<li><a>Járóbeteg szakellátó</a></li>
<li><a>Álláslehetőségek</a></li>
<li><a>Közszolgálati intézmények</a></li>
<li><a>Civil szervezetek</a></li>
<li><a>Egyházak</a>
<ul>
<li><a>Református egyház</a></li>
<li><a>Katolikus egyház</a></li>
</ul>
</li>
<li><a>Idegenforgalom</a>
<ul>
<li><a>Térkép</a></li>
<li><a>Vadászat</a></li>
<li><a>Horgászat</a></li>
<li><a>Túrázás</a></li>
<li><a>Szálláslehetőségek</a></li>
<li><a>Kultúrális rendezvények</a></li>
</ul>
</li>
<li><a>Galéria</a></li>
<li><a>Kiadványok</a></li>
<li><a>Cigándi hírmondó</a></li>
<li><a>Árapasztó tározó</a></li>
<li><a>Gazdahírek</a></li>
<li><a>Archívum</a></li>
<li><a>Eladó ingatlanok</a></li>
<li><a>Hasznos linkek</a></li>
<li><a>Kistérség</a></li>
<li><a>Magyar Államkincstár</a></li>
<li><a>TÁMOP-3.2.3/A-11/1-2012-0112</a></li>
<li><a>Cigándi Járási Hivatal</a></li>
<li><a>ITS projekt</a></li>
<li><a>Település üzemeltetés</a></li>
<li><a>Művészeti csoportok</a></li>
<li><a>ÁNYK nyomtatványok</a></li>
</ul>
</div>
</body>
</html>
And now I insert the horizontal menu:
/*Set the parent <li>’s CSS position property to ‘relative’.*/
ul {
list-style: none;
padding: 0;
margin: 0;
background: #1bc2a2;
}
ul li {
display: block;
position: relative;
float: left;
background: #1bc2a2;
}
/*The CSS to hide the sub menus.*/
li ul {
display:none;
}
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover {
background: #2c3e50;
}
/*Displays the dropdown menu on hover.*/
li:hover > ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
}
li:hover a {
background: #1bc2a2;
}
li:hover li a:hover {
background: #2c3e50;
}
.main.navigation li ul li {
border-top: 0;
}
/*Displays second level dropdown menus to the right of the first level dropdown menu.
*/
ul ul ul {
left: 100%;
top: 0;
}
#main-navigation {
width: 100%;
}
#main-navigation ul:before,
#main-navigation ul:after {
content: '';
display:table;
clear: both;
}
<!DOCTYPE html>
<html lang="hu-hu">
<head>
<meta charset="UTF-8">
<title>cigand.menu.nested.list</title>
<link rel="stylesheet"
type="text/css"
href="cigand.hu.menu.2.css" />
</head>
<body>
<div id="main-navigation">
<ul>
<li><a>Városunk</a>
<ul>
<li><a>Köszöntő</a></li>
<li><a>Földrajz</a></li>
<li><a>Története</a></li>
<li><a>Heraldika</a></li>
</ul>
</li>
<li><a>Önkormányzat</a>
<ul>
<li><a>Polgármesteri Hivatal</a>
<ul>
<li><a>Polgármester</a></li>
<li><a>Alpolgármester</a></li>
<li><a>Jegyző</a></li>
<li><a>Titkárság</a></li>
<li><a>Hatósági és Igazgatási Osztály</a></li>
<li><a>Építésügyi és Városfejlesztési Osztály</a></li>
<li><a>Pénzügyi Osztály</a></li>
<li><a>Letölthető dokumentumok</a></li>
<li><a>Pályázatok</a>
<ul>
<li><a>EU</a></li>
<li><a>ÁROP</a></li>
<li><a>TIOP-1.2.3</a></li>
<li><a>KEOP-6.1.0/A/11.</a></li>
<li><a>KEOP-6.2.0/A/11-2011-0121</a></li>
<li><a>KEOP-6.2.0/A/11-2011-0124</a></li>
<li><a>KEOP-4.2.0/A/11-2011-0626</a></li>
<li><a>EOP-5.5.0/K/14-2014-0031</a></li>
<li><a>ÁROP-1.A.3-2014-2014-0116</a></li>
<li><a>KEOP-5.7.0/15-2015-0275</a></li>
<li><a>KÖFOP-1.2.1-VEKOP-16-2016-00280</a></li>
</ul>
</li>
</ul>
</li>
<li><a>Képviselő-testület</a>
<ul>
<li><a>Képviselők</a></li>
<li><a>Határozatok, Rendeletek</a></li>
<li><a>Rendelet-tervezetek</a></li>
<li><a>estületi ülések</a></li>
</ul>
</li>
<li><a>RNÖ</a></li>
<li><a>Telefonszámok</a></li>
</ul>
</li>
<li><a>Oktatás és Kultúra</a>
<ul>
<li><a>Oktatás</a>
<ul>
<li><a>Cigánd</a>
<ul>
<li><a>Óvoda</a></li>
<li><a>Iskola</a></li>
</ul>
</li>
<li><a>Révleányvár</a></li>
<li><a>Zemplénagárd</a></li>
</ul>
</li>
<li><a>Kultúra</a>
<ul>
<li><a>Művelődési Ház</a></li>
<li><a>Városi Könyvtár</a></li>
<li><a>Múzeumporta</a></li>
</ul>
</li>
<li><a>Iskolakonyha</a></li>
</ul>
</li>
<li><a>Egészségügy</a>
<ul>
<li><a>Háziorvosok</a></li>
<li><a>Fogorvos</a></li>
<li><a>Központi Orvosi Ügyelet</a></li>
<li><a>Védőnői Szolgálat</a></li>
<li><a>Járóbeteg Szakrendelő</a></li>
</ul>
</li>
<li><a>Hagyományok</a>
<ul>
<li><a>Múzeumporta</a></li>
<li><a>Tájház</a></li>
<li><a>Óvodamúzeum</a></li>
</ul>
</li>
<li><a>Sport</a>
<ul>
<li><a>Intézmények</a>
<ul>
<li><a>Szabadidő Központ</a></li>
<li><a>Műfüves-pálya</a></li>
<li><a>Labdarúgó-pálya</a></li>
</ul>
</li>
<li><a>Cigánd SE</a></li>
</ul>
</li>
<li><a>Kezdőlap</a>
</li>
</ul>
</div>
</body>
</html>
So how to modify the code to put every menu in one page. I know the result is easy but my work is not working. I added unique name to all "ul" "li" and "a" but it did not work. The CSS file needs some modification.
So how to modify the code to put every menu in one page. I know the result is easy but my work is not working. I added unique name to all "ul" "li" and "a" but it did not work. The CSS file needs some modification.
Your css is correct. you just need to add ID before your css like below. please add id in all css property.
#main-navigation ul
#menu ul
Also you can check on snippet.
/*Set the parent <li>’s CSS position property to ‘relative’.*/
#main-navigation ul {
list-style: none;
padding: 0;
margin: 0;
background: #1bc2a2;
}
#main-navigation ul li {
display: block;
position: relative;
float: left;
background: #1bc2a2;
}
/*The CSS to hide the sub menus.*/
#main-navigation ul li ul {
display:none;
}
#main-navigation ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
#main-navigation ul li a:hover {
background: #2c3e50;
}
/*Displays the dropdown menu on hover.*/
#main-navigation ul li:hover > ul {
display: block;
position: absolute;
}
#main-navigation ul li:hover li {
float: none;
}
#main-navigation ul li:hover a {
background: #1bc2a2;
}
#main-navigation ul li:hover li a:hover {
background: #2c3e50;
}
#main-navigation li ul li {
border-top: 0;
}
/*Displays second level dropdown menus to the right of the first level dropdown menu.
*/
#main-navigation ul ul ul {
left: 100%;
top: 0;
}
#main-navigation {
width: 100%;
}
#main-navigation ul:before,
#main-navigation ul:after {
content: '';
display:table;
clear: both;
}
/*Set the parent <li>’s CSS position property to ‘relative’.*/
#menu ul {
list-style: none;
padding: 0;
margin: 0;
background: #1bc2a2;
float: right;
}
#menu ul li {
display: block;
position: relative;
margin-left: -200px;
background: #1bc2a2;
}
/*The CSS to hide the sub menus.*/
#menu li ul {
margin-top: -50px;
display:none;
}
#menu ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
#menu ul li a:hover {
background: #2c3e50;
}
/*Displays the dropdown menu on hover.*/
#menu li:hover > ul {
display: block;
position: absolute;
}
#menu li:hover li {
float: none;
}
#menu li:hover a {
background: #1bc2a2;
}
#menu li:hover li a:hover {
background: #2c3e50;
}
#menu .main.navigation li ul li {
border-top: 0;
}
/*Displays second level dropdown menus to the right of the first level dropdown menu.
*/
#menu ul ul ul {
margin-left: -120px;
top: 0;
}
<div id="main-navigation">
<ul>
<li><a>Városunk</a>
<ul>
<li><a>Köszöntő</a></li>
<li><a>Földrajz</a></li>
<li><a>Története</a></li>
<li><a>Heraldika</a></li>
</ul>
</li>
<li><a>Önkormányzat</a>
<ul>
<li><a>Polgármesteri Hivatal</a>
<ul>
<li><a>Polgármester</a></li>
<li><a>Alpolgármester</a></li>
<li><a>Jegyző</a></li>
<li><a>Titkárság</a></li>
<li><a>Hatósági és Igazgatási Osztály</a></li>
<li><a>Építésügyi és Városfejlesztési Osztály</a></li>
<li><a>Pénzügyi Osztály</a></li>
<li><a>Letölthető dokumentumok</a></li>
<li><a>Pályázatok</a>
<ul>
<li><a>EU</a></li>
<li><a>ÁROP</a></li>
<li><a>TIOP-1.2.3</a></li>
<li><a>KEOP-6.1.0/A/11.</a></li>
<li><a>KEOP-6.2.0/A/11-2011-0121</a></li>
<li><a>KEOP-6.2.0/A/11-2011-0124</a></li>
<li><a>KEOP-4.2.0/A/11-2011-0626</a></li>
<li><a>EOP-5.5.0/K/14-2014-0031</a></li>
<li><a>ÁROP-1.A.3-2014-2014-0116</a></li>
<li><a>KEOP-5.7.0/15-2015-0275</a></li>
<li><a>KÖFOP-1.2.1-VEKOP-16-2016-00280</a></li>
</ul>
</li>
</ul>
</li>
<li><a>Képviselő-testület</a>
<ul>
<li><a>Képviselők</a></li>
<li><a>Határozatok, Rendeletek</a></li>
<li><a>Rendelet-tervezetek</a></li>
<li><a>estületi ülések</a></li>
</ul>
</li>
<li><a>RNÖ</a></li>
<li><a>Telefonszámok</a></li>
</ul>
</li>
<li><a>Oktatás és Kultúra</a>
<ul>
<li><a>Oktatás</a>
<ul>
<li><a>Cigánd</a>
<ul>
<li><a>Óvoda</a></li>
<li><a>Iskola</a></li>
</ul>
</li>
<li><a>Révleányvár</a></li>
<li><a>Zemplénagárd</a></li>
</ul>
</li>
<li><a>Kultúra</a>
<ul>
<li><a>Művelődési Ház</a></li>
<li><a>Városi Könyvtár</a></li>
<li><a>Múzeumporta</a></li>
</ul>
</li>
<li><a>Iskolakonyha</a></li>
</ul>
</li>
<li><a>Egészségügy</a>
<ul>
<li><a>Háziorvosok</a></li>
<li><a>Fogorvos</a></li>
<li><a>Központi Orvosi Ügyelet</a></li>
<li><a>Védőnői Szolgálat</a></li>
<li><a>Járóbeteg Szakrendelő</a></li>
</ul>
</li>
<li><a>Hagyományok</a>
<ul>
<li><a>Múzeumporta</a></li>
<li><a>Tájház</a></li>
<li><a>Óvodamúzeum</a></li>
</ul>
</li>
<li><a>Sport</a>
<ul>
<li><a>Intézmények</a>
<ul>
<li><a>Szabadidő Központ</a></li>
<li><a>Műfüves-pálya</a></li>
<li><a>Labdarúgó-pálya</a></li>
</ul>
</li>
<li><a>Cigánd SE</a></li>
</ul>
</li>
<li><a>Kezdőlap</a>
</li>
</ul>
</div>
<div id="menu">
<ul>
<li><a>Közérdekű adatok</a></li>
<li><a>Járóbeteg szakellátó</a></li>
<li><a>Álláslehetőségek</a></li>
<li><a>Közszolgálati intézmények</a></li>
<li><a>Civil szervezetek</a></li>
<li><a>Egyházak</a>
<ul>
<li><a>Református egyház</a></li>
<li><a>Katolikus egyház</a></li>
</ul>
</li>
<li><a>Idegenforgalom</a>
<ul>
<li><a>Térkép</a></li>
<li><a>Vadászat</a></li>
<li><a>Horgászat</a></li>
<li><a>Túrázás</a></li>
<li><a>Szálláslehetőségek</a></li>
<li><a>Kultúrális rendezvények</a></li>
</ul>
</li>
<li><a>Galéria</a></li>
<li><a>Kiadványok</a></li>
<li><a>Cigándi hírmondó</a></li>
<li><a>Árapasztó tározó</a></li>
<li><a>Gazdahírek</a></li>
<li><a>Archívum</a></li>
<li><a>Eladó ingatlanok</a></li>
<li><a>Hasznos linkek</a></li>
<li><a>Kistérség</a></li>
<li><a>Magyar Államkincstár</a></li>
<li><a>TÁMOP-3.2.3/A-11/1-2012-0112</a></li>
<li><a>Cigándi Járási Hivatal</a></li>
<li><a>ITS projekt</a></li>
<li><a>Település üzemeltetés</a></li>
<li><a>Művészeti csoportok</a></li>
<li><a>ÁNYK nyomtatványok</a></li>
</ul>
</div>
I've got 5 li on my page.
One of theme (the third) is higher than the other. I would like them to horizontally align to the center of this biggest LI. However, it's aligning on the top of it.
I've tried to use "Vertical-align: middle" but it doesn't work.
Here is my actual code:
<link rel="stylesheet" href="style2015.css" />
<div id="menu">
<ul>
<li>Portfolio
<ul>
<li>Sous-item 1</li>
<li>Sous-item 2</li>
<li>Sous-item 3</li>
</ul>
</li>
<li>Projets
</li>
<li id="logo"></li>
<li>A propos</li>
<li>Contact</li>
</ul>
</div>
Css:
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
padding:0;
background-color:black;
display: inline;
vertical-align: middle;
}
#menu li a {
display:block;
width:100px;
color:white;
text-decoration:none;
}
#menu li a:hover {
color:#FFD700;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
#menu li ul {
position:absolute;
}
#menu {
height:30px;
}
/* Logo */
#logo{
height: 190px;
width: 266px;
background-color:black;
}
#menu ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
width: 700px;
/* some fixed width so, menu doesn't fall on next line*/
}
#menu li {
/* float: left; you can't align a floated element easily */
margin: auto;
padding: 0;
background-color: black;
display: inline-block;
vertical-align: middle;
}
#menu li a {
display: block;
width: 100px;
color: white;
text-decoration: none;
}
#menu li a:hover {
color: #FFD700;
}
#menu ul li ul {
display: none;
}
#menu ul li:hover ul {
display: block;
}
#menu li:hover ul li {
float: none;
}
#menu li ul {
position: absolute;
}
#menu {
height: 30px;
}
/* Logo */
#logo {
height: 190px;
width: 266px;
background-color: black;
}
<div id="menu">
<ul>
<li>Portfolio
<ul>
<li>Sous-item 1
</li>
<li>Sous-item 2
</li>
<li>Sous-item 3
</li>
</ul>
</li>
<li>Projets
</li>
<li id="logo"></li>
<li>A propos
</li>
<li>Contact
</li>
</ul>
</div>
If i got your question correct, then this is what you need to do. I have just made the required changes, rest of code is all yours.
I have created a CSS and HTML navigation menu that works in all browsers except IE6 - IE8. How can I make this work? I've attempted to make my css and html as small as possible to help with the compatibility but to no avail.
CSS and HTML
ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
ul {
background-color: #99CCFF;
background-color: rgb(153, 204, 255);
list-style-type: none;
position: relative;
display: inline-table;
font-family: 'Julius Sans One', sans-serif;
}
ul:after {
content: ""; clear: both; display: block;
}
ul li {
float: left;
display:none;
}
ul li:hover {
background: #6699CC;
}
ul li:hover a {
color: #000000;
}
ul li a {
display: block; padding: 25px 40px;
color: #000000; text-decoration: none;
}
ul ul {
background: #99CCFF; padding: 0;
position: absolute; top: 100%;
}
ul ul li {
display:inline;
float: none;
border-top: 0px solid #6b727c;
border-bottom: 0px solid #575f6a;
position: relative;
}
ul ul li a {
padding: 15px 40px;
color: #000000;
}
ul ul li a:hover {
background: #6699CC;
}
ul ul ul {
position: absolute; left: 100%; top:0;
}
<ul id="nav">
<li>Contact Us
<ul>
<li>Address</li>
<li>Rentals</li>
<li>Phone Numbers</li>
</ul>
</li>
<li>Mass
<ul>
<li>Readings</li>
<li>Bulletins</li>
<li>Catechism</li>
<li>Archdiocese of<br>Indiana</li>
<li>Confession</li>
<li>Mass Schedule</li>
</ul>
</li>
<li>Ministries
<ul>
<li>Pre-School</li>
<li>Day Care</li>
<li>CCD</li>
<li>Haiti<br>Ministry</li>
</ul>
</li>
<li>Info
<ul>
<li>Walking<br>Park</li>
<li>Councils &<br>Committees</li>
<li>Cemetery Rules</li>
<li>Bulletins</li>
<li>Catechism</li>
</ul>
<li>Activities
<ul>
<li>Labor Day<br>Festival</li>
<li>Bingo</li>
<li>Drawdown</li>
<li>MSGR Schmitz<br>Memorial Fund</li>
</ul>
</li>
</ul>
Looks like you have too many preceding ul selectors in your css rules.
<ul>
<li>
<ul> </ul>
</li>
<ul>
That is your basic structure. Try removing the extra ul from the css where there are more than 2 of them.
Second, I notice you're using an inline-table rule. Rules like these are often trouble with older versions of IE, so make sure to do a compatibility check on these types of rules. Here's another SO post as a reference to this:
display:inline-table
I have originally created my navigation in Chrome in which the outcome fits perfectly to my needs. I have then found out that Mozilla Firefox won't output the same result, the drop-down menus under Member Action and Admin Related will display vertically instead on horizontally as i wanted. However my biggest dissapointment was testing the navigation in Internet Explorer which won't even show the drop-down menus.
I would really appreciate someone checking the below code and your feedback, Thanks.
Solved the problem by changing one of the lines in css;
navigation ul li {float: left; list-style:none; }
HTML
<div id="navigationContainer">
<div id="navigation">
<ul>
<li class="borderleft">Home </li>
<li>Register </li>
<li>Search cars</li>
<li>Display all cars</li>
<li>Member Actions
<ul> <!-- Open drop down menu -->
<li class="bordertop">Login</li>
<li class="floatLeft">Member Area</li>
<li>Reservation</li>
<li>Contact us</li>
<li>Admin Related
<ul>
<li class="bordertop">Insert new car</li>
<li>Delete a car</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>
CSS
* {padding: 0%; margin 0%; } /* Overwrites the browser stylesheet */
#navigationContainer {background:url(images/navi.png); width:100%;position: relative; white-space:nowrap; word-spacing:0; }
#navigation {width:1200px; height:65px; position: relative; font-family: Arial; margin: 2px auto; font-size: 125%; }
#navigation ul { list-style-type: none; }
#navigation ul li {float: left; position: relative; }
#navigation ul li a { border-right: 2px solid #e9e9e9; padding: 20px;
display: block; margin: 0 auto; text-align: center; color: black; text-decoration: none; }
#navigation ul li a:hover { background: blue; color: white; }
#navigation ul li ul { display: none; }
#navigation ul li:hover ul {display: block; position: absolute; }
#navigation ul li ul li {float:left; position:relative; }
#navigation ul li:hover ul li a { background: #12aeef; color: white; position:relative; margin: 0px auto; border-bottom: 1px solid white; border-right: 1px solid white; width: 119px; }
#navigation ul li:hover ul li a:hover { background: blue;}
.bordertop { border-top: 1px solid white; }
.borderleft { border-left: 2px solid #e9e9e9;}
Try this
http://jsfiddle.net/Vf3AJ/
Example from: http://www.cssnewbie.com/example/css-dropdown-menu/horizontal.html
EDITED
Misread horizontal for vertical. tested in IE10, FF, and Chrome
As a side note: horizontal menus have serious issues depending on the width of the viewers screen.
CSS
nav {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
}
nav li {
list-style: none;
float: left;
}
nav li a {
display: block;
padding: 3px 8px;
text-transform: uppercase;
text-decoration: none;
color: #999;
font-weight: bold;
}
nav li a:hover {
background: blue;
color: white;
}
nav li ul {
display: none;
}
nav li:hover ul, nav li.hover ul {
position: absolute;
display: inline;
left: 0;
width: 100%;
margin: 0;
padding: 0;
}
nav li:hover li, nav li.hover li {
float: left;
}
nav li:hover li a, navbar li.hover li a {
color: #000;
}
nav li li a:hover {
color: white;
}
HTML
<div id="navigationContainer">
<nav id="navigation">
<ul>
<li class="borderleft">Home
</li>
<li>Register
</li>
<li>Search cars
</li>
<li>Display all cars
</li>
<li>Member Actions
<ul>
<!-- Open drop down menu -->
<li class="bordertop">Login
</li>
<!-- A bordertop class is given to this listed element in order to style a top border for in in the external CSS file. -->
<li class="floatLeft">Member Area
</li>
<li>Reservation
</li>
</ul>
</li>
<li>Contact us
</li>
<li>Admin Related
<ul>
<li class="bordertop">Insert new car
</li>
<li>Delete a car
</li>
</ul>
</li>
</ul>
</nav>
</div>
I am currently looking into developing a CSS only drop down menu. The idea is when the mouse hovers over a ul tag it will make another ul class appear.
Below is the code that I currently have.
HTML
<head>
<link href="nav.css" rel="stylesheet" type="text/css">
</head>
<ul class="nav">
<li class="topMenu">Home</li>
<ul class="subMenu" id="home">
<li>Hello</li>
<li>World</li>
</ul>
</ul>
CSS
.nav, .topMenu, .subMenu
{
position: relative;
list-style: none;
}
.topMenu
{
position: relative;
float: left;
}
.subMenu
{
display: none;
}
.topMenu a:hover + li
{
display: block;
background-color: blue;
}
The idea is that when the mouse hovers over the li class="topMenu" then the ul class="subMenu" id="home" should appear underneath.
Ideally this should be only in a CSS format without requiring any javascript etc.
Thanks for any help you can provide.
All you really need to do is nest the <ul> within your <li> element.
<nav>
<ul>
<li>Link</li>
<li>
Link
<ul>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
<li>Link</li>
</ul>
</nav>
Here's some CSS that will help you get started:
/* Resets */
nav a {
text-decoration: none;
font: 12px/1 Verdana;
color: #000;
display: block; }
nav a:hover { text-decoration: underline; }
nav ul {
list-style: none;
margin: 0;
padding: 0; }
nav ul li { margin: 0; padding: 0; }
/* Top-level menu */
nav > ul > li {
float: left;
position: relative; }
nav > ul > li > a {
padding: 10px 30px;
border-left: 1px solid #000;
display: block;}
nav > ul > li:first-child { margin: 0; }
nav > ul > li:first-child a { border: 0; }
/* Dropdown Menu */
nav ul li ul {
position: absolute;
background: #ccc;
width: 100%;
margin: 0;
padding: 0;
display: none; }
nav ul li ul li {
text-align: center;
width: 100%; }
nav ul li ul a { padding: 10px 0; }
nav ul li:hover ul { display: block; }
Preview: http://jsfiddle.net/Wexcode/BEhvQ/
It will need some tweaking:
<ul class="nav">
<li class="topMenu">Home</li>
<li class="subMenu">
<ul id="home">
<li>Hello</li>
<li>World</li>
</ul>
</li>
</ul>
.topMenu:hover + .subMenu
{
display: block;
background-color: blue;
}
Demo