the sub menu is not displaying properly help me please
i want it in CSS and HTML
submenu should be like a list it should be displayed
one down another but it is displaying one after another in same line
after hover on main menu the submenu should be displayed
<style>
#navbar {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding:0;}
#navbar li
{
list-style: none;
float: left;
}
#navbar li a {
display: block;
padding: 3px 8px;
text-transform: uppercase;
text-decoration: none;
color: #999;
font-weight: bold; }
#navbar li a:hover {
color: #000; }
#navbar li ul {
display: none; }
#navbar li:hover ul, #navbar li.hover ul {
position: absolute;
display:list-item;
left: 0;
width: 100%;
margin: 0;
padding: 0; }
</style>
</head>
<body>
<ul id="navbar">
<li>Home</li>
<li>About Us
<ul>
<li>Subitem One</li>
<li>Second Subitem</li>
<li>thrid subitem</li>
</ul>
</li>
<li>Services</li>
<li>Products</li>
<li>Contact</li>
</ul>
add this in your css
#navbar li
{
list-style: none;
float: left;
position:relative;
}
here is jsFiddle file
Live demo
HI now used to this css and created drop down navi in pure css
Css
#navbar{
background:#0082c8;
position:relative;
margin-top:15px;
}
#navbar > li{
float:left;
margin:0 10px;
position:relative;
padding:14px 0;
}
#navbar li a, .subnavi li a{
color:white;
text-decoration:none;
display:inline-block;
line-height:29px;
padding:0 13px;
font-size:16px;
font-family:arial;
text-shadow: 0px 2px 2px #034e9f;
filter: dropshadow(color=#034e9f, offx=0, offy=2);
}
#navbar > li:hover > a, li:hover > a , #navbar li a.active{
background:#055c9f;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 3px 3px 0px #042960;
-moz-box-shadow: inset 0px 3px 3px 0px #042960;
box-shadow: inset 0px 3px 3px 0px #042960;
border:1px solid #009ada;
color:#f7cf00;
line-height:27px;
padding:0 12px;
}
.subnavi{
position:absolute;
display:none;
top:51px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 3px 1px #979395;
-moz-box-shadow: 0px 0px 3px 1px #979395;
box-shadow: 0px 0px 3px 1px #979395;
background:#0082c8;
border:1px solid #005890;
padding:10px 0;
white-space:nowrap;
}
#navbar li:hover .subnavi{
display:block;
}
#navbar .subnavi li{
margin:0;
}
#navbar .subnavi li a{
display:block;
font-size:13px;
padding:0 15px;
border-radius:0;
line-height:27px;
}
#navbar .subnavi li a:hover{
padding:0 15px;
border-radius:0;
border-left:0;
border-right:0;
line-height:25px;
}
#navbar:after{
content:'';
clear:both;
display:block;
overflow:hidden;
}
HTML
<ul id="navbar">
<li>About</li>
<li>Demo
<ul class="subnavi">
<li>Demo</li>
<li>Demo</li>
<li>Demo</li>
<li>Demo</li>
<li>Demo</li>
</ul>
</li>
<li>Demo</li>
</ul>
Live demo
Add this style for your submenus:
#navbar li ul li
{
float: none;
}
Related
I am a backend developer and don't know much about the designing. In my ecommerce project, I am trying to get sub-menus to be displayed from the top no matter where the parent menu position.
In my menu HTML I have:
<ul id="nav">
<li class="site-name">Social </li>
<li class="yahoo">Yahoo
<ul style="">
<li>Yahoo Games »
<ul style="">
<li>Board Games</li>
<li>Card Games</li>
<li>Puzzle Games</li>
<li>Skill Games »
<ul style="">
<li>Yahoo Pool</li>
<li>Chess</li>
</ul>
</li>
</ul>
</li>
<li>Yahoo Search</li>
<li>Yahoo Answsers</li>
</ul>
</li>
<li class="google">Google
<ul style="">
<li>Google mail</li>
<li>Google Plus</li>
<li>Google Search »
<ul>
<li>Search Images</li>
<li>Search Web</li>
</ul>
</li>
</ul>
</li>
<li class="twitter">Twitter
<ul style="">
<li>New Tweets</li>
<li>Compose a Tweet</li>
</ul>
</li>
</ul>
And the CSS is to this menu is:
#nav{
height: 39px;
font: 12px Geneva, Arial, Helvetica, sans-serif;
background: #3AB3A9;
border: 1px solid #30A097;
border-radius: 3px;
min-width:500px;
margin-left: 0px;
padding-left: 0px;
}
#nav li{
list-style: none;
display: block;
float: left;
height: 40px;
position: relative;
border-right: 1px solid #52BDB5;
}
#nav li a{
padding: 0px 10px 0px 30px;
margin: 0px 0;
line-height: 40px;
text-decoration: none;
border-right: 1px solid #389E96;
height: 40px;
color: #FFF;
text-shadow: 1px 1px 1px #66696B;
}
#nav ul{
background: #f2f5f6;
padding: 0px;
border-bottom: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-left:1px solid #DDDDDD;
border-radius: 0px 0px 3px 3px;
box-shadow: 2px 2px 3px #ECECEC;
-webkit-box-shadow: 2px 2px 3px #ECECEC;
-moz-box-shadow:2px 2px 3px #ECECEC;
width:170px;
}
#nav .site-name,#nav .site-name:hover{
padding-left: 10px;
padding-right: 10px;
color: #FFF;
text-shadow: 1px 1px 1px #66696B;
font: italic 20px/38px Georgia, "Times New Roman", Times, serif;
background: url(images/saaraan.png) no-repeat 10px 5px;
width: 160px;
border-right: 1px solid #52BDB5;
}
#nav .site-name a{
width: 129px;
overflow:hidden;
}
#nav li.facebook{
background: url(../images/facebook.png) no-repeat 9px 12px;
}
#nav li.facebook:hover {
background: url(../images/facebook.png) no-repeat 9px 12px #3BA39B;
}
#nav li.yahoo{
background: url(../images/yahoo.png) no-repeat 9px 12px;
}
#nav li.yahoo:hover {
background: url(../images/yahoo.png) no-repeat 9px 12px #3BA39B;
}
#nav li.google{
background: url(../images/google.png) no-repeat 9px 12px;
}
#nav li.google:hover {
background: url(../images/google.png) no-repeat 9px 12px #3BA39B;
}
#nav li.twitter{
background: url(../images/twitter.png) no-repeat 9px 12px;
}
#nav li.twitter:hover {
background: url(../images/twitter.png) no-repeat 9px 12px #3BA39B;
}
#nav li:hover{
background: #3BA39B;
}
#nav li a{
display: block;
}
#nav ul li {
border-right:none;
border-bottom:1px solid #DDDDDD;
width:170px;
height:39px;
}
#nav ul li a {
border-right: none;
color:#6791AD;
text-shadow: 1px 1px 1px #FFF;
border-bottom:1px solid #FFFFFF;
}
#nav ul li:hover{background:#DFEEF0;}
#nav ul li:last-child { border-bottom: none;}
#nav ul li:last-child a{ border-bottom: none;}
/* Sub menus */
#nav ul{
display: none;
visibility:hidden;
position: absolute;
top: 40px;
}
/* Third-level menus */
#nav ul ul{
top: 0px;
left:170px;
display: none;
visibility:hidden;
border: 1px solid #DDDDDD;
}
/* Fourth-level menus */
#nav ul ul ul{
top: 0px;
left:170px;
display: none;
visibility:hidden;
border: 1px solid #DDDDDD;
}
#nav ul li{
display: block;
visibility:visible;
}
#nav li:hover > ul{
display: block;
visibility:visible;
}
When executes on the server it displayed like this:
https://jsfiddle.net/uqfsvn4L/
As you can see the submenu of Google Search displays from the top of its parent position but I want it to be displayed from the top of the main menu. How can I get the submenu display from the top?
My expected output would be:
Remove position: relative from #nav li and then adjust the top property of #nav ul. Here is the working example
#nav {
height: 39px;
font: 12px Geneva, Arial, Helvetica, sans-serif;
background: #3AB3A9;
border: 1px solid #30A097;
border-radius: 3px;
min-width: 500px;
margin-left: 0px;
padding-left: 0px;
}
#nav li {
list-style: none;
display: block;
float: left;
height: 40px;
border-right: 1px solid #52BDB5;
}
#nav li a {
padding: 0px 10px 0px 30px;
margin: 0px 0;
line-height: 40px;
text-decoration: none;
border-right: 1px solid #389E96;
height: 40px;
color: #FFF;
text-shadow: 1px 1px 1px #66696B;
}
#nav ul {
background: #f2f5f6;
padding: 0px;
border-bottom: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-radius: 0px 0px 3px 3px;
box-shadow: 2px 2px 3px #ECECEC;
-webkit-box-shadow: 2px 2px 3px #ECECEC;
-moz-box-shadow: 2px 2px 3px #ECECEC;
width: 170px;
}
#nav .site-name,
#nav .site-name:hover {
padding-left: 10px;
padding-right: 10px;
color: #FFF;
text-shadow: 1px 1px 1px #66696B;
font: italic 20px/38px Georgia, "Times New Roman", Times, serif;
background: url(images/saaraan.png) no-repeat 10px 5px;
width: 160px;
border-right: 1px solid #52BDB5;
}
#nav .site-name a {
width: 129px;
overflow: hidden;
}
#nav li.facebook {
background: url(../images/facebook.png) no-repeat 9px 12px;
}
#nav li.facebook:hover {
background: url(../images/facebook.png) no-repeat 9px 12px #3BA39B;
}
#nav li.yahoo {
background: url(../images/yahoo.png) no-repeat 9px 12px;
}
#nav li.yahoo:hover {
background: url(../images/yahoo.png) no-repeat 9px 12px #3BA39B;
}
#nav li.google {
background: url(../images/google.png) no-repeat 9px 12px;
}
#nav li.google:hover {
background: url(../images/google.png) no-repeat 9px 12px #3BA39B;
}
#nav li.twitter {
background: url(../images/twitter.png) no-repeat 9px 12px;
}
#nav li.twitter:hover {
background: url(../images/twitter.png) no-repeat 9px 12px #3BA39B;
}
#nav li:hover {
background: #3BA39B;
}
#nav li a {
display: block;
}
#nav ul li {
border-right: none;
border-bottom: 1px solid #DDDDDD;
width: 170px;
height: 39px;
}
#nav ul li a {
border-right: none;
color: #6791AD;
text-shadow: 1px 1px 1px #FFF;
border-bottom: 1px solid #FFFFFF;
}
#nav ul li:hover {
background: #DFEEF0;
}
#nav ul li:last-child {
border-bottom: none;
}
#nav ul li:last-child a {
border-bottom: none;
}
/* Sub menus */
#nav ul {
display: none;
visibility: hidden;
position: absolute;
top:48x;
}
/* Third-level menus */
#nav ul ul {
top: 0px;
left: 170px;
display: none;
visibility: hidden;
border: 1px solid #DDDDDD;
min-height: 100%
}
/* Fourth-level menus */
#nav ul ul ul {
top: 0px;
left: 170px;
display: none;
visibility: hidden;
border: 1px solid #DDDDDD;
min-height: 100%
}
#nav ul li {
display: block;
visibility: visible;
}
#nav li:hover>ul {
display: block;
visibility: visible;
}
<ul id="nav">
<li class="site-name">Social </li>
<li class="yahoo">Yahoo
<ul>
<li>Yahoo Games »
<ul>
<li>Board Games</li>
<li>Card Games</li>
<li>Puzzle Games</li>
<li>Skill Games »
<ul>
<li>Yahoo Pool</li>
<li>Chess</li>
</ul>
</li>
</ul>
</li>
<li>Yahoo Search</li>
<li>Yahoo Answsers</li>
</ul>
</li>
<li class="google">Google
<ul>
<li>Google mail</li>
<li>Google Plus</li>
<li>Google Search »
<ul>
<li>Search Images</li>
<li>Search Web</li>
</ul>
</li>
</ul>
</li>
<li class="twitter">Twitter
<ul>
<li>New Tweets</li>
<li>Compose a Tweet</li>
</ul>
</li>
</ul>
i am trying to show pagination in center but its show on left side. i am also try center tag and align=center attributes but its not working....
Pagination show in the center of page
#pagination {
margin: 40 40 0;
float: left;
}
ul.tsc_pagination li a {
border:solid 1px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
padding:6px 9px 6px 9px;
}
ul.tsc_pagination li {
padding-bottom:1px;
}
ul.tsc_pagination li a:hover,
ul.tsc_pagination li a.current {
color:#FFFFFF;
box-shadow:0px 1px #EDEDED;
-moz-box-shadow:0px 1px #EDEDED;
-webkit-box-shadow:0px 1px #EDEDED;
}
ul.tsc_pagination {
margin:4px 0;
padding:0px;
height:100%;
overflow:hidden;
font:12px 'Tahoma';
list-style-type:none;
}
ul.tsc_pagination li {
float:left;
margin:0px;
padding:0px;
margin-left:5px;
}
ul.tsc_pagination li a {
color:black;
display:block;
text-decoration:none;
padding:7px 10px 7px 10px;
}
ul.tsc_pagination li a img {
border:none;
}
ul.tsc_pagination li a {
color:#0A7EC5;
border-color:#8DC5E6;
background:#F8FCFF;
}
ul.tsc_pagination li a:hover,
ul.tsc_pagination li a.current {
text-shadow:0px 1px #388DBE;
border-color:#3390CA;
background:#58B0E7;
background:-moz-linear-gradient(top, #B4F6FF 1px, #63D0FE 1px, #58B0E7);
background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0.02, #B4F6FF), color-stop(0.02, #63D0FE), color-stop(1, #58B0E7));
}
<div id="pagination">
<ul class="tsc_pagination">
<!-- Show pagination links -->
<li></li>
<li><a class="current">1</a></li>
<li>2</li>
<li>Next</li>
<li></li>
</ul>
</div>
you can see this
Remove Float:left from li and add display:inline-block
#pagination{
margin: 40 40 0;
float: left;
width:100%;
}
ul.tsc_pagination li a{
border:solid 1px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
padding:6px 9px 6px 9px;
}
ul.tsc_pagination li{
padding-bottom:1px;
}
ul.tsc_pagination li a:hover,
ul.tsc_pagination li a.current{
color:#FFFFFF;
box-shadow:0px 1px #EDEDED;
-moz-box-shadow:0px 1px #EDEDED;
-webkit-box-shadow:0px 1px #EDEDED;
}
ul.tsc_pagination{
margin:4px 0;
padding:0px;
height:100%;
overflow:hidden;
font:12px 'Tahoma';
list-style-type:none;
text-align:center;
}
ul.tsc_pagination li{
display:inline-block;
margin:0px;
padding:0px;
margin-left:5px;
}
ul.tsc_pagination li a{
color:black;
display:block;
text-decoration:none;
padding:7px 10px 7px 10px;
}
ul.tsc_pagination li a img{
border:none;
}
ul.tsc_pagination li a{
color:#0A7EC5;
border-color:#8DC5E6;
background:#F8FCFF;
}
ul.tsc_pagination li a:hover,
ul.tsc_pagination li a.current{
text-shadow:0px 1px #388DBE;
border-color:#3390CA;
background:#58B0E7;
background:-moz-linear-gradient(top, #B4F6FF 1px, #63D0FE 1px, #58B0E7);
background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0.02, #B4F6FF), color-stop(0.02, #63D0FE), color-stop(1, #58B0E7));
}
<div id="pagination">
<ul class="tsc_pagination">
<!-- Show pagination links -->
<li></li>
<li><a class="current">1</a></li>
<li>2</li>
<li>Next</li>
<li></li>
</ul>
</div>
There are 2 changes to make.
Change 1- Change css of #pagination to below.
#pagination {
width: 100%;
text-align: center;
}
Change 2- Make the ul.tsc_pagination li not have float instead of
that use display:inline-block. Change css as below.
ul.tsc_pagination li {
/* float: left;*/
/*Dont use float:left*/
display: inline-block;
margin: 0px;
padding: 0px;
margin-left: 5px;
}
#pagination {
width: 100%;
text-align: center;
}
ul.tsc_pagination li a {
border: solid 1px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
padding: 6px 9px 6px 9px;
}
ul.tsc_pagination li {
padding-bottom: 1px;
}
ul.tsc_pagination li a:hover,
ul.tsc_pagination li a.current {
color: #FFFFFF;
box-shadow: 0px 1px #EDEDED;
-moz-box-shadow: 0px 1px #EDEDED;
-webkit-box-shadow: 0px 1px #EDEDED;
}
ul.tsc_pagination {
margin: 4px 0;
padding: 0px;
height: 100%;
overflow: hidden;
font: 12px 'Tahoma';
list-style-type: none;
}
ul.tsc_pagination li {
/* float: left;*/
/*Dont use float:left*/
display: inline-block;
margin: 0px;
padding: 0px;
margin-left: 5px;
}
ul.tsc_pagination li a {
color: black;
display: block;
text-decoration: none;
padding: 7px 10px 7px 10px;
}
ul.tsc_pagination li a img {
border: none;
}
ul.tsc_pagination li a {
color: #0A7EC5;
border-color: #8DC5E6;
background: #F8FCFF;
}
ul.tsc_pagination li a:hover,
ul.tsc_pagination li a.current {
text-shadow: 0px 1px #388DBE;
border-color: #3390CA;
background: #58B0E7;
background: -moz-linear-gradient(top, #B4F6FF 1px, #63D0FE 1px, #58B0E7);
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.02, #B4F6FF), color-stop(0.02, #63D0FE), color-stop(1, #58B0E7));
}
<div id="pagination">
<ul class="tsc_pagination">
<!-- Show pagination links -->
<li></li>
<li><a class="current">1</a></li>
<li>2</li>
<li>Next</li>
<li></li>
</ul>
</div>
try this one https://jsfiddle.net/g3643p4q/4/
only mansion
ul.tsc_pagination li {
display: inline-block;
float: none;
margin: 0 0 0 5px;
padding: 0;
}
ul.tsc_pagination {
font: 12px "Tahoma";
height: 100%;
list-style-type: none;
margin: 0 auto;
overflow: hidden;
padding: 0;
text-align: center;
}
#pagination {
float: none;
}
I'm trying to create a basic drop-down menu. Whenever I however over "blog", the "wiki" link seems to get dragged into it.
Here's a screenshot to show what I mean:
As you can see, "wiki" is below "march". I want to have "march" drop down from "blog" and keep "wiki" along the green line.
#header {
box-shadow: 0px 0px 5px 2px #000;
border-radius: 15px 15px 15px 15px;
width: 790px;
height: 30px;
line-height: 85%;
background: #002929;
word-spacing: 5px;
}
#header li {
display: inline;
}
#header ul ul {
display: none;
}
#header ul li:hover > ul {
display: block;
}
#header a:hover {
background: #0147FA;
border-radius: 15px 15px 15px 15px;
padding: 2px;
}
#header a {
text-decoration: none;
color: #ffff4c;
}
<div id="header">
<ul>
<li style="font-size:30px"><strong>Home</strong></li>
<li style="font-size:30px"><strong>Blog</strong>
<ul>
<li style="font-size:30px"><strong>March</strong></li>
</ul>
</li>
<li style="font-size:30px"><strong>Wiki</strong></li>
</ul>
</div>
Here's a JSFiddle.
So I cleaned up the css and it seems to work now.
Here is your html below
<div id="header">
<ul>
<li style="font-size:30px"><strong>Home</strong></li>
<li style="font-size:30px"><strong>Blog</strong>
<ul>
<li style="font-size:30px"><strong>March</strong></li>
</ul>
</li>
<li style="font-size:30px"><strong>Wiki</strong></li>
</ul>
</div>
Here is the new css below:
#header {
box-shadow: 0px 0px 5px 2px #000;
border-radius:15px 15px 15px 15px;
width: 790px;
height: 30px;
line-height: 85%;
background: #002929;
word-spacing: 5px;
}
#header li {
display: inline;
}
#header a:hover {
background: #0147FA;
border-radius: 15px 15px 15px 15px;
}
#header a {
text-decoration: none;
color: #ffff4c;
}
#header ul a
{
text-decoration:none;
font-weight:700;
line-height:32px;
padding:0 15px;
}
#header ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#header ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
padding:0
}
#header ul li:hover > ul
{
display:block
}
Be sure to compare to see the differences between your css and my css. If this is is not what you wanted please get back to me.
I'm new to programming web and I made this small submenu and works properly in Mozilla, but in IE when I run the submenu disappears.
Why is this only happens in IE?
I use IE11
Code:
http://jsfiddle.net/4nLabpon/
or:
<div id="grad1">
<div class="wrapper">
<div class="menu-holder">
<ul class="menu">
<li class="active">
<a class="test" href="#">Planning</a>
<ul class="submenu">
<li>Add Products
</li>
<li>Add Clients
</li>
<li>Deadline
</li>
</ul>
</li>
<li>Sells
</li>
</ul>
</div>
<!-- menu-holder end -->
</div>
</div>
CSS
#grad1 {
height: auto;
background-color: grey;
}
.wrapper {
width:600px;
height:30px;
opacity:0.9;
margin:0 auto;
}
.menu-holder ul {
margin: 2px 0 0px 25px;
padding: 0;
list-style-type: none;
}
.menu-holder ul li {
position: relative;
float: left;
padding: 0px 10px 0 10px;
margin: 0px 0px 100px 0px;
border-left: 1px dotted white;
line-height: 0px;
}
.menu-holder ul li:hover > a {
background-color: #1b597d;
}
.menu-holder ul li:hover ul {
display: block;
}
.menu-holder ul li a {
font-family: arial, sans-serif;
font-size: 12px;
font-weight: bold;
display: block;
color: white;
text-decoration: none;
padding: 15px 10px 15px 10px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
.menu-holder ul li ul {
float: none;
display: none;
position: absolute;
top: 40px;
left: 0px;
margin: -1px 0 0px 10px;
padding: 5px 10px 5px 10px;
white-space: nowrap;
}
.menu-holder ul li ul:hover {
display: block;
}
.menu-holder ul li ul li {
position: static;
float: none;
display: inline;
padding: 5px 10px 5px 10px;
margin: 0px 0px 0px -10px;
background-color: #1b597d;
}
.menu-holder ul li ul li a {
display: inline;
margin: 0 0px 0 0px;
padding: 0px 10px 0px 10px;
font-weight: normal;
-webkit-border-radius: 0;
border-radius: 0;
}
.menu-holder ul li ul li:first-of-type {
-webkit-border-radius: 0px 0px 0px 5px;
border-radius: 0px 0px 0px 5px;
}
.menu-holder ul li ul li:last-of-type {
-webkit-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
}
.menu-holder ul li:first-of-type {
border-left: none;
}
Thank you all
Try this code
<div class="wrapper">
<ul class="menu">
<li class="active"><a class="test" href="#">Planning</a>
<ul class="submenu">
<li>Add Products</li>
<li>Add Clients</li>
<li>Deadline</li>
</ul>
</li>
<li>Sells</li>
</ul>
</div>
Css Style :
.wrapper{
float:left;
width:100%;
position:relative;
background:#0066CC;
color:#fff;
}
ul.menu{
float:left;
width:100%;
list-style:none;
color:#000000;
}
ul li a{
color:#000;
text-decoration:none;
padding:5px;
}
ul.menu li{
display:inline-block;
float:left;
margin-right:5px;
background:#cccccc;
color:#ff6600;
}
ul.menu li > ul{
float:left;
position:absolute;
width:auto;
margin-top:0px;
left:0px;
display:none;
}
ul.menu li > ul li{
margin:0;
}
ul.menu li:hover > ul{
display:block;
}
I have been playing with CSS3 trying to really understand it and I have not been able to get the behavior of the sub-menu navigation to be correct. Please see http://jsfiddle.net/jllcpp04/9Jpd6/7/ for a working example. The sub-menu still has the bullet points on it and it is not popping up to the right. This is part of a dynamic menu whose width will change depending upon what offices will appear (based on user profile). I would prefer not to set top/right/left/bottom for div location. I also cannot figure out why derivnav is not overriding the nested submenu.
My HTML Code:
<div class="main_nav">
<ul class="nav">
<li>Home
</li>
<li>
<div class="submenu">Office
<div class="subnav">
<h3>Near You</h3>
<ul>
<li>
<div class="deriv">New York
<div class="derivnav">
<ul>
<li>Upper West Side
</li>
<li>Upper East Side
</li>
<li>Lower West Side
</li>
<li>Wallstreet
</li>
</ul>
</div>
</div>
</li>
</ul>
<h3>Not Near You</h3>
<ul>
<li>chicago
</li>
<li>philadelphia
</li>
<li>san francisco
</li>
</ul>
</div>
</div>
</li>
</ul>
Component CSS:
#charset"utf-8";
/* CSS Document */
.main_nav {
width:56%;
text-align:center;
float:left;
display:inline-block;
}
.nav {
list-style:none;
height:43px;
white-space:nowrap;
margin: 0px auto 10px auto;
min-width:775px;
text-align:left;
}
.nav h3 {
font-size:14px;
margin:7px 0 14px 4px;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
.nav h4 {
font-size:12px;
margin:7px 0 14px 4px;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
.nav > li {
border:none;
text-transform:uppercase;
float:left;
position:relative;
margin:5px 3px 5px 2px;
padding:auto;
}
.nav li {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #333333;
outline:0;
text-decoration:none;
padding-left:10px;
}
.nav li:hover > a, .nav li:hover > p {
color:#cccc66;
}
.nav li .drop {
padding-right:15px;
background:url("drop-nonsel.png") no-repeat right 4px;
}
.nav li:hover .drop, .nav li .drop:hover {
background:url("drop-sel.png") no-repeat right 4px;
}
.nav .subnav {
float:left;
position:absolute;
text-align:left;
padding:5px;
margin: 5px 5px 5px 0;
border:1px solid #CCC;
border-top:none;
white-space:nowrap;
/* Gradient background */
background:#FFFFFF;
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
opacity:0;
transition:visibility 0s linear 0.2s, opacity 0.2s linear;
visibility:hidden;
}
.nav .submenu:hover .subnav, .nav li .subnav:hover {
top:auto;
opacity:1;
visibility:visible;
}
.nav .subnav > ul {
padding:2px;
margin:0 0 12px 0;
}
.nav .subnav > li {
list-style:none;
border-bottom:thin;
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
}
.nav .subnav > li:last-chid {
border-bottom:none;
}
.deriv li .dropr {
padding-right:10px;
background:url("drop-right-nonsel.png") no-repeat right 6px;
}
.deriv li:hover .dropr, .deriv li .dropr:hover {
background:url("drop-right-sel.png") no-repeat right 6px;
}
.subnav .derivnav {
float:right;
position:absolute;
text-align:left;
right:-150px;
padding:5px;
margin: 5px 5px 5px 0;
border:1px solid #CCC;
border-left:none;
white-space:nowrap;
/* Gradient background */
background:#FFFFFF;
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
opacity:0;
transition:visibility 0s linear 0.3s, opacity 0.3s linear;
visibility:hidden;
}
.subnav .derivnav > li {
list-style:none;
border-bottom:thin;
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
}
.subnav li .deriv:hover .derivnav, .subnav li .derivnav:hover {
top:auto;
opacity:1;
visibility:visible;
}
.derivnav ul {
padding:2px;
margin:0 0 12px 0;
}
.derivnav li {
list-style:none;
border-bottom:thin;
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
}
I have been playing with it for a few days and can't seem to figure it out. my CSS3 validates and my html code does as well. Any ideas?
Thanks!
Jon
It worked for me when I removed the > marks from these two lines:
Old version
.nav .subnav > li {
.nav .subnav > li:last-chid {
New version
.nav .subnav li {
.nav .subnav li:last-child {
The > in a CSS selector means that the selected element must be a direct child of the previous element, not just the nearest descendant. In your markup, .subnav is a div, not a ul. The li element simply wasn't selected before, so you're styles were never applied.
If you need the .subnav list styles to be completely separate from the .deriv styles, you could use the > operator like this:
Alternate
.nav .subnav > ul > li {
My fork of the DEMO
i add DEMO
.nav li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #333333;
outline:0;
text-decoration:none;
padding-left:10px;
}