-
Jul 2nd, 2014, 10:37 PM
#1
Thread Starter
Fanatic Member
[RESOLVED] Issue in creating Drop Down Menu
Hi,
I am facing an issue in creating a drop down menu. Completed few steps but not got the desired result. Snaps and code is attached for reference
MENU BEFORE FOCUS
MENU ON HOVER
WANT THE BELOW RESULT
my code is as under
HTML Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#divbg {
/*background: -moz-linear-gradient(top, rgba(0,20,153,1) 0%, rgba(96,171,248,1) 82%,
rgba(168,211,255,1) 100%);*/ /*REVERSE BACKGROUND */
background:-moz-linear-gradient(top, rgba(168,211,255,1) 0%,
rgba(96,171,248,1) 18%, rgba(0,20,153,1) 100%);
width:50%;
margin:0 auto;
text-align:center;
border-radius:10px;
}
body {
margin:0px;
padding:0px;
}
#nav ul {
margin:0px;
padding:0px;
}
#nav li {
background:-moz-linear-gradient(top, rgba(168,211,255,1) 0%,
rgba(96,171,248,1) 18%, rgba(0,20,153,1) 100%);
width:150px;
height:60px;
line-height:60px;
list-style:none;
color:white;
border-radius:5px;
text-align:center;
border-right:1px solid white;
display:inline-block;
position:relative;
float:left;
}
#nav li:hover {
background:none;
background-color:#900;
text-decoration:none;
color:white;
display:block;
text-align:center;
}
#nav li a:hover {
background-color:yellow;
}
#nav ul li ul {
position:absolute;
visibility:hidden;
}
#nav ul li ul {
position:absolute;
visibility:hidden;
}
#nav ul li:hover ul {
background:none;
visibility:visible;
background-color:#FFF;
color:white;
box-shadow:10px 10px 10px rgba(0,0,0,1);
}
</style>
</head>
<body>
<div id="divbg">
<div id="nav">
<ul>
<li><a>User Management</a>
<ul>
<li><a>New User</a></li>
<li><a>User Management</a></li>
</ul>
</li>
<li>Account Management</li>
<li>Inventory Management</li>
<li>Voucher Management</li>
</ul>
</div>
</div>
</body>
</html>
-
Jul 3rd, 2014, 01:34 AM
#2
Re: Issue in creating Drop Down Menu
I usually go for a Javascript-Jquery menu to avoid doing all that CSS (that i am not very good at). Also note -moz-linear , this will not work on Iexplorer so be careful.
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
Jul 3rd, 2014, 04:51 AM
#3
Thread Starter
Fanatic Member
Re: Issue in creating Drop Down Menu
there is a solution of -moz-linear for Iexplorer, but what is the solution of my issue ?
-
Jul 3rd, 2014, 05:29 AM
#4
Re: Issue in creating Drop Down Menu
As i've said i use Javascript menus to avoid CSS hell, so i don't have a solution for your CSS menu.
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
Jul 3rd, 2014, 12:52 PM
#5
Thread Starter
Fanatic Member
Re: Issue in creating Drop Down Menu
do you have some sample code for a perfect javascript menu
-
Jul 3rd, 2014, 04:13 PM
#6
Re: Issue in creating Drop Down Menu
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
Jul 3rd, 2014, 11:26 PM
#7
Thread Starter
Fanatic Member
Re: Issue in creating Drop Down Menu
Thanks,
By the way i have done it with css. Code is s under
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#divbg {
/*background: -moz-linear-gradient(top, rgba(0,20,153,1) 0%, rgba(96,171,248,1) 82%,
rgba(168,211,255,1) 100%);*/ /*REVERSE BACKGROUND */
/* background:-moz-linear-gradient(top, rgba(168,211,255,1) 0%,
rgba(96,171,248,1) 18%, rgba(0,20,153,1) 100%);
*/ width:600px;
height:70px;
margin:0 auto;
text-align:center;
border-radius:5px;
border:1px solid navy;
}
body {
margin:0px;
padding:0px;
}
#nav ul { /* TOP BAR */
margin:0px;
padding:0px;
}
#nav li { /* TOP BAR SETTING */
background-image:url(button_bg.png);
/*background:-moz-linear-gradient(top, rgba(168,211,255,1) 0%,
rgba(96,171,248,1) 18%, rgba(0,20,153,1) 100%);*/ /*GRADIENT*/
width:150px;
height:70px;
line-height:70px;
list-style:none;
color:white;
border-radius:0px;
text-align:center;
display:inline-block;
position:relative;
float:left;
}
#nav li:hover { /* TOP MENU HOVER SETTING */
background: -moz-linear-gradient(top, rgba(0,20,153,1) 0%, rgba(96,171,248,1) 82%,
rgba(168,211,255,1) 100%);
text-decoration:none;
color:white;
display:block;
text-align:center;
cursor:pointer;
}
#nav li ul li{ /* SETTIGN FOR DROPDOWN MENU */
width:150px;
height:30px;
line-height:2;
background:none;
background-color:#F9F9F9;
color:navy;
border:0.1px solid #F0F0F0;
border-radius:0px;
text-align:left;
padding-left:10px;
}
#nav li ul li:hover { /* DROPDOWN MENU TEXT ALIGNMENT */
text-align:left;
}
#nav ul li ul {
position:absolute;
visibility:hidden;
transition:visibility 2s linear,opacity 0.3s linear;
opacity:0;
}
#nav ul li:hover ul {
background:none;
visibility:visible;
/*box-shadow:10px 10px 10px rgba(0,0,0,1);*/
cursor:pointer;
opacity:1;
}
</style>
</head>
<body>
<div id="divbg">
<div id="nav">
<ul>
<li><a>User Management</a>
<ul>
<li><a>New User</a></li>
<li><a>User Management</a></li>
<li><a>New User</a></li>
<li><a>User Management</a></li>
<li><a>New User</a></li>
<li><a>User Management</a></li>
</ul>
</li>
<li>Account Management
<ul>
<li><a>New User</a></li>
<li><a>User Management</a></li>
<li><a>New User</a></li>
<li><a>User Management</a></li>
<li><a>New User</a></li>
<li><a>User Management</a></li>
</ul>
</li>
<li>Inventory Management</li>
<li>Voucher Management</li>
</ul>
</div>
</div>
</body>
</html>
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|