css html mouseover hover

Question

Below is my code, currently when I hover on "About Us" everything below the dropdown menu opens; how can i change the css so that it only hovers when i mouseover, this means, when i hover on "Team", then I should see the menus below it.

also how can i adjust the width so that it is shiffted more to the left.

also when the dropdown menu is longer in lenth, it hides below my content, i want the dropdown menu to be over the body of the page, not in hiding.

thanks in advance you all.

<style>
ul {
  font-family: Arial, Verdana;
font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: block;
  position: relative;
  float: left;
}
li ul { display: none; }
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #000061;
  margin-left: 1px;
  white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
  display: block;
  position: absolute;
}
ul li:hover li {
  float: none;
  font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>

<body>
<ul id="menu">
  <li><a href=""><b>Home</b></a></li>
  <li><a href=""><b>About Us</b></a>
    <ul>
    <li><a href="">Team</a>
    <ul>
        <li><a href="">Profile</a></li>
        <li><a href="">Board</a></li>
    </ul>
    </li>
    </ul>
  </li>
<ul>
</body>

JSFiddle: http://jsfiddle.net/LWEry/

97ldave · Accepted Answer · 2013-03-01 17:04:05Z

3

Like this:

ul {
  font-family: Arial, Verdana;
font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: block;
  position: relative;
  float: left;
}
li ul { display: none; }
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #000061;
  margin-left: 1px;
  white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover > ul {
  display: block;
  position: absolute;
  width: 100%;
}
ul li:hover li {
  float: none;
  font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }

.sub-menu
 {
    position: absolute;
    top: 0;
    left: 100%;
 }

http://jsfiddle.net/3xWcu/2/

I changed one selector.

FROM

li:hover ul

TO

li:hover > ul

Edited my fiddle above. Added a sub-menu class to the ul containing the Profile and Board li tags:

 <ul class="sub-menu">
    <li><a href="">Profile</a></li>
    <li><a href="">Board</a></li>
 </ul>

and added some CSS above.

edited Mar 1, 2013 at 17:04

answered Mar 1, 2013 at 16:52

97ldave

5,2594 gold badges28 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

NULL Over a year ago

cool, but can the width for the submenu for "team" be on the right hand side, not immediately below "team"

97ldave Over a year ago

updates my answer above. I have added a class to the sub menu containing the Profile and Board items. And added some CSS.

martriay · Accepted Answer · 2013-03-01 16:49:39Z

0

You mean like this? http://jsfiddle.net/3xWcu/

<style>
ul {
  font-family: Arial, Verdana;
font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: block;
  position: relative;
  float: left;
}
li ul { display: none; }
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #000061;
  margin-left: 1px;
  white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
  display: block;
  position: absolute;
  width: 100%;
}
ul li:hover li {
  float: none;
  font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>

<body>
<ul id="menu">
  <li><a href=""><b>Home</b></a></li>
  <li><a href=""><b>About Us</b></a>
    <ul>
    <li><a href="">Team</a>
    <ul>
        <li><a href="">Profile</a></li>
        <li><a href="">Board</a></li>
    </ul>
    </li>
    </ul>
  </li>
<ul>
</body>

answered Mar 1, 2013 at 16:49

martriay

5,7423 gold badges32 silver badges39 bronze badges

1 Comment

NULL Over a year ago

not quite, the "team" has its own sub menu. the width ajustment is perfect though.

Collectives™ on Stack Overflow

css html mouseover hover

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related