How to display submenus when mouseover menu items using CSS

  • 1
  • Question
  • Updated 7 years ago
  • Answered
Merged

This conversation has been merged. Please reference the main conversation: August Code Request

How to display submenus when mouseover menu items using CSS for my site www.tutorialsguru.net

Current css for menu & sub menu:
/* Main menu */
div#ys_menu {
width: 914px;
min-height: 30px;
}

div#ys_menu ul {
right: 33px;
text-align: right;
list-style-type: none;
list-style-image: none;
margin: 0;
padding: 0 30px 0 0;
}

div#ys_menu li {
display: inline;
border-left: 0px solid ;
border-color: #000000;
font: 16px/30px Georgia, Helvetica, sans-serif;
margin: 0;
padding: 0 5px;
list-style-type: none;
list-style-image: none;
position: relative;
}

div#ys_menu li.single, div#ys_menu li.first {
border-left: none;
}

div#ys_menu li.selected a {
font-weight: bold;
background-color: #E6DFB8;
color: #000000;
}

div#ys_menu li a {
font-size: 18px;
text-decoration: none;
margin: 0;
padding: 0 15px;
background-color: #FFFE9C;
color: #000000;
font-weight: bold;
-webkit-border-radius: 15px;/*safari and Chrome*/
-moz-border-radius: 15px; /*Mozilla*/
-o-box-border-radius: 15px; /*Opera*/
-ms-box-border-radius:15px; /*Ms IE*/
border-radius: 15px; /*W3C*/
}

div#ys_menu li a:hover{
text-decoration: None;
background-color: #0000FF;
color: #FFFFFF;
}

/* Sub menu */
div#ys_menu_2{
display: block;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}

div#ys_menu_2 ul {
left: 33px;
text-align: center;
list-style-type: none;
list-style-image: none;
padding: 0 50px;
}

div#ys_menu_2 li {
border-left: 0px solid;
border-color: #000000;
font: 16px/30px Georgia, Helvetica, sans-serif;
margin: 0;
padding: 0 5px;
list-style-type: none;
list-style-image: none;
}

div#ys_menu_2 li a {
background: #FFFE9C;
line-height: 1em;
padding: 10px;
width: 100px;
height: auto;
color: #000000;
font-weight: bold;
-webkit-border-radius: 15px;/*safari and Chrome*/
-moz-border-radius: 15px; /*Mozilla*/
-o-box-border-radius: 15px; /*Opera*/
-ms-box-border-radius:15px; /*Ms IE*/
border-radius: 15px; /*W3C*/
}

div#ys_menu_2 li a:hover {
text-decoration: None;
font-weight: bold;
background-color: #0000FF;
color: #FFFFFF;
}
Photo of Ravikumar Reddy Yeruva

Ravikumar Reddy Yeruva

  • 10 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Laura Thomas

Laura Thomas

  • 4536 Posts
  • 211 Reply Likes
Hi Ravikumar,

For custom code help, you can head to this thread.