4 replies [Last post]
Jumpringer
Offline
newbie
Last seen: 9 years 49 weeks ago
Joined: 2009-03-06
Posts: 2
Points: 0

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*/

PeterPan
PeterPan's picture
Offline
Enthusiast
London
Last seen: 9 years 9 weeks ago
London
Joined: 2008-03-13
Posts: 51
Points: 11

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....?!

Jumpringer
Offline
newbie
Last seen: 9 years 49 weeks ago
Joined: 2009-03-06
Posts: 2
Points: 0

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.

cnusuram
Offline
newbie
Last seen: 9 years 35 weeks ago
Joined: 2009-06-21
Posts: 1
Points: 0

total correct code

please give the total correct code.,.,.,,.i cant make the correct changes.,.,.,.,pls reply asap.,.,.,.,

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 8 years 14 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

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.

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.