CODEWITHSUNDEEP
css
Sn1pereagle
Sn1pereagle

Reputation: 61

css keep hover menu item hovered

I use the following menu:

<ul id="menu">
<li class="subMenu">
<h2><a href="#"><span>menu item</span></a></h2>
      <div>
<p><a href="#"><span>submenu item</span></a></p>
   </div>   


</li></ul>

I have the following css:

ul#menu {
float:right;
height:80px;
color: #FFF;
margin: 0;
padding: 0.8em 0em;
 }

ul#menu li {
display: inline;

margin: 0.1em 1em;
position: relative;
 }

ul#menu h2,ul#menu h3 {
font-size: 1em;

font-weight: bold;
display: inline;

 }

ul#menu li a {

text-decoration: none;

}
ul#menu li a:hover {
text-decoration: underline;
}

ul#menu li.subMenu a {

padding: 0 1.2em;
}
ul#menu li.subMenu a:hover {
text-decoration: underline;
}
ul#menu div {
display: none;
}

ul#menu li.subMenu div {
border: 1px solid #fff;
width: 125px;
position: absolute;
top: 2.5em;
left: 30px;
background: #fff;
color: #000;
 }

ul#menu li.hovered div {
display: block;
 }

ul#menu li.subMenu div a {
text-decoration: none!important;
}

can anybody advise how i can keep menu item hovered when i hover over the submenu item

thank you in advance.

Upvotes: 3

Views: 4442

Answers (3)

shingokko
shingokko

Reputation: 412

You could use li:hover to keep the contents of the li tag displayed. You could also follow this simple tutorial on creating a pure CSS hover menu.

Upvotes: 0

Tural Ali
Tural Ali

Reputation: 23240

http://www.devinrolsen.com/pure-css-horizontal-menu/

Upvotes: 1

Jordan Gray
Jordan Gray

Reputation: 16499

Quick solution in jsFiddle. (See the comments in the CSS to find out what I've changed.)

You are most of the way there already. Replacing the ul#menu li.hovered div selector in your CSS with ul#menu li:hover div is most of the battle; the rest is adjusting the submenu position so that you can actually hover over it without it disappearing. (In the jsFiddle above I've simply used padding instead of offsetting with absolute positioning.)

However, please pay attention to the commenters above! Their observations are entirely correct and germane:

  1. The markup being used is rather heavy and unorthodox. For example, your submenu "items" are paragraphs in a div, but normally I would expect to see just a nested list; also, the spans seem unnecessary, and you don't need the submenu class on the list items when you already have an ID on the parent ul.
  2. Second, they are also correct that there are plenty of great tutorials and examples for this out there, so while rolling your own worthwhile exercise you don't need to do it alone—nor should you! My first introduction was this old A List Apart article, and you can even ignore the whole section about JavaScript/Suckerfix since it's 2011 and most of us are perfectly happy to forget about IE6.

Upvotes: 1

Related Questions