Hello, the code below shows a 2 level horizontal menu (text only) that functions well except that the submenus disappear when the parent page is active. My challenge - which has eluded me - is to force the submenus to be visible and selectable when the parent page is active. Thanks for your feedback.
Untitled Document
CSS Dropdown Menu
/*START OF TOP DROP DOWN navigation MENU*/
* {
margin:0;
padding:0;
}
body {
font-size:100%;
}
.wrapper {
height:1.4em;
width:100%;
border-bottom:1.4em white;
}
/*########################
START First Level of Menu
*/
#nav {
margin:0 auto;
text-align:left;
list-style: none;
width:auto;
font-size: 0.8em;
font-family:Arial, Helvetica, sans-serif;
}
#nav li {
float: left;
background-color: transparent;
padding: 0px 5px 0px 5px;
width:auto;
border-right-style: solid;
border-right-color: #365794;
border-right-width: 1px;
}
#nav li:hover, #nav li.sfhover, #navsmall li:hover {
color:#000;
}
#nav a {
color:#FFFFFF;
display: block;
text-align:left;
text-decoration: none;
padding: 0.2em 0;
}
#nav a:focus,#nav a:hover,#nav a:active {
width:auto;
color:#929871;
}
/*
END First Level of Menu
#######################*/
/*########################
START Second Level of Menu
*/
#nav ul{
list-style: none;
position: absolute;
left: -999em;
}
#nav li:hover ul {
position: absolute;
left:0;
top:auto;
margin-left:50px;
}
#nav ul li {
background: white;
}
#nav li li {
float:left;
width:auto;
border-right-color: #2D487B;
border-right-style: solid;
border-right-width: 1px;
}
#nav li ul li a {
color:#20345A;
text-align:center;
text-decoration:none;
padding: 0.2em 0;
}
#nav li li:hover {
border:0;
border-right-style: solid;
border-right-color: #2D487B;
border-right-width: 1px;
}
#nav li ul a:hover{
text-decoration:underline;
color:#000;
}
.twoline, .twoline a {
width:300px !important;
}
.first {
background:transparent !important;
}
.last {
background:transparent !important;
}
/*END OF TOP DROP DOWN navigation MENU*/
ummm...ok...i'v done this
ummm...ok...i'v done this before...what you could do for starters is simply wrap your child
- tags within a
- tag! Thats what i would do...then the
- that contains the child menus you would give a class right. This class would have a simple piece of css that would keep showing the
so basically:
CSS:
ul#nav li.keepOpen { display:block; }
HTML:
div class="wrapper"> <ul id="nav"> <li class="first"><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li class="keepOpen"> <!-- Add this --> <ul> <li><a href="#">Item 1.1</a></li> <li><a href="#">Item 1.2</a></li> <li><a href="#">Item 1.3</a></li> <li><a href="#">Item 1.4</a></li> <li><a href="#">Item 1.5</a></li> </ul> </li> <!-- Add this --> <li><a href="#">Products</a></li> <!-- You missing the closing </li> tag by the way!! <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/wink.png" title="Wink" alt="Wink" class="smiley-content" /> --> ...etc
Hope that helps you out alittle....?!
2 level horizontal bar menu
Thanks Peter Pan.... you pointed me in the right direction. I was able to get the submenu to display; the formatting, though, was lost - so I need to keep working on this to get it right.
total correct code
please give the total correct code.,.,.,,.i cant make the correct changes.,.,.,.,pls reply asap.,.,.,.,
PeterPan he is nesting the
PeterPan he is nesting the submenus within li's just in a different way to the norm, and to the best way.
Jumpringer, I think the problem is, when you are accessing the internal elements of your submenus make sure you put the full path i.e
#nav li li:hover {
border:0;
border-right-style: solid;
border-right-color: #2D487B;
border-right-width: 1px;
}
Should be
#nav li ul li:hover {
border:0;
border-right-style: solid;
border-right-color: #2D487B;
border-right-width: 1px;
}
And also,
the better way is:
/*firstLevel*/ #mynav ul li /*secondLevel*/ #mynav ul li ul { visibility:hidden } #mynav ul li:hover ul { visibility:visible } /*ThirdLevel*/ #mynav ul li ul li ul, #mynav ul li:hover ul li ul { visibility:hidden } #mynav ul li ul li:hover ul, #mynav ul li:hover ul li:hover { visibility:visible; }
Note: there is a lot more styling needed to make that work properly, like setting marging and padding to zero, and also use float:left on the top level ul li to make it horizontal, not display:inline.
you don't need any absolute positioning at all. Absolute positioning should be avoided wherever possible because it is prone to catastrophe in different sized screens.